EntheaCare design system
The living catalog of tokens, primitives, brand assets, and site chrome. Internal reference only. It renders the real implementation, so it stays in sync by construction.
Foundations
Color pairings
Every foreground/background pairing in the token layer, rendered as live text. Body pairings meet 4.5:1; large text and UI chrome meet 3:1.
Body on page ground
Nurse-led programs, explained plainly.
Muted on page ground
Nurse-led programs, explained plainly.
Body on white panel
Nurse-led programs, explained plainly.
Muted on white panel
Nurse-led programs, explained plainly.
Body on lavender wash
Nurse-led programs, explained plainly.
Muted on lavender wash
Nurse-led programs, explained plainly.
Indigo eyebrow on lavender wash
Nurse-led programs, explained plainly.
Indigo on lavender
Nurse-led programs, explained plainly.
On-brand on indigo
Nurse-led programs, explained plainly.
On-dark muted on indigo
Nurse-led programs, explained plainly.
Body on fall wash
Nurse-led programs, explained plainly.
Muted on fall wash
Nurse-led programs, explained plainly.
Burgundy eyebrow on fall
Nurse-led programs, explained plainly.
On-brand on fall burgundy
Nurse-led programs, explained plainly.
Burgundy on blush
Nurse-led programs, explained plainly.
Body on ECS wash
Nurse-led programs, explained plainly.
Forest on ECS mint
Nurse-led programs, explained plainly.
On-brand on ECS forest
Nurse-led programs, explained plainly.
On-dark on ink
Nurse-led programs, explained plainly.
On-dark muted on ink
Nurse-led programs, explained plainly.
Danger on white
Nurse-led programs, explained plainly.
Link on white
Deep-teal text link inside body copy.
Link on lavender
Deep-teal text link on the lavender wash.
Buttons on their surfaces
Type scale
Display · hero H1 · Poppins 600
Empowering healing, ending the stigma
XL · section H2 · Poppins 600
Empowering healing, ending the stigma
LG · Poppins 600
Empowering healing, ending the stigma
MD · Poppins 600
Empowering healing, ending the stigma
SM · Poppins 600
Empowering healing, ending the stigma
Body · Poppins 400 · line-height 1.6
Registered nurses turning clinical training into weekly programs that fit real lives.
Small / UI · Poppins 400–500
Booking opens our scheduling partner in a new tab.
Spacing
- 4px
- 8px
- 12px
- 16px
- 24px
- 32px
- 48px
- 64px
Radius
Layering
| Token | Value | Use |
|---|---|---|
| --z-overlay | 30 | Page scrims |
| --z-header | 40 | Sticky header |
| --z-drawer | 50 | Full-screen mobile menu |
| --z-skip | 80 | Skip-to-content link |
Motion
One duration (--duration-base, 0.3s) and one ease drive the header settle, drawer, and hover transitions. All motion collapses under prefers-reduced-motion.