Warm editorial healthcare-AI that reads like a design-forward magazine rather than a clinical dashboard: the signature move is a giant near-black rounded panel (#141312, radius 20px) dropped onto a warm off-white canvas (#fbf9f6 / #f5f3eb) carrying an oversized Avantt headline at 72px, weight 500, very tight -4% (-2.88px) negative tracking, with body set unusually heavy at 20px/500. ONE type family (Avantt, 1728 uses, Space Grotesk stand-in) does all the work, so hierarchy comes from scale and case, never a second face; eyebrows flip to uppercase warm-gray #6d645a. Colour is rationed hard — the whole surface is warm-neutral (cream, ink #141312, taupe #a7988a) broken by a single burnt-orange #ea2c00 (published token --enduring-orange #fc5d2b) that owns every primary CTA (hover #c02907), the live-news dot and the focus ring (2px #f95522, +2px offset). Buttons are radius 4px at 40px tall with 0 32px padding: orange-filled primary or a 1px-ink outline that inverts to a solid ink fill on hover. Depth is refused as drop shadows — structure is 1px inset rings (#eee5dd light, #242220 dark) and warm hairlines (#d5cbc0, #f7f2ed) — with backdrop-filter blur(20–40px) on floating glass. Motion is quiet 0.2–0.25s ease micro-transitions (house transition background-color 0.25s ease) plus GSAP + Lottie driving the audio-waveform / letterform brand animations; only a spin loader lives in CSS. One anti-pattern recorded: no prefers-reduced-motion block despite the GSAP/Lottie loops. Webflow default breakpoint ladder (479/767/991), light-only. Avantt is licensed, so the preview specimen stands in with Space Grotesk.
⚠ needs-dashboard
Browse Abridge in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: abridge.com (live DOM, computed styles via scripts/extract.js), 2026-08-05 (desktop 1514px). sheetsBlocked: 0 — full stylesheet coverage. Coverage: marketing home. Dashboard behind login (needs-dashboard). No text inputs on the home hero, so §4 input state is from Webflow loose-match rules (noted). Reality check: hint said "letterforms morphing into waveforms, super-graphics brand voice." Half right. It IS expressive and distinctive, but the chrome is a confident editorial system: giant near-black rounded hero panels carrying huge tight Avantt display type, one burnt-orange accent, on a warm-cream canvas. The waveform/letterform morph lives inside Lottie + GSAP animations, not the static chrome. Genuinely distinct from near-black AI-infra (this is warm cream + orange, editorial not terminal) and from Tia (coral photography clinic) / Oura (dark premium wearable).
Warm, editorial, and confident — a healthcare-AI brand that reads like a design-forward magazine, not a clinical SaaS dashboard. The signature move is a giant near-black rounded panel (#141312, radius 20px) dropped onto a warm off-white canvas (#fbf9f6 / #f5f3eb), carrying an oversized Avantt headline set at heavy negative tracking. Colour is rationed hard: the whole surface is warm-neutral (cream, ink, taupe) broken by a single burnt-orange (#ea2c00) that owns every primary CTA, the live-news dot, and the focus ring. One type family (Avantt) does all the work, so hierarchy comes from scale and case, never from a second face. Motion is quiet CSS micro-transitions plus GSAP/Lottie brand animations (the audio-waveform morph). Feels: warm, editorial, assured, human.
| Token | Hex | Role / usage |
|---|---|---|
| ink | #141312 | Primary text, headings, dark hero panel fill |
| near-ink | #222222 | Stat figures, dense body |
| warm-gray | #6d645a | Eyebrows, secondary text |
| taupe | #a7988a | Tertiary text, muted labels |
| on-dark | #ffffff | Text on the black panels |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #ffffff | Page background |
| cream | #fbf9f6 | Warm section tint |
| cream-deep | #f7f2ed | Inset panels, hover fills |
| warm-canvas | #f5f3eb | Published canvas token (--canvas) |
| carbon | #1c1c1c | Published dark token (--carbon) |
| slate | #393633 | Secondary dark surface |
| near-black | #242220 | Deepest panel / ring border |
| maroon-black | #440c00 | Warm-black accent section |
| Token | Hex | Role / usage |
|---|---|---|
| sand-border | #d5cbc0 | Card / input hairlines |
| ring | #eee5dd | Inset focus ring (0 0 0 1px) |
| Token | Hex | Role / usage |
|---|---|---|
| orange | #ea2c00 | Primary CTA fill, live-news dot (computed brand) |
| enduring-orange | #fc5d2b | Published brand token (--enduring-orange) |
| orange-hover | #c02907 | CTA hover fill |
| focus-orange | #f95522 | Focus-visible outline colour |
| sky | #76a8f4 | Minor illustration / chart accent |
| ink-navy | #22253f | Published --ink token (deep-navy accent) |
Rule: chrome stays warm-neutral; orange is the ONLY saturated colour on chrome, reserved for primary CTAs, the news dot and focus. Rule: the giant black panel is the hero signature, not a section divider.
Avantt (single family, 1728× on page; no second face). Specimen stand-in: Space Grotesk (Avantt is an Aeonik-class grotesque; the real face is licensed).#141312 (body runs heavier than default — 500, not 400).| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 72 / 68.4 | 500 | -2.88px (-4%) |
| Section (h2) | 40 / 40 | 400 | normal |
| Sub (h3) | 20 / 26 | 600 | normal |
| Body | 20 / 26 | 500 | normal |
| Button | 16 / 24 | 500 | normal |
| Eyebrow | 16 / 12.8 | 500 | normal, UPPERCASE, #6d645a |
Patterns: very tight negative tracking on the display (-4% at 72px); body is set at weight 500 not 400; eyebrows are uppercase warm-gray. Weight ceiling 600.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.