# Abridge — Marketing Site Design Spec

> 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).

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Text
| 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 |

### Surfaces
| 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 |

### Borders
| Token | Hex | Role / usage |
|---|---|---|
| sand-border | `#d5cbc0` | Card / input hairlines |
| ring | `#eee5dd` | Inset focus ring (0 0 0 1px) |

### Accent & semantic
| 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.

## 3. Typography Rules

- Font: `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).
- Body: 20px / 26px / weight 500 / `#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.

## 4. Component Stylings

### Buttons
- **Primary (CTA)**: bg `#ea2c00`, text `#ffffff`, border 1px `#ea2c00`, radius 4px, h 40px, pad `0 32px`, 16px/500. Hover: bg darkens to `#c02907`.
- **Secondary (outline)**: bg transparent, text `#141312`, border 1px `#141312`, radius 4px, h 40px, pad `0 32px`. Hover (loose `.btn`): bg → `#000000`, border → `#000000`.
- **Nav pill / tab**: transparent, radius 20px, taller (h ~84px on segmented feature switch), text `#141312`.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary CTA | bg `#ea2c00` / white | bg `#c02907` | outline 2px `#f95522` +2px offset | outline 0 | not captured (none on page) |
| Link | `#141312` | outline 0 (color shift) | outline 2px `#f95522` +2px offset | outline 0 | — |
| Input (loose, Webflow) | border `#d5cbc0` | border `#000000` | border `#3898ec` (Webflow default blue), outline 0 | — | — |

### Inputs
- No text field on the home hero; recipe from loose Webflow rules — hover darkens border to `#000000`, focus border is Webflow default `#3898ec`. Newsletter fields elsewhere round to small radii.

### Cards / panels
- Signature: giant black panel bg `#141312`, radius 20px, holding the hero. Inset "NEWS" card on the panel: darker fill `#242220`, radius ~16px, ring `0 0 0 1px #242220`.
- Light cards: bg `#ffffff`/`#fbf9f6`, radius 12px, 1px `#f7f2ed` or `#d5cbc0` hairline, ring shadow `0 0 0 1px #eee5dd`.

### Nav
- h ~72px, transparent over canvas; wordmark "ABRIDGE" set in the Avantt display face (distinctive RIDG ligature); center links `#141312`; right = outline Log In + orange Contact Us.

## 5. Layout Principles

- Max content width ~100rem (1600px) container token; hero content column left-aligned inside the black panel.
- Section rhythm generous (4rem section x-padding token); warm-cream and white sections alternate with full-bleed black panels.
- Hero anatomy: uppercase eyebrow → 72px display (two lines) → 20px body → dual CTA (orange primary + outline secondary), with a floating dark NEWS card bottom-right.
- Radii ladder gives everything soft corners: 4px controls, 12px cards, 20px hero panel, 1000px pills.

## 6. Depth & Elevation

- Radii: buttons `4px`, chips/small `8px`, cards `12px`, hero panel / nav pills `20px`, full pills `1000px`, some `30px`.
- Elevation is mostly **1px inset rings**, not drop shadows: `rgb(238,229,221) 0 0 0 1px` (light) and `rgb(36,34,32) 0 0 0 1px` (on dark). Structure otherwise from 1px hairlines (`#f7f2ed`, `#141312`, `#d5cbc0`).
- Backdrop blur (40px / 20px) used on floating glass elements.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| background-color | 0.25s | ease | buttons, CTA fills |
| opacity | 0.2s / 0.25s | ease | reveals, fades |
| border/background/color | 0.25s | ease (×3) | inputs, links |
| all | 0.2s | ease | misc controls |
| transform | 0.5s | cubic-bezier(0.37,0,0.63,1) | larger moves |

- House transition: `background-color 0.25s ease`. Custom easings present incl. a springy `cubic-bezier(0.54,1.5,0.38,1.11)` and ease-out `cubic-bezier(0.165,0.84,0.44,1)`.
- Libraries: **GSAP + Lottie** detected — these drive the signature audio-waveform / letterform brand animations. Only `spin` keyframe in CSS (loader).
- **Anti-pattern: no `prefers-reduced-motion` block** (reducedMotionBlocks 0) despite GSAP/Lottie loops — recommend adding one.

## 8. Backgrounds, Effects & WebGL

- No canvas/WebGL, no background video, no grain (rasterLayers 0, canvases 0, three false, videos 0).
- Gradients are scrims only: `linear-gradient(rgba(0,0,0,0) → #000)` and `linear-gradient(rgba(255,255,255,0) → #fff)` used to fade panel edges into the canvas.
- `backdrop-filter: blur(40px)` / `blur(20px)` on floating glass cards.
- Atmosphere is carried by Lottie/GSAP animations (waveform morph), not CSS effects.

## 9. Do's and Don'ts

### Do
- Build the hero as a giant near-black rounded panel (`#141312`, radius 20px) on a warm-cream canvas.
- Set huge Avantt display at tight negative tracking (-4% at 72px); keep body at weight 500.
- Ration orange `#ea2c00` to primary CTAs, the live-news dot and the focus ring only.
- Use 1px inset rings (`#eee5dd` light) and hairlines instead of drop shadows.
- Keep controls at radius 4px, cards 12px, hero/pills 20px.
- Use warm neutrals (cream `#fbf9f6`, ink `#141312`, taupe `#a7988a`) for everything non-accent.

### Don't
- Don't introduce a second type family — Avantt does all the work.
- Don't use a cool-gray canvas; the neutrals are warm (cream/taupe), never blue-gray.
- Don't add a second accent colour alongside orange.
- Don't replace inset rings with heavy drop shadows.
- Don't ship the GSAP/Lottie loops without a reduced-motion fallback.

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| max 479 / min 480px | mobile ↔ landscape phone |
| max 767 / min 768px | phone ↔ tablet, nav collapses to hamburger |
| max 991 / min 992px | tablet ↔ desktop, hero panel goes full-width |

- Webflow default ladder (479/767/991 seams). No dark-scheme block (`darkSchemeBlocks` 0), no container queries — the dark hero panel is a design choice, not a theme. Light-only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#fbf9f6` · Text `#141312` · Muted `#6d645a` · Border `#d5cbc0` · Accent `#ea2c00`
- Font: `Avantt` (single family) · Body: 20px/500 · Radius: 4px control / 12px card / 20px panel · Control height: 40px
- Focus: outline 2px `#f95522` +2px offset · Hover fill: `#c02907`

<abridge-marketing_design_language>
Use the Abridge design language: warm editorial healthcare-AI. Canvas is warm off-white (#fbf9f6 / #f5f3eb, never cool gray); primary text near-black #141312, secondary warm-gray #6d645a, tertiary taupe #a7988a. The signature is a giant near-black rounded panel (#141312, radius 20px) holding an oversized Avantt display headline at 72px, weight 500, very tight -4% tracking; body runs heavier at 20px/500. One family only. Ration a single burnt-orange #ea2c00 to primary CTAs (hover #c02907), the live-news dot and the focus ring (outline 2px #f95522, +2px offset); everything else stays warm-neutral. Controls radius 4px at 40px tall, cards 12px, pills 1000px. Depth is 1px inset rings (#eee5dd light, #242220 dark) and hairlines, not drop shadows. Motion is quiet 0.2-0.25s ease micro-transitions plus GSAP/Lottie audio-waveform brand animations. Feels: warm, editorial, assured, human. Avoid: a second type family, a cool-gray canvas, a second accent colour, heavy drop shadows, and shipping the Lottie loops without a reduced-motion fallback.
</abridge-marketing_design_language>