ManopauseMD — Design System

Task A3: Design Tokens Applied

Color Palette — Locked

#0D1B2ADeep NavyPrimary — Nav, headings, borders

#4A5568Slate GraySecondary — Body text, subheadings

#F5F0E8Bone WhiteBackground — NEVER use #FFFFFF as bg

#D4A853Amber GoldCTA buttons ONLY — nowhere else

#FFFFFFSharp WhiteCards and data sections only

Typography System — Locked

Playfair Display Bold 700 — Hero Headline (52–64px desktop)

Hero Headline Sample

Playfair Display Bold 700 — Section Headline (36–44px desktop)

Section Headline Sample

Inter SemiBold 600 — Subheadline (22–26px desktop)

Subheadline Sample

Inter Regular 400 — Body Text (18px minimum — floor never smaller)

Body text sample. Line height 1.65×. Max line length 65 characters. Audience is 44–58. Small type equals brand failure. Never use Inter Light or Thin at body size.

Inter SemiBold 600 — CTA Button (17px) — Amber Gold bg, Deep Navy text

Inter Medium 500 — Nav / UI (15px)

Nav Label Sample

IBM Plex Mono Regular — Data / Lab Labels (15–16px) — data labels ONLY

TESTOSTERONE: 412 ng/dL · FREE T: 8.2 pg/mL

Inter Regular 400 — Trust Bar / Disclaimers (13–14px) — Slate Gray

Physician-reviewed | Evidence-tiered | Zero clinical claims | Built for men who think

Spacing Scale — 8px Base Unit

--space-10.5rem / 8px

--space-21rem / 16px

--space-31.5rem / 24px

--space-42rem / 32px

--space-52.5rem / 40px

--space-63rem / 48px

--space-84rem / 64px

--space-105rem / 80px

--space-126rem / 96px

--space-168rem / 128px

CHECKPOINT_A3 — Design system applied. No site content. Phase B sections to be built task-by-task per operator approval.