Health Centre · Boarding & Day Student Documentation
Medical Record Booklet
This is the central medical capture form for a student — counselling notes, immunisation history, medication authorisations, flu vaccination consent, and the full boarder record are all completed here. The tabs above step through each part. Entries save automatically to this device as you go, and nothing is transmitted until you export it.
Design Spec & Logic
A running record of the rules, decisions and logic this prototype is built on — for reviewing the design, not for staff use. Reflects everything agreed through this conversation.
A single-file capture form for a boarding student's medical record, restyled from a pre-existing school booklet onto the Reach platform. Content and field logic were inherited; the visual and interaction layer is new.
In scope
Nine capture sections — student details through to review and export, unchanged in content from the source booklet.
Reach portal chrome — global bar, module tab strip, left drawer and quick-actions panel (see §4).
Local-only data — nothing is transmitted; the form saves to the device and exports to file (see §9).
Known simplification: this is a design prototype. There is no back end, no authentication, and no server submission. The user identity in the drawer and every item in the global nav and quick-actions panel are static and non-functional — they exist to show the module in its real chrome.
2
Design system & token governance
Every value traces to the Reach Design System token set. The build was audited programmatically, not by eye.
No new colours — 27 distinct hex values are used and all 27 resolve to an existing token.
No off-scale type sizes — every font-size resolves to a scale step (see §5).
No rgba() — semi-transparent colour would compose to values outside the token set. Scrims use a token colour with an opacity property, so the underlying value stays named.
Contrast verified by script — every pairing was checked with check_contrast.py rather than estimated.
Note: two genuine token gaps were found and raised as proposals for review rather than being filled locally — white is not defined as a token despite being the approved remedy in eight places, and the scale has no step between 14px and 10px. Neither has been applied.
3
Sub-brand selection
ReachBoarding Student Life System — selected because the booklet is a boarders' medical record. Palette: #E31E31, #F47920, #DE608B, #1A4D6D.
Orange is used for the tasks icon in the global bar and the active-tab accent bar on navy.
Pink is decorative only — it has no accessible text colour at 3.41:1 on white and 4.04:1 on navy, so it never carries text.
Blue 100 carries the structural weight, being shared across all four sub-brands and therefore safe if the sub-brand is later reassigned.
4
Portal chrome & navigation
The module sits inside the live Reach portal chrome, reproduced from portal screenshots.
A. Global bar
Navy, 52px, sticky. White menu labels at 13.80:1.
Icon buttons are 32×32 for target size.
Menus collapse behind the hamburger below 1100px.
B. Tab strip
One tab per booklet section, title plus subtitle.
Active tab: Blue 100 underline on a Blue 5 surface.
Completed sections carry a ✓ prefix — not colour alone.
C. Left drawer
Opens from the hamburger over a navy scrim at 45%.
Every item carries a circular badge: 1–9 for workflow steps, § and ◆ for the tracking pages, which sit last.
Escape and scrim close it; focus moves in on open and returns to the trigger on close.
D. Quick actions
Four columns, opened by the create button.
The featured action marks the current module — here, Create new Medical Note.
Deviation from the tracker convention: the project tracker skill specifies a persistent 226px navy left sidebar. This prototype uses the portal's own top bar and tab strip instead, at the user's direction and matching supplied screenshots of the live portal. The badge convention is preserved inside the drawer. See §12.
Field labels use H4 — 14/700, matching input text size but distinguished by weight.
H5 is restricted to labels — eyebrows, tab subtitles, table headers and badges. It never carries content the user must act on.
The 4.5:1 bar applies everywhere — body text at 14px never reaches the large-text threshold, so no relaxed ratio is claimed anywhere in the build.
6
Colour & contrast decisions
Six known failures were found in the source material and remedied rather than reproduced.
Remedies applied
Status pills — tint background, Dark Text, base border. White on a status base is 1.73:1–4.67:1.
Create button glyph — Dark Text at 5.68:1; the portal renders it white at 2.29:1.
Tab subtitles — Blue 80 at 5.24:1; the portal renders them orange at 2.76:1.
Quick-actions featured item — tint surface with Dark Text at 11.04:1 plus aria-current; the portal uses green text at 2.29:1 and conveys state by colour alone.
Drawer icons — restricted to colours clearing 3:1 on white; the portal uses amber at 1.73:1 and orange at 2.76:1.
Grey text — solid #6E6E6E; the 70% treatment in the token file composes to 2.81:1 and fails.
Standing rules
Teal is never text — 2.70:1 on white. It appears nowhere as text, icon, border or focus ring.
Focus rings are Blue 100 on light surfaces and white on navy, both clearing 3:1 against their adjacent colour.
Form control borders are Blue 80 at 5.24:1. Blue 20 was rejected at 1.41:1, below the non-text bar for an interactive control.
The brand diamond is exempt — 2.95:1 on navy, but logotypes are outside 1.4.11.
7
Booklet structure
Nine sections, inherited from the source booklet and unchanged in content or order.
Sections I–IX — Student & Counselling, Immunisation, Medication Policy, Flu Consent, Flu Facts, OTC Medications, Boarder Family Details, Medical History & Consent, Review.
Roman numeral chips mark each card heading, preserving the paper booklet's numbering so a parent can cross-reference the printed form.
Progress is positional, not completion-based — the bar reflects which section you are on, not how much has been filled in. It is not a validation signal.
8
Form controls & components
A. Callouts
Amber sticky-note pattern for standard notices.
Rejected tint with a red bar for clinical warnings — contraindications and anaphylaxis only.
Every callout carries an icon and a bold heading, so severity is never colour alone.
B. Repeatable tables
Medications, allergies, practitioners and action plans are add-row tables.
Every generated input carries an aria-label, since the column header is not programmatically associated.
Rows seed with sensible defaults — three medication rows, GP and Dentist pre-selected.
Radio groups use fieldset and legend so the question is announced with each option.
Targets are 24px minimum for radios, checkboxes and icon buttons.
9
Data, persistence & export
Autosave — debounced at 600ms on any input, to localStorage under reach_medical_booklet_v1.
Storage is wrapped in try/catch and degrades to in-memory state, since the file may be opened where storage is blocked.
Export is JSON, filename derived from the student name.
Unchecked checkboxes are captured explicitly as false rather than omitted, so an unticked medication authorisation is recorded as a decision rather than an absence.
No transmission — there is no endpoint. The review page states this to the user directly.
Caveat: medical data in localStorage is unencrypted and persists on a shared device. Acceptable for a prototype; not acceptable for production without a server-side store and session handling.
10
Responsive & print behaviour
1100px — global nav menus collapse behind the hamburger; quick actions drop to two columns.
900px — username and secondary icons hide, grids collapse to one column, tables scroll horizontally.
Print — all chrome is hidden, every section expands regardless of active state, and each breaks to its own page, so the booklet prints complete rather than one section at a time.
11
Accessibility commitments
WCAG 2.2 AA is the floor — the lowest text pairing in the build is 4.70:1 and the lowest non-text is 3.27:1.
Colour is never the sole indicator — pills carry icons and labels, tabs carry ✓, the featured quick action carries aria-current.
The drawer traps focus while open and restores it on close.
Live regions — the toast is role="status"; the progress bar exposes aria-valuenow.
Note: this covers contrast and structural semantics only. Target size, keyboard order and screen-reader behaviour need testing against a live build, not inferred from tokens.
12
Documented deviations
Places where this prototype knowingly departs from a stated convention, recorded rather than silently applied.
No persistent left sidebar — the portal's top bar and tab strip are used instead, at the user's direction (see §4).
Lists are not alphabetical — the OTC medication and medical condition checklists follow the printed booklet's order so a parent can work down the paper form alongside the screen. The tracker convention asks for alphabetical by default; parity with the source document was judged to outweigh it. Raised as an open question below.
Tables are not sortable — the four tables are data-entry grids, not display tables. Sorting rows a parent is mid-way through typing would lose their place. The convention is read as applying to display tables.
Open questions — raised but not yet resolved
Should the OTC and conditions checklists be alphabetised, breaking parity with the printed booklet?
Should tab subtitles keep the portal's orange despite failing at 2.76:1, or is the Blue 80 substitution accepted as the standard?
Which sub-brand actually governs this module — ReachBoarding was inferred from the content, not confirmed.
Do the two token proposals (white token, 12px caption step) get adopted, and does H5 narrow to uppercase micro-labels if so?
Is unencrypted localStorage acceptable for a prototype handling medical data on shared boarding-house devices?
Medical Record Lifecycle
What is built, what is not, and what to do about it. Statuses you change here are saved to this device.
Ready-to-send build request
This file runs on its own, outside the live chat, so it can't message Claude directly. Copy this and paste it into your conversation to have it built — then come back and update the status below.