Design system
Styleguide
The visual contract. Every value below is a token from design.md. Toggle light/dark in the header — the entire system re-themes from CSS variables. Use the Request a demo button states and the mega-menu above as live references.
§1 Color
A tight, earned palette
Mostly ink-on-paper. Purple appears with intent; teal is the single accent for data and health signals.
Brand — Purple
50
#F4F0FB
100
#E7DDF6
200
#CBB6EA
300
#AC8BDC
400
#8B5FCC
500 · base
#6E3DB8
600 · actions
#5A2C9E
700 · hover
#471F7E
800
#341659
900
#21103A
Ink (purple-tinted neutrals)
ink-900
#100B1A
ink-700
#2A2335
ink-500
#564E63
ink-400
#7C7589
ink-300
#A8A2B3
Paper & surfaces
paper
#FBFAFD
surface
#FFFFFF
surface-sunken
#F4F2F8
line
#E6E2EC
Accent — Teal (data only)
teal-400
#2DD4BF
teal-500
#14B8A6
teal-600
#0D9488
Semantic
success
#0D9488
warning
#B45309
danger
#B42318
info
#5A2C9E
§2 Typography
Type does the work
Two typefaces: Geist for display, Inter for body, Geist Mono for metrics and code. Hierarchy comes from scale, weight, and spacing — not boxes and color.
text-display
hero H1 · Geist 600 · -0.02em
Care and commerce, one platform
text-h1
Geist 600
Care and commerce, one platform
text-h2
section headline
Care and commerce, one platform
text-h3
Care and commerce, one platform
text-h4
Care and commerce, one platform
text-body-lg
lead paragraphs
Care and commerce, one platform
text-body
default 16px · Inter
Care and commerce, one platform
text-sm
Care and commerce, one platform
text-xs
captions, eyebrows
Care and commerce, one platform
text-stat · mono
$1B+
§3–4 Space, radius, elevation
Whitespace is a feature
An 8-point grid. Borders do the structural work; shadows are soft, low, and rare — one elevated layer per viewport.
Spacing scale
Radius
Elevation
§5.1 Buttons
One primary per section
Four variants, full state set, 44px tap target. Hover the primary for the lift + purple glow; tab to any button for the focus ring.
§5.6 Lockup
The repeating spine
Eyebrow → H2 → lead. This three-part lockup opens nearly every section. Shown left-aligned here and centered below.
Centered variant
Care and commerce, finally on one platform
A single, modular platform engineered for direct-to-consumer healthcare.
§5.2 Cards & stats
Flat, hairline, restrained
Feature cards: icon → H4 → body. Interactive cards lift on hover. Stat cards use mono numerals for the real-infrastructure feel.
Experience Builder
EMR & E-Prescribing
Pharmacy & Fulfillment
Across the platform
To all 50 states
Processed end to end
§5 Badges
Small signals, used sparingly
§5.7 Iconography
One set: Lucide, 1.5px stroke
No mixed sets, no emoji, no multicolor. Icons are ink-700 or purple-600.
Long-form
Prose
Real measure (≤ 68ch), §2 rhythm.
Most teams stitch together a website builder, an EMR, a prescribing tool, a pharmacy, and a payment processor — then spend months making them talk to each other.
One system, under your brand
Purple Label MD replaces that stack with a single, modular platform engineered for direct-to-consumer healthcare. Every step of the patient journey lives in one place, with the compliance built in.
- Branded intake and storefronts
- Clinical visits and
e-prescribing - Nationwide pharmacy fulfillment
Content integrity
Unverified claims are flagged, never shipped as fact
Every [CONFIRM] item renders through <Unconfirmed> — visually obvious in draft and greppable. The footer trust badges above use it too.
Trusted by250+ telehealth brands (unconfirmed claim — pending verification: Confirm real customer count before launch)across the U.S.
§6 Motion
Motion demos arrive in Phase 2
The GSAP engine (section reveals, hero timeline, metric count-up, the single pinned flow, marquee) is built next. All motion respects prefers-reduced-motion. This page is the static contract that gates that work.