Design system / environment-gated
Embodi tokens
Live reference for every token in @embodi/design-tokens. Values update automatically when tokens change. Per ADR-0008, this page is a development tool for visual QA — not linked from user-facing navigation.
Colours
Brand, neutrals, phase-aware palettes, and semantic colours.
Brand
brand-pink
#F62AA0
Signature
Pink scale
pink-50
#FFF0FA
pink-100
#FFCFED
pink-200
#FD9DD5
pink-300
#FD6DBE
pink-400
#FA48AF
pink-500
#F62AA0
pink-600
#DC1A88
pink-700
#C4007A
pink-800
#9A005E
pink-900
#70004A
pink-950
#4A0030
Neutrals (warm, pink-tinted)
neutral-50
#FEF9FC
neutral-100
#F5F0F2
neutral-200
#E8E0E4
neutral-300
#D4C8CE
neutral-400
#A39AA0
neutral-500
#7A7278
neutral-600
#524B50
neutral-700
#3D353B
neutral-800
#2A2428
neutral-900
#1A1719
neutral-950
#0D0A0C
Phase-aware palettes
menstrual
light
#FFCFED
strong
#F62AA0
text
#A0005A
follicular
light
#DCF9E1
strong
#52C46A
text
#1A6B30
ovulatory
light
#FFF2CF
strong
#E8B400
text
#7A5800
luteal
light
#E7E1FF
strong
#8B72E8
text
#3D1FA8
Semantic
success
#52C46A
warning
#F0A030
info
#8B72E8
danger
#D83232
Typography
DM Serif Display for display, DM Sans for body and UI, DM Mono for data.
Display (DM Serif Display)
Biology Blueprint
Women’s physiology
Understanding your cycle
The follicular phase
Body (DM Sans)
The Symptothermal Method combines cervical mucus observations, basal body temperature tracking, and cycle-length awareness to build genuine body literacy.
The Symptothermal Method combines cervical mucus observations, basal body temperature tracking, and cycle-length awareness to build genuine body literacy.
The Symptothermal Method combines cervical mucus observations, basal body temperature tracking, and cycle-length awareness to build genuine body literacy.
The Symptothermal Method combines cervical mucus observations, basal body temperature tracking, and cycle-length awareness to build genuine body literacy.
The Symptothermal Method combines cervical mucus observations, basal body temperature tracking, and cycle-length awareness to build genuine body literacy.
Weights (DM Sans)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Line heights (reader-first)
The ovaries are paired organs, roughly almond-shaped, positioned on either side of the uterus. Each ovary contains thousands of follicles at birth; only a few hundred will ever be released as mature eggs.
The ovaries are paired organs, roughly almond-shaped, positioned on either side of the uterus. Each ovary contains thousands of follicles at birth; only a few hundred will ever be released as mature eggs.
The ovaries are paired organs, roughly almond-shaped, positioned on either side of the uterus. Each ovary contains thousands of follicles at birth; only a few hundred will ever be released as mature eggs.
The ovaries are paired organs, roughly almond-shaped, positioned on either side of the uterus. Each ovary contains thousands of follicles at birth; only a few hundred will ever be released as mature eggs.
Mono (DM Mono)
36.7 °C
Day 14 of 28
Spacing
4px base scale. Used for padding, margin, and gap throughout the system.
Border radius
Shadows
Warm-tinted — tinted with brand pink at low opacity rather than pure black.
Motion
All motion respects prefers-reduced-motion.
Hover each bar to feel the transition speed.
Breakpoints
Mobile-first responsive design.
UI primitives
Reusable components that consume the tokens above. Every state, every variant.
Button
Card
Flat card — bordered, no shadow. Used for secondary surfaces within a page.
Elevated card — subtle warm-tinted shadow. Used for primary content surfaces like lesson cards.
Input
This is how you’ll appear in your dashboard.
Password must be at least 12 characters.
Badge
Content blocks
Mockups of the Sanity content block types (per ADR-0006), rendered with sample course-appropriate content. Four of the ten types shown here; remaining types mocked up when Workstream 6 (Sanity) lands.
PhaseCallout
KeyInsight
PullQuote
Body literacy is not a skill you’re born with, and it’s not something an algorithm can give you. It’s built, cycle by cycle, by paying attention.
ImageWithCaption
