Clear Health Design System

Version vFinal — the single source of truth for tokens, type, color, and components powering the Clear Health marketing site. A light-first foundation with selective dark surfaces for product, CTA, and footer moments.

Foundation

Light / white primary surfaces. Navy ink for text. Indigo #5752FB as the single brand accent.

Typeface

Manrope for display & headings. Inter for body, UI & data.

Motion

Calm, spring-tuned. Buttons compress on press, cards barely lift, honors reduced-motion.
Audit summary

Confirmation that the site composes only approved primitives — no new components or one-off styles were introduced.

✓Built entirely on Design System vFinal tokens, classes, assets, and interactions.
✓Custom graphics promoted to first-class assets: the orb mark and wave motif.
✓Supporting pages compose approved primitives — no bespoke section styles.
✓Token coverage closed: ds-version vFinal, shadow-float, semantic card shadow pair.
Color

Brand gradient stops feed the signature washes. Indigo is the primary accent scale; the navy “ink” scale carries text and dark surfaces. Semantic colors are used sparingly for status.

Brand gradient stops

indigo-start#5A4EFD
indigo#5752FB
blue-violet#515EF6
blue#4673EE
cyan-blue#3690E2
teal#23B5D3
cyan#0BE3C1
mint#00F8B9

Indigo (primary)

25
50
100
200
300
400
500
600
700
800
900

Ink / neutral

0
25
50
100
200
300
400
500
600
700
800
900

Semantic

success-500#0BAE6E
warning-500#E59B0A
danger-500#E5424B
info-500#2E7DEB
Typography

Manrope drives display & headings (weight 600–800, tight tracking). Inter drives body, UI, and data. Every step is a token, responsive down to mobile.

Revenue clarity
text-display-xl / text-h1 · 48px · 600 · -0.09rem
Every claim, modeled
text-display-lg / text-h2 · 36px · 600
Section heading
text-h3 · 22px · 600
Card / sub heading
text-h4 / text-h5 · 18px · 600
Body XL — used for hero ledes and intros that need presence.
text-body-xl · 20px · 400
Body MD — the default paragraph size across the site for readable, comfortable copy.
text-body-md · 16px · 400
Caption — fine print, footnotes, metric descriptions.
text-caption · 13px · 400
Eyebrow label

text-eyebrow · 13px · 700 · 0.12em · eyebrow gradient
$2.4M
text-metric · 36px · 700
Gradients

The brand gradient is the signature fill for product, CTA, and AI moments. The eyebrow gradient clips into small accent text. Washes and glows keep light sections calm.

grad-brandProduct / CTA band signature
grad-eyebrowEyebrows, hairlines, H2 accent
grad-textInline accent / H1 gradient
grad-primary-pearlAvatars, small circular fills
grad-wash-lightHero / section background
grad-section-glowCalm centered violet glow
grad-dark-heroDark hero / footer field
grad-announcementTop announcement strip
glow-violetSoft glow behind cards/orbs
Backgrounds

Surface fills from white through soft neutrals to the dark and CTA-band treatments. Light surfaces carry most of the site; dark is used selectively.

bg-white
bg-subtle
bg-muted
bg-section-glow
bg-wash
bg-dark
bg-darker
bg-cta
Spacing & Radius

A 4px base scale governs all spacing and layout rhythm. Radius runs from 4px controls up to 44px full-bleed impact bands; pill for badges and buttons.

Spacing scale (4px base)

space-1 · 4px
space-2 · 8px
space-4 · 16px
space-6 · 24px
space-7 · 32px
space-9 · 48px
space-10 · 64px
space-12 · 96px
space-14 · 160px

Radius

xs · 4
sm · 8
md · 12
lg · 20
2xl · 28
3xl · 36
4xl · 44
pill
Borders

Three hairline weights for dividers and card edges, plus the gradient border for premium / AI moments.

border-subtle
border-default
border-strong
gradient-border
Motion

Three easing curves and three durations. Spring is reserved for the button press release. All motion is suppressed under prefers-reduced-motion.

ease-out

cubic-bezier(.22, 1, .36, 1)
Default entrances & hovers

ease-spring

cubic-bezier(.34, 1.56, .64, 1)
Button press release

ease-in-out

cubic-bezier(.65, 0, .35, 1)
Symmetric transitions
dur-fast 120ms· dur-base 220ms· dur-slow 400ms
Buttons

Pill buttons in Manrope 700. Primary carries the indigo glow; secondary and ghost stay quiet. On press the button compresses ~2px and springs back. Focus shows the indigo ring.

Variants

Request a demo
Talk to sales
Learn more
Get started
btn-primary· btn-secondary· btn-ghost· btn-dark

Sizes

Small
Medium
Large
X-Large

States

Hover
Pressed
Focus
Disabled
Forms & Inputs

48px inputs, 12px radius, quiet borders. Focus raises the indigo ring; errors switch to the danger ring with a message. Labels are Inter 600.

Work email
you@hospital.org
Organization (focused)
Clear Valley Health
Work email (error)
not-an-email
Enter a valid work email address.
Message
How can we help?
Tabs & segmented controls

A pill segmented control toggles related data views (expected / actual / variance). Filter chips narrow a data set; the active chip fills indigo.

ExpectedActualVariance
All payersCommercialMedicareMedicaid
Cards

Feature cards use a 20px radius and the resting card shadow. Only interactive cards lift on hover. Metric panels sit on dark for product moments.

◆
Digitized contracts
Structured payer terms, ready for modeling.
◇
Interactive (hover)
Lifts 4px with a softer, wider shadow.
Underpayments identified
$2.4M
Within first 90 days
Badges

Pill badges in Manrope 700, 12px. Status fills pair a soft tint with deep text. The eyebrow badge adds a leading dot.

IndigoSuccessWarningDangerInfoNeutralNew
CTA Bands

The dark brand-gradient band is the signature closing moment, with a 36px radius. A light “pearl” variant keeps dark text on near-white for mid-page calls.

Real impact
Model expected reimbursement —
for every claim.
Request a demoTalk to sales
See Clear Health on your data
Light “pearl” band — grad-cta-pearl
Metrics & Data

Big numbers in Manrope 700 anchor outcome claims — measured in revenue, not activity. Each pairs a label and a short description.

94%
Estimate Accuracy
Contract-based estimates vs actual patient responsibility.
$2.4M
Underpayments Identified
Average recovery opportunity within first 90 days.
48 hrs
Revenue Leakage Detection
Variances identified at ERA arrival, not weeks later.

Variance row

Payer A — Cardiology
+$184K
Product / dashboard components

Composed product panels used in feature splits — patient estimates, underpayment variance, and a dark metric tile. Built from the same tokens, never bespoke.

Patient Estimate94%
Total charges$4,200
Insurance pays$3,360
Patient responsibility$840
Underpayment Variance
Payer A · Cardiology+$184K
Payer B · Ortho-$92K
Payer C · Imaging+$31K
Net Revenue Capture
23%
▲ vs last quarter
Light & dark

Components adapt across light and dark surfaces. Eyebrows keep their gradient; buttons switch to white / outline treatments on dark.

Light surface
Default context
PrimarySecondary
Dark surface
Inverse context
WhiteOutline
Interaction states

Click any button to feel the compress → spring rebound (interactions.js). Tab through to see brand focus rings. Hover lifts cards and nudges inline arrows.

Press meAnd me⚙Loading…
Accessibility

The system ships accessible by default — these guarantees hold on every page that composes it.

✓Visible @@PROTECT0@@ brand rings on all interactive elements.
✓Keyboard-operable nav, dropdowns, accordions, and forms.
✓Semantic landmarks (nav / main / section / footer); one H1 per page.
✓44px minimum tap targets; reduced-motion honored globally.
✓AA contrast on light and dark surfaces; decorative graphics aria-hidden.
Navigation Mega-Menu

The live nav dropdown panel, built with the same shared classes (ch-dd, dropdown__item, dd-ic, dd-h5, dd-p, dropdown__group-label, dropdown__footer). Editing any of these classes here updates the live navigation.

Explore the platform
Explore Platform
Navigation Mega-Menu

The live nav dropdown panel, built with the same shared classes (ch-dd, dropdown__item, dd-ic, dd-h5, dd-p, dropdown__group-label, dropdown__footer). Editing any of these classes here updates the live navigation.

Explore the platform
Explore Platform