Upcoming appointment
Annual physical
–
AO
Dr. Amara OkaforFamily medicine · Kuro Clinic, Suite 210
Confirmed
Arrive 10 minutes early
Dr. Amara Okafor
Patient app · Friday, 23 October
Good morning, Maya.
Your visit with Dr. Okafor is at 10:30 AM. Two short questions and you're ready.
AO
- Done: About you
- Payment
- Consent
- Reason
How will you pay for your visit?
Pick one. You can still change it at the front desk.
Step 2 of 4 · about a minute left
Insurance
Your coverage
We checked your plan this morning. There's nothing you need to do.
- Copay today
- $25
- Deductible met
- $1,840
- of $2,500
- $660 to go this year
- Prior authorization
- None
Clinician workspace
What the clinic sees
Same patient, same morning. Mostly neutral, so the one critical value finds you first.
Results · Metabolic panel, A1c, TSH
Visit note sign-off
Annual physical · 23 Oct, 10:30 AM
-
Done: Note signed
-
Current: Awaiting co-signerDr. Lena Brandt
-
Not started: Complete
LBCodes on this note
- Z00.00Adult health exam
- R73.03Prediabetes
- E87.5Hyperkalemia
Locked at signing. Any change from here is an addendum, shown after the original.
Maya Rodriguez
Patient · usually replies within an hour
Is it okay to take ibuprofen before my visit today?
Good morning, Maya. Yes, that's fine. Skip it from now until your labs are drawn.
- Call with Maya, 4 min, logged to the chart ·
Perfect, thank you. See you at 10:30 AM!
Kuro design system / foundations
Calm on the surface. Exact underneath.
Stone, paper, olive and clay for the calm. One violet for the moment that matters, and a clear next step on every screen.
01 / Color
Ramps
Authored in OKLCH, one hue per family. Ratios are computed live from the rendered swatch against white (w) and against stone-950 (k).
Semantic surfaces and text
Components reference these, never the ramps. Each tile shows the three text tiers on that surface.
02 / Clinical status
Six roles, never color alone
Every status carries an icon and a word. Violet is never a status, olive is never anything but a call, and normal results stay neutral.
02b / Two greens
Light sage calls. Deep forest approves.
Lightness does the separating, so it survives colour blindness. Calls always carry a handset; approvals always carry a check or a signature.
As designed
Simulated deuteranopia
Simulated protanopia
Distance between the pair (computed from the token source)
02c / Action rule (open question)
Sumi does the work. Violet moves you forward.
Proposal: everyday primary buttons are sumi ink. Violet is kept for brand moments and the one key action per screen, so it still pops against the natural base.
Proposed: sumi primary, one violet key action
Alternative: violet for every primary
The "Primary rule" switch in the rail applies the alternative to every primary button on this page.
03 / Contrast
Computed, not estimated
Every pair the foundations use, checked in light, dark and both contrast-more themes at build time. Text needs 4.5:1 with no large-text exemption; controls and the focus ring need 3:1.
All pairs
04 / Type
Two faces, one job each
Blubird speaks: headlines at 24px and up, light subheads, thin accents. Inter does the work: every label, sentence and number.
Data: tabular, slashed, unambiguous
Blubird Text: proportional digits, no tnum
13.8111.1410.098.44.17
kuro-type-data: tnum, zero
13.8111.1410.098.44.17
Blubird (top) vs data role: I l 1, O 0, µ, ≤ ≥
Il1 O0 µ ≤ ≥
Il1 O0 µ ≤ ≥
05 / Space, radius, elevation
A 4px grid with room to breathe
Lift means you can act on it. Tint means it is telling you something.
Space
Radius
Semantic radii follow density: control, card, panel and tag step down one size in compact.
e0 / tintInformation. No shadow, no border.
e1 / cardClickable card. Hairline + whisper.
e2 / popoverMenus, popovers, call bar.
e3 / modalModals and sheets over the scrim.
ToastInverse surface, e3 shadow.
06 / Focus and density
Visible from across the room
One stroke, never two. A bordered control's own border turns deep violet at 2px. A filled button gets nothing outside it: its fill steps darker or lighter and a 1px stroke of its own hue appears just inside the edge.
Approve (tonal forest)
Bordered: the border is the ring
Input on brand tintMember ID
On critical tint
On inverse (toast)
Key, solid: superseded, reference only (.btn-key-solid)
Key (.btn-key, tonal, Nik's pick): one per screen
RestHoverFocusPressed
Approve (forest)
RestHoverFocusPressed
Primary
Critical (red)
RestHoverFocusPressed
Call (sage)
RestHoverFocusPressed
Tint
Current density
Switch density in the rail. These values come from density.*.json and re-flow everything on the page, including the compositions below.
Search patients
06b / Avatars
Photo first, earth-toned initials after
Patient photos are approved for the chart header. Without one, initials sit on an earthy tint picked from the person's ID, never olive or forest.
MRxl 80, photo (initials fallback)MRlg 56, clay
AOmd 40, sand
JPmd 40, stone
LKsm 32, plum
TNxs 24, indigo
07 / Layers, breakpoints, motion
The quiet tokens
Named layers instead of raw z-index. Breakpoints for the page shell only. Motion values are placeholders until the motion phase.
z-index
Breakpoints and containers
Motion (placeholder)
08 / Bento grid
Give it a size, it lays itself out
Tiles declare width and height in grid units. Rows are one unit tall, with one gap both ways, so two 2-unit tiles stack to exactly one 4-unit tile. Below 360px it is one column, in reading order.
Each tile prints its live span (columns × row units) for the width it is at now. Resize the window: the spans and column counts change per container tier (narrow 360, medium 560, wide 800, xwide 1040), and the order you read and tab through never changes.
Coverage
columns { narrow: 2 } · copay 1×2 and prior auth 1×2 stack beside deductible 1×4Today at a glance
columns { narrow: 2, wide: 4, xwide: 6 } · link tiles; widths change per tier, the order never doesVitals
columns { narrow: 2, medium: 3, xwide: 6 } · blood pressure keeps 2 columns, the rest fill inSchema (generative-UI primitive)
09 / Compositions
Built from foundations only
No component library yet. These shells use tokens and plain HTML, to prove the foundations can carry real clinical content.
Patient header
clinical canvas, follows the density toggleLab values with reference range and flag
resize the window: the row reflows on its container, not the viewportBasic metabolic panel + CBC
PotassiumLOINC 2823-3
6.2 mmol/L
Critical high
3.5
5.1
Final
HemoglobinLOINC 718-7
10.9 g/dL
Low
12.0
15.5
Final
WBCLOINC 6690-2
7.4 10³/µL
Normal
4.5
11.0
Final
Glucose, fastingLOINC 1558-6
98 mg/dL
Normal
70
99
Prelim
PlateletsLOINC 777-3
410 10³/µL
High
150
400
Final
SodiumLOINC 2951-2
141 mmol/L
Entered in error
136
145
Voided
Insurance card
paper canvas, density pinned to relaxed on this subtreeYour visit today
We checked your plan before you arrived. There is nothing you need to do.
- Copay
- $25
- Deductible met
- $1,840
- of $2,500
- $660 to go this year
- Prior auth
- None
Why we ask for your card
So the clinic can bill your plan directly. Your card photo is stored with your chart and never shared.
Patient intake question
paper canvas, relaxed subtree, one decision per screenAbout youInsuranceConsentReason
How will you pay for today's visit?
We check your coverage before you arrive, so the front desk has nothing to chase.
About 2 minutes left.
10 / Layout and composition
Lines you feel, boxes you don't need
One grid per breakpoint, one spacing ladder, and a short list of things that never break. Space groups, a shared tint gathers, and a hairline encloses only what you can act on.
The grid at this width
live: this page's real margin, columns and gutterTier . Resize the window: the margin and column count change at the breakpoints (600, 900, 1200, 1600); the gutter follows density, so it matches the gap between cards.
Page grid, per breakpoint
to scale, fromgrid.columns, layout.margin, space.gutter, rail and pane widths