Internal Reference

Design system

Color tokens, components, and patterns used across the portal. Single source of truth for editorial visual decisions.

Color tokens

Primary

#0f766e

Teal 700 — links, primary buttons

Primary dark

#0d5d56

Hover states + gradients

Primary light

#14b8a6

Highlights + emphasis

CTA accent

#f59e0b

Newsletter + secondary CTAs

Text

#1e293b

Slate 800 — body text

Text muted

#475569

Slate 600 — secondary text

Surface

#f8fafc

Slate 50 — page bg variant

Surface alt

#f1f5f9

Slate 100 — deeper surface

Border

#e2e8f0

Slate 200 — dividers

Success

#16a34a

Verified + win states

Warning

#d97706

PA-required + caution

Danger

#dc2626

Errors + excluded states

Radius scale

radius-sm
0.25rem

radius-md
0.5rem

radius-lg
0.75rem

Score badges

9285-100

7975-84

6865-74

54<65

Buttons

Pills

DefaultIn-networkCash-pay

Medals

GOLD

SILVER

BRONZE

Ribbons

EDITORIALNEWVERIFIED

Site architecture

900+ URLs across 6 primary sections. Each section follows 3-click rule from homepage. URL pattern: lowercase, hyphen-separated, hierarchy-reflective.

Providers

91 brands + 250+ list pages

/brands →

Rankings

12 criteria + 49 states + 196 deep

/rankings →

By State / Clinics

49 state directories

/clinics →

Insurance

6 insurers + 6 cross

/insurance →

Medications

20+ drug pages + crosses

/medications →

Conditions

/timeline 4 stages + /symptom-bundle 12

/timeline →

Q&A + Articles

20 questions + 50+ guides

/q →

Tools

33 tools with ShareResultBar + HydrationGate

/tools →

Authority

/authors + /methodology + /bibliography

/methodology →

URL patterns

Pattern	Example	Pages
/brands/[slug]	/brands/allara	91
/best-of/[category]	/best-of/menopause	3
/best-of-state/[state]	/best-of-state/ca	49
/best-of-state/[state]/[category]	/best-of-state/ca/menopause	196
/rankings/[criterion]	/rankings/cheapest-hrt	12
/clinics/[state]	/clinics/ca	49
/insurance/[insurer]	/insurance/bcbs	6
/by-insurance/[insurer]	/by-insurance/bcbs	6
/timeline/[stage]	/timeline/menopause	4
/providers-by-medication/[drug]	/providers-by-medication/ozempic	20+
/provider-types/[type]	/provider-types/dtc-async	4
/price/[range]	/price/under-100	3
/symptom-bundle/[combo]	/symptom-bundle/hot-flashes-and-sleep	12
/q/[slug]	/q/can-i-take-glp1-with-hrt	20
/health/[condition]/[subtopic]	/health/menopause/stages	50+
/medications/[slug]	/medications/ozempic	20+
/head-to-head/[brandA]/[brandB]	/head-to-head/midi-health/winona	30+
/tools/[slug]	/tools/menopause-matcher	33

Navigation zones

Header (desktop)

7 nav items + Cmd-K search palette

Providers, Rankings, By State, Medications, Guides, Q&A, Tools

Bottom tab (mobile)

5 items, Apple-style

Home, Brands, Tools, Rankings, Q&A

Footer (6 columns)

Newsletter + 6 link sections

Providers, Conditions, Medications, Tools, Resources, Trust

Breadcrumbs

PageHero component on ~90% pages

BreadcrumbList schema attached to each

Hub-and-spoke clusters

Hub: /best-of/menopause

/brands/midi-health
/brands/alloy
/brands/winona
/brands/evernow
/brands/joi-womens-wellness

Hub: /timeline (4 stages)

/categories/menopause
/best-of/menopause
/q/when-should-i-start-hrt

Hub: /symptom-bundle (12 combos)

/categories/{condition}
/q/{related}
/tools/menopause-matcher

Hub: /q/can-i-take-glp1-with-hrt

/medications/ozempic
/health/menopause/hrt
/providers-by-medication/ozempic