The Clyne Health
design system.
A working reference for color, typography, motion, components, and our voice. Replaces the legacy "Liquid Glass" system with an AI-native, editorial language built on Geist + ink + teal.
01 — Principles
AI-first, not AI-as-feature
Clyne Concierge is the front door. Every surface should treat the chat as a primary action — not a chip in the corner. The homepage opens with a prompt, not a hero photo.
Editorial confidence over SaaS slickness
We borrow from print: hairline rules, mono labels, large medium-weight headlines, italic accent words. We do not borrow from health-tech blue gradients.
Receipts, not promises
Real numbers, real quotes, real sources. Every claim should be traceable to a study, an exit survey, or a model card.
02 — Logo
The Clyne™ logo is set in PP Agrandir and comes in two colorways: Clyne teal for brand-forward surfaces and black for print and light backgrounds. The same mark renders as live type across the site via the wordmark component below. Maintain clear space equal to the height of the “C”.
Primary · Clyne teal
Black · print & light surfaces03 — Color
Teal anchors the brand. Ink, paper, bone, and dark form the structural canvas. Amber and ember are reserved for clinical status only.
Teal
Primary — CTAs, accents, links
Teal Deep
Hover states, gradient ends
Teal Soft
Subtle teal backgrounds
Teal Mist
Pill backgrounds, highlights
Ink
Primary text, dark UI
Paper
Primary backgrounds, cards
Bone
Warm alternating section bg
Sand
Secondary warm surface
Dark
Dashboard / dark mode background
Dark Panel
Dark surface for panels
Amber
Status accent — low/warning
Ember
Status accent — high/alert
Configurable accent palette
Default is Clyne teal. The system supports five secondary accents for product campaigns and marketing surfaces.
04 — Typography
Geist is our display + body face. Geist Mono handles all eyebrows, labels, KPIs, and metadata. We never mix in another typeface.
Geist
Light italic · Regular · Medium · Semibold
Medium 500 · tracking -0.04em
Medium 500 · tracking -0.04em
Medium 500 · tracking -0.03em
Medium 500 · tracking -0.025em
Regular 400 · tracking -0.005em
Regular 400 · tracking -0.005em
Mono 500 · tracking 0.14em
05 — Component patterns
The vocabulary we build pages from.
Display headline
Geist Medium, italic-light accent word in teal.
Mono label / eyebrow
Geist Mono 10–11px, tracking 0.14em, uppercase.
Pill
Rounded-full, mono label inside. Tones: line / teal / solid / dark.
Section card
Solid surface (paper or dark-panel) with hairline border. No glass on white.
Concierge card
Ink/teal flagship card with concierge message preview side.
Departures board (How It Works)
Split-flap countdown + airline-row schedule.
Comparison wall (Compare)
Pinned compare cards with the legacy-vs-Clyne contrast strip.
Tool action card (chat)
Inline product / lab / plan card that opens in the split-screen preview.
Dashboard panel
Solid surface, mono label header, tracking-tight values, sparkline at bottom.
Apple-style liquid glass.
A frosted, light-refracting material — blur, a bright top rim, a reactive specular highlight (move your cursor over a panel), and an optional true-refraction mode. It needs imagery or color behind it to read.
The Golden Gate Bridge is painted in a color officially known as International Orange.
A smoked-glass variant for toolbars, sheets, and overlays on bright imagery.
ActionDistorts the backdrop with an SVG displacement map for real glass warping. Renders in Chromium; degrades to a clean frost elsewhere.
06 — Voice & tone
Treatment, plan, provider, member, dose, check-in, response, progress, qualify, personalized, prescribed, fulfilled, eligible, side effects, titration, escalation.
Magic, miracle, easy, guaranteed, weight-loss hack, fat burner, cure, anti-aging, boost (clinical), patient (in marketing — prefer “member”), drug.