Colours
The palette uses a tonal model: each key hue expanded to a 13-step scale (tones 0 to 100), then mapped to semantic system roles for light and dark mode. Hover any chip to see its tone value.
Reference palettes, full tonal scale (0 to 100)
Teal (Primary)
01020304050607080909599100
Amber (Secondary)
01020304050607080909599100
Violet (Tertiary)
01020304050607080909599100
Neutral
01020304050607080909599100
Error
01020304050607080909599100
System roles, semantic mapping
Primary#006778
On Primary#FFFFFF
Primary Container#A9ECF8
On Primary Container#001F25
Secondary#794C00
On Secondary#FFFFFF
Secondary Container#FDE8BA
On Secondary Container#271900
Tertiary#6430A2
On Tertiary#FFFFFF
Tertiary Container#E5D9F5
On Tertiary Container#21005E
Error#B3261E
On Error#FFFFFF
Error Container#F9DEDC
On Error Container#410E0B
Surface#FAFAFA
On Surface#1A1B1E
Surface Variant#E1E3E4
On Surface Variant#444749
Color tokens, system roles
| CSS Variable | Token | Light | Dark | |
|---|---|---|---|---|
| --md-sys-color-primary | md.sys.color.primary | #006778 | #72D4EA | |
| --md-sys-color-on-primary | md.sys.color.on-primary | #FFFFFF | #003644 | |
| --md-sys-color-primary-container | md.sys.color.primary-container | #A9ECF8 | #004E60 | |
| --md-sys-color-on-primary-container | md.sys.color.on-primary-container | #001F25 | #A9ECF8 | |
| --md-sys-color-secondary | md.sys.color.secondary | #794C00 | #F5BB43 | |
| --md-sys-color-on-secondary | md.sys.color.on-secondary | #FFFFFF | #3E2900 | |
| --md-sys-color-secondary-container | md.sys.color.secondary-container | #FDE8BA | #583E00 | |
| --md-sys-color-on-secondary-container | md.sys.color.on-secondary-container | #271900 | #FDE8BA | |
| --md-sys-color-tertiary | md.sys.color.tertiary | #6430A2 | #C39EFF | |
| --md-sys-color-on-tertiary | md.sys.color.on-tertiary | #FFFFFF | #360092 | |
| --md-sys-color-tertiary-container | md.sys.color.tertiary-container | #E5D9F5 | #4D23A6 | |
| --md-sys-color-on-tertiary-container | md.sys.color.on-tertiary-container | #21005E | #E5D9F5 | |
| --md-sys-color-error | md.sys.color.error | #B3261E | #F2B8B5 | |
| --md-sys-color-on-error | md.sys.color.on-error | #FFFFFF | #601410 | |
| --md-sys-color-error-container | md.sys.color.error-container | #F9DEDC | #8C1D18 | |
| --md-sys-color-on-error-container | md.sys.color.on-error-container | #410E0B | #F9DEDC | |
| --md-sys-color-surface | md.sys.color.surface | #FAFAFA | #1A1B1E | |
| --md-sys-color-on-surface | md.sys.color.on-surface | #1A1B1E | #E1E3E4 | |
| --md-sys-color-surface-variant | md.sys.color.surface-variant | #E1E3E4 | #444749 | |
| --md-sys-color-on-surface-variant | md.sys.color.on-surface-variant | #444749 | #C5C7C9 | |
| --md-sys-color-outline | md.sys.color.outline | #74777A | #8E9193 | |
| --md-sys-color-outline-variant | md.sys.color.outline-variant | #C5C7C9 | #444749 |
Typography
Inter, 15 styles following a structured type scale, all variable-bound in Figma. Display for hero numerics, Headline for screen titles, Title for card headers, Body for content, Label for actions.
Type scale, Inter (15 styles)
Display Large
Display Medium
Display Small
Headline Large
Headline Medium
Headline Small
Title Large — Doctor name, card headers
Title Medium — Section subheads
Title Small — Compact headings
Body Large — Descriptions, primary body copy
Body Medium — Supporting text, secondary content
Body Small — Captions, legal, fine print
Label Large — Buttons, CTAs, booking confirm
LABEL MEDIUM — Chips, availability tags
LABEL SMALL — Nav items, micro labels
Typography tokens
| Token | CSS Variable | Size | Weight | Line height |
|---|---|---|---|---|
| md.sys.typescale.display-large | --md-sys-typescale-display-large-size | 57px | 400 | 64px |
| md.sys.typescale.display-medium | --md-sys-typescale-display-medium-size | 45px | 400 | 52px |
| md.sys.typescale.display-small | --md-sys-typescale-display-small-size | 36px | 400 | 44px |
| md.sys.typescale.headline-large | --md-sys-typescale-headline-large-size | 32px | 400 | 40px |
| md.sys.typescale.headline-medium | --md-sys-typescale-headline-medium-size | 28px | 400 | 36px |
| md.sys.typescale.headline-small | --md-sys-typescale-headline-small-size | 24px | 400 | 32px |
| md.sys.typescale.title-large | --md-sys-typescale-title-large-size | 22px | 500 | 28px |
| md.sys.typescale.title-medium | --md-sys-typescale-title-medium-size | 16px | 500 | 24px |
| md.sys.typescale.title-small | --md-sys-typescale-title-small-size | 14px | 500 | 20px |
| md.sys.typescale.body-large | --md-sys-typescale-body-large-size | 16px | 400 | 24px |
| md.sys.typescale.body-medium | --md-sys-typescale-body-medium-size | 14px | 400 | 20px |
| md.sys.typescale.body-small | --md-sys-typescale-body-small-size | 12px | 400 | 16px |
| md.sys.typescale.label-large | --md-sys-typescale-label-large-size | 14px | 500 | 20px |
| md.sys.typescale.label-medium | --md-sys-typescale-label-medium-size | 12px | 500 | 16px |
| md.sys.typescale.label-small | --md-sys-typescale-label-small-size | 11px | 500 | 16px |
Spacing
A 4-point system: 10 spacing tokens from 4px to 64px, used consistently across padding, gaps, and section rhythm. Variable-bound in Figma.
Spacing scale (10 tokens)
spacing-2xs4px
spacing-xs8px
spacing-sm12px
spacing-md16px
spacing-lg20px
spacing-xl24px
spacing-2xl32px
spacing-3xl40px
spacing-4xl48px
spacing-5xl64px
Spacing tokens
| CSS Variable | Token | Value | Usage |
|---|---|---|---|
| --md-sys-spacing-2xs | spacing.2xs | 4px | Icon gaps, tight chip padding |
| --md-sys-spacing-xs | spacing.xs | 8px | List item padding, inner gaps |
| --md-sys-spacing-sm | spacing.sm | 12px | Card inner padding (compact) |
| --md-sys-spacing-md | spacing.md | 16px | Default component padding |
| --md-sys-spacing-lg | spacing.lg | 20px | Card padding, nav item height |
| --md-sys-spacing-xl | spacing.xl | 24px | Section gaps, modal padding |
| --md-sys-spacing-2xl | spacing.2xl | 32px | Between content blocks |
| --md-sys-spacing-3xl | spacing.3xl | 40px | Screen-level margins |
| --md-sys-spacing-4xl | spacing.4xl | 48px | Page horizontal padding |
| --md-sys-spacing-5xl | spacing.5xl | 64px | Section vertical rhythm |
Shape
Six corner radius tokens, from sharp (0px) through to fully rounded pill (9999px). Each maps to a distinct UI use, from icon chips to floating action buttons.
Radius scale (6 tokens)
none
0px
0px
extra-small
4px
4px
small
8px
8px
medium
12px
12px
large
16px
16px
full
9999px
9999px
Shape, radius tokens
| CSS Variable | Token | Value | Usage |
|---|---|---|---|
| --md-sys-shape-corner-none | md.sys.shape.corner.none | 0px | Dividers, image fills |
| --md-sys-shape-corner-extra-small | md.sys.shape.corner.extra-small | 4px | Tags, chips, badges |
| --md-sys-shape-corner-small | md.sys.shape.corner.small | 8px | Buttons, text fields, compact cards |
| --md-sys-shape-corner-medium | md.sys.shape.corner.medium | 12px | Cards, dialogs, menus |
| --md-sys-shape-corner-large | md.sys.shape.corner.large | 16px | Bottom sheets, large cards |
| --md-sys-shape-corner-full | md.sys.shape.corner.full | 9999px | FABs, pills, search bars |
Elevation
Six elevation levels for layering surfaces, from flat (level 0) through to floating sheets (level 5). Each level pairs a key shadow with an ambient one for natural depth.
Elevation scale (6 levels)
level-0
flat
flat
level-1
1dp
1dp
level-2
3dp
3dp
level-3
6dp
6dp
level-4
8dp
8dp
level-5
12dp
12dp
Elevation tokens
| CSS Variable | Token | Shadow | Usage |
|---|---|---|---|
| --md-sys-elevation-level-0 | md.sys.elevation.level-0 | none | Flat surfaces, dividers |
| --md-sys-elevation-level-1 | md.sys.elevation.level-1 | 0 1px 2px / 0 1px 3px 1px | Cards at rest, raised buttons |
| --md-sys-elevation-level-2 | md.sys.elevation.level-2 | 0 1px 2px / 0 2px 6px 2px | FABs, search bars |
| --md-sys-elevation-level-3 | md.sys.elevation.level-3 | 0 1px 3px / 0 4px 8px 3px | Hover state on cards |
| --md-sys-elevation-level-4 | md.sys.elevation.level-4 | 0 2px 3px / 0 6px 10px 4px | Dropdown menus, tooltips |
| --md-sys-elevation-level-5 | md.sys.elevation.level-5 | 0 4px 4px / 0 8px 12px 6px | Bottom sheets, dialogs |
All tokens live in Figma as variable collections: Color, Reference (65 variables, 13 tones x 5 palettes), Color, System (27 variables, Light + Dark via VARIABLE_ALIAS), Typography (45 variables), Shape, Radius (6), Spacing (10), Elevation (6).