The system

Tokenized theme — schema v2

Every color, type step, space unit, and motion value below renders from the live Bricks palette, global variables, and theme style seeded from docs/design/tokens.json. A seed change visibly changes this page. Internal reference — not linked from site navigation.

Color roles

color.primary#1A2238

Headers, footer, headings, structure (dark navy)

color.accent#2E3A59

CTAs & primary emphasis only (brand navy)

color.background#F4F0E8

Page background — warm cream, never #FFF

color.text#242A38

Body text on light backgrounds

color.textOnDark#E8E0CE

Text on navy backgrounds (cream)

color.secondary#B4A385

Extended — tan: eyebrows, rules, chrome. Decoration only

color.highlight#E8E0CE

Extended — cream tinted section bands

color.surface#FBF8F1

Extended — off-white card/panel field

color.surfaceDark#232C47

Extended — raised card on navy sections

Derived helpers — color-mix(), never new literals

–tan-ink
eyebrow/label ink
–tan-hover
tan button hover
–accent-hover
navy CTA hover
–ink-muted
muted body ink
–on-dark-muted
muted text on navy
–edge-tan
hairlines on light
–edge-navy
hairlines on navy

Type scale — Lora display · Mulish sans

display · Lora 4.25remComfort
h1 · Lora 3remCare you understand
h2 · Lora 2.25remPatient resources
h3 · Mulish 1.5remSame-day crowns
h4 · Mulish 1.25remComfort options
eyebrow · Mulish 700Gentle dentistry, clearly explained
body · Mulish 1remWe take time to explain your options — so you and your family always know what’s happening and why. Body never drops below the 16px floor; line-height 1.55.
small · Mulish .875remSupporting captions and metadata use the small step.

Space & shape

8px grid · steps 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 (--space-1…8) · section rhythm 64px vertical / 32px gutters (WP-2)

buttons · radius 8 (--radius), never pill

cards · radius 14 (--radius-card), one subtle shadow level (--card-shadow / lift)

Motion tokens

Durations instant 0 / fast 120 / base 200 / slow 320 / slower 480 ms · eases standard / decelerate / accelerate / emphasized. Every interaction below runs on these variables and collapses under prefers-reduced-motion (theme-style guard).

Cataloged classes — live

Buttons — hover-lift + hover-tint (row 4)
Navy = default CTA on light fields (STYLE_GUIDE §2); tan only where the mockup shows tan.
mcc-card — lift + shadow raise (row 5)
Category eyebrow

Card title

Rest: --card-shadow · hover: −3px, scale 1.02, --card-shadow-lift.

mcc-chip — fill on hover (row 6)
Delta Dental
Aetna Dental
mcc-logo-shine — sweep + scale (row 3)
M
mcc-eyebrow (§1b)
Light field — tan-ink
Dark field — secondary

mcc-faq — disclosure-expand (row 7)

Panel height/opacity ease at --motion-duration-slow / --motion-ease-standard; the “+” rotates 45° at --motion-duration-base / --motion-ease-emphasized.

The theme-style guard collapses every transition to 1ms — show/hide becomes effectively instant and the rotate is removed.