← index / design system

Design system — tokens · IA · AR mirror

The spine. One source of truth for type, color, components, content rules, information architecture, and right-to-left.

① Tokens

Palette

--paper · #faf7f2
--paper-shade
--ink · #1a1f26
--accent sage
--warn · ochre
--danger · rust
--gold · tier
--bronze

Type

Caveat · display
Kalam · body · 15/22
Inter · UI · 12/16 · 500
JetBrains Mono · data
Tahoma · Arabic fallback
scale 11 · 12 · 14 · 18 · 22 · 28 · 40 · 56

Spacing · radius · elevation

spacing 4 · 8 · 12 · 16 · 24 · 32 · 48
radius 3 · 6 · 10 · 999
e0 · e1 hard · e2 soft

② Components

Chips

defaultsage · okwarndangertier
chip · border 1.5 · radius 999 · font Inter 11

Buttons

defaultprimaryghostdanger
hard shadow 2x2 · no gradients · always labelled

Cards

solid border
dashed · data
shaded
solid = committed · dashed = interpretive · shaded = meta

Data tokens

AED 1,352
HbA1c 6.4 %
DHA-12-4821
20 Apr · 14:28
always mono · localised numbers · never approximate

③ Content rules

Voice

● Fiduciary, not cheerleader · never "you're doing amazing!"
● Evidence-led · every number carries a source
● Calm · no urgency except in red-flag flow
● Plain-language first · clinical version one tap away
● AR ↔ EN parity · never AR as afterthought
● No emoji · chips + dots carry status

Dos · Don'ts

Do · "Your HbA1c trended up over the last 4 readings."
Don't · "Uh-oh! Your blood sugar is off."

Do · "Dr. Fatima will review this."
Don't · "Our AI thinks you should…"

Do · Call 998.
Don't · Call 911 (that's US).

④ Information architecture · role-gated

Member member
  • / home · twin summary
  • / health
    • / twin · 6 metaphors member
    • / labs member
    • / meds member
    • / vitals · wearables
  • / ask · triage + chat
  • / care
    • / book
    • / consultations
    • / referrals
    • / directory
  • / me
    • / wallet · insurance
    • / family · proxies
    • / consent · ledger
    • / settings · AR/RTL/a11y
    • / export · PDPL art.15
Doctor clinician
  • / inbox · triage
  • / schedule · week/day
  • / patients · MRN list
  • / consult · pre · live · SOAP+CIE
  • / referrals · in · out
  • / prescribing · e-Rx
  • / panel · care gaps
  • / mdt · tumor board
  • / earnings · quality scorecard
B2B admin
  • / insurer · exec · cohorts · risk · CIE · pre-auth · savings
  • / employer · population · wellness · invoicing
  • / hospital · ops · models · staffing
  • / pharma · demand · RWE · supply · PGx
  • / broker · pipeline · bind · book
  • / regulator · population · outbreak · oversight RO
  • / pharmacy · queue · cold-chain · substitution
Platform ops/DPO
  • / admin · identity · SoD · audit
  • / consent · ledger
  • / models · registry + cards
  • / status · incidents
  • / api · developer portal
  • / data-requests · PDPL desk

⑤ Arabic · right-to-left mirror

▦ ◐٠٩:١٤
مرحبا، عائشة
HbA1c٦٫٤٪
↑ ما قبل السكري · أسبوع
الدكتورة فاطمة
مكالمة في الساعة ١٤:٠٠
الأدوية
ميتفورمين · ٢× يومياً · ٩٤٪ التزام
المختبر
نتائج جديدة · ٣
الرئيسيةالصحة ●اسألالرعايةأنا

RTL rules

● All layout mirrors · icons that carry direction (arrows, back) flip · icons of objects (phone, heart) do not
● Numerals: Arabic-Indic (٠١٢) for body text · Western (012) for data / mono where units follow
● Mixed strings: embed LTR tokens with Unicode bidi marks, never CSS hacks
● Line-height +4px in AR — tall letterforms (ك ط ل) need the room
● Tahoma / Dubai / Noto Sans Arabic — never default rendering
● AR copy is written by an Arabic-speaking clinician, not translated from EN

Accessibility spec

● WCAG 2.2 AA · member + public · AAA for 998 flow
● Text scale: 0.8× → 1.6× without layout break
● Color never the sole channel (dots + chips + words)
● Voice input · AR · EN · UR · HI · TL
● Screen reader: labelled landmarks on every surface
● Reduced motion · all transitions respect prefers-reduced-motion
↳ This page is the spine. Every other surface pulls from these tokens — no orphans.
↳ RTL + a11y are design requirements, not a polish phase. Ship in AR and EN simultaneously or not at all.
← flows C index