Internal reference — not indexed
Brand reference
Every token, type step and component state on one screen. Change a token in src/styles.css and everything here — and every page — moves with it.
Marks
Logo lockups
Dark on light
Reversed on navy
Bee mark
Colour
Semantic tokens
Pages should reference these, not the raw ramps.
surface-enterprise
Navy grounds — enterprise temperament
surface-enterprise-raised
Raised panel on navy
surface-human
Warm ground — human temperament
surface-page
Default page ground
surface-quiet
Quiet tinted ground
ink-strong
Headings on light
ink
Body on light
ink-muted
Secondary on light
ink-inverse-strong
Headings on navy
ink-inverse
Body on navy
ink-inverse-muted
Secondary on navy
accent-signal
Action / signal (gold 55)
accent-quiet
Restrained accent (gold 80)
Navy ramp
navy-100
navy-90
navy-80
navy-70
navy-60
navy-50
navy-40
navy-30
navy-20
navy-15
navy-10
navy-05
navy-00
Gold ramp
gold-100
gold-90
gold-80
gold-70
gold-60
gold-55
gold-50
gold-40
gold-30
gold-20
gold-15
gold-10
gold-05
gold-00
Typography
Type ramp
Manrope throughout, on a fixed editorial ramp.
type-eyebrow
Relationship intelligence
type-h1
Health happens between appointments.
type-h2
A relationship that continues when the appointment ends.
type-h3
Understanding only matters if something happens next.
type-h4
Handled in the relationship
type-lead
Hygia creates continuity between patients and the healthcare organizations responsible for their care.
type-body
Traditional healthcare systems are very good at recording encounters and transactions. They are much less capable of maintaining an ongoing relationship with the person between them.
Components
Actions and links, in both temperaments
Components
Content primitives
Eyebrow
Card with footer
Cards compose into grids and inherit tone rather than styling themselves.
Card, no eyebrow
Second state of the same component.
Card on navy
Same component, enterprise temperament.
ValueGrid item
Rule-topped three-up grid used for capability sets.
Second item
Consistent rhythm without boxing content.
Third item
Tone-aware body colour.
That is the gap Hygia was created to fill.
- 01
DistinctionList
Numbered editorial list for sequenced arguments.
- 02
Second entry
Gold numerals, hairline separators.
- QuestionRow item?
- A second question?
- A third question?
- NotClaim — used to state boundaries plainly.
- A second boundary.
States
Focus, hover and motion
Focus rings are a single global token (gold 80, 2px, 3px offset) applied via:focus-visible. Motion uses the brand easing token and is fully suppressed underprefers-reduced-motion. Tab through this page to verify every interactive element shows the ring.
animate-rise
Entry motion used on hero content.
rule-thread — the continuous relationship motif