--- version: alpha name: "Descript" description: "Descript's marketing site replaces the typical AI-tool dark slab with a cream-pink canvas (`#fff7fa`), a custom Brett display serif, and a wine-dark `#651a39` primary button. Section headings glow in red-orange (`#f73b3b` / `#ff5340`) like editorial dingbats, while body copy in a custom Booton sans keeps the page calm. The result reads like a print magazine that happens to edit video. Where every other AI tool reaches for purple gradients or chrome-on-black, Descript ships cream-pink + serif display + sans body — closer to a Glossier ad or a perfume-counter splash than a SaaS landing. Section labels glow in red-orange like the dingbats that mark chapter starts in print magazines. The primary CTA is a wine-dark `#651a39`, an unusually saturated near-black that reads as \"lipstick\" — paired with the cream canvas, it makes the page feel like a beauty-editorial spread more than a video editor. This is editorial design as positioning: every chromatic move signals that Descript is a creative tool for storytellers, not a developer utility. The custom Brett-family serif is the display face here, not the editorial accent — inverting the Notion convention where serif is reserved for body or pull-quote." colors: bg: "#fff7fa" bg-soft: "#fffafc" bg-tertiary: "#fef0f4" surface: "#ffffff" surface-rose: "#f7e8ed" text: "#1a1a1a" text-strong: "#26171d" text-medium: "#4a3540" text-soft: "#7a6770" text-faint: "#a8949c" text-muted: "#c9b9bf" brand: "#651a39" brand-hover: "#4a1129" brand-deep: "#3a0d20" brand-soft: "#fde2eb" brand-tint: "#f5cdda" on-brand: "#ffffff" accent-red: "#f73b3b" accent-orange: "#ff5340" accent-orange-soft: "#ffd6cc" accent-coral: "#ff7a5c" accent-rose: "#ff4d7c" link: "#651a39" link-hover: "#4a1129" selected-bg: "#fde2eb" disabled: "#c9b9bf" border: "#0000001a" border-strong: "#00000026" border-subtle: "#00000010" border-brand: "rgba(101, 26, 57, 0.30)" success-bg: "#d9eedb" success-text: "#1f4d2c" warning-bg: "#fff0d6" warning-text: "#7a4a00" danger-bg: "#fde2eb" danger-text: "#651a39" info-bg: "#e6e8f5" info-text: "#2a2a4a" typography: display: fontFamily: "Brett" fontSize: "96px" lineHeight: 1.55 letterSpacing: "-0.025em" body: fontFamily: "Booton" fontSize: "17px" lineHeight: 1.55 mono: fontFamily: "JetBrains Mono" rounded: button: "12px" card: "16px" pill: "9999px" spacing: xs: "1px" sm: "2px" md: "8px" lg: "24px" xl: "48px" --- ## Overview ## Overview Descript's marketing site reads like a print magazine that ships software. The body bg is a warm cream-pink `#fff7fa`, headlines are set in a custom **Brett** serif at 72px, and section labels glow in red-orange like the dingbats that mark chapter openings in editorial layouts. Body copy sits in a custom **Booton** sans at 17px on a 1.55 line-height — the duet of serif display + sans body inverts the Notion convention (where Notion uses sans display + serif body). The action layer is a single wine-dark `#651a39` CTA pill at 12px radius — saturated enough to read as lipstick, dark enough to anchor a soft pink page. Secondary actions use a soft `#fde2eb` hover wash. What makes Descript visually distinctive is the *category positioning rejection*. The AI-tool category is dominated by dark slabs, purple gradients, neon accents, and chrome-on-black aesthetics — Descript refuses the entire vocabulary. The cream-pink canvas is closer to a Glossier ad or a perfume-counter splash than a SaaS landing; the wine-dark CTA reads as lipstick rather than enterprise; the Brett serif at 72px on cream-pink could be a beauty-magazine cover headline. This is editorial design as positioning: every chromatic move signals that Descript is a creative tool for storytellers, not a developer utility. The implicit pitch is "you, the podcaster / video creator / writer, deserve a tool that looks like the magazine you'd want your work in." The third register is the **dingbat-like section labels**. H3 is rendered at 18px in Brett serif at 400 weight with `0.04em` tracking, in red-orange (`#f73b3b` or `#ff5340`) — a deliberate magazine-typography move. It's not an eyebrow; it's a chapter marker, the way *Vogue* or *The New Yorker* renders short-form section headers. The red-orange glow against the cream-pink canvas reinforces the editorial register and adds chromatic punctuation without ever competing with the wine-dark CTA. The two color layers (red-orange ornament + wine-dark action) are kept strictly separate; mixing them in the same module would crack the system. Atmospheric vocabulary that captures the feeling: *cream-pink, beauty-editorial, lipstick-CTA, magazine-spread, Brett-serif, Booton-sans, dingbat-glow, perfume-counter, Glossier-software, AI-tool-rejection, creative-tool-for-storytellers, editorial-positioning.* Every surface lands like a print spread that has been ported to the screen by an art director who reads *Cabinet* and *Apartamento*. **Key Characteristics** - Cream-pink `#fff7fa` canvas — never pure white, never warm cream alone, always pink-tinted - Custom **Brett** display serif at 72px / weight 400 — the brand's loudest move - Custom **Booton** sans body at 17px / 1.55 — calm reading texture - Wine-dark `#651a39` lipstick CTA — saturated near-black that reads as beauty-editorial - Red-orange section dingbats (`#f73b3b` / `#ff5340`) — magazine chapter markers - Soft pink hover wash `#fde2eb` for secondary action — never grey-neutral - Pink-shell screenshot frames — replaces neutral browser chrome with editorial pink frame - 12px primary CTA radius, 8px secondary, 16px cards — three-tier rounded ladder - Inverted serif/sans duet — serif is the display, sans is the body (Notion-flip) - 96–128px section gutters — magazine-pace cadence - Cream-pink runs edge-to-edge — no dark-band breaks, no chromatic interruption - AI-positioning via beauty register — software that reads as cosmetic-counter craft ## Colors ### Primary - **bg** `#fff7fa` — cream-pink canvas, the page's identity. RGB (255, 247, 250). Never substitute white or warm cream alone — the pink tint is the brand. - **text** `#1a1a1a` — primary body copy, near-black. Warmer than `#000` so type doesn't fight the pink. - **bg-soft** `#fffafc` — softer cream-pink for nested panels. - **bg-tertiary** `#fef0f4` — slightly deeper pink for emphasis bands. - **surface** `#ffffff` — raised white card lift over cream-pink. ### Brand & Accent - **brand** `#651a39` — wine-dark primary CTA. Lipstick saturation. The defining chromatic move. - **brand-hover** `#4a1129` — pressed/hover state, deeper wine. - **brand-deep** `#3a0d20` — active state, deepest wine. - **brand-soft** `#fde2eb` — soft pink hover wash for secondary buttons. - **brand-tint** `#f5cdda` — mid-pink tint for chips and accent grounds. - **on-brand** `#ffffff` — white label on wine CTA. The high-contrast pair. ### Accent (Red-Orange Dingbat Layer) - **accent-red** `#f73b3b` — H1 dingbat, "AI Video Editor" label hue, primary chapter-marker glow. - **accent-orange** `#ff5340` — secondary section header hue, alternate dingbat tone. - **accent-orange-soft** `#ffd6cc` — orange wash background for highlight blocks. - **accent-coral** `#ff7a5c` — softer coral variant for visual hierarchy. - **accent-rose** `#ff4d7c` — rose-pink for highlights, occasionally used as a tertiary accent. The red-orange layer is **strictly separate from the wine-dark action layer**. Section labels glow in red-orange; CTAs are always wine-dark. Mixing them in the same module breaks the system — the red-orange is ornament, the wine-dark is action. Maintaining the separation is the brand's typographic-chromatic discipline. ### Interactive - **link** `#651a39` — wine-dark links in body copy. Underlined. - **link-hover** `#4a1129` — deeper wine on hover. - **selected-bg** `#fde2eb` — selected nav state, soft pink wash. - **disabled** `#c9b9bf` — disabled control text, muted pink-grey. ### Neutral Scale - **near-black** `#1a1a1a` — primary body text. - **wine-near-black** `#26171d` — display copy, leans wine. - **slate-medium** `#4a3540` — secondary heading, wine-leaning. - **slate-soft** `#7a6770` — captions, metadata. - **slate-faint** `#a8949c` — eyebrows, helper. - **slate-muted** `#c9b9bf` — disabled microcopy. The choice of *wine-leaning* slate scales (rather than neutral grey) is deliberate — every neutral on the page picks up a faint pink undertone, reinforcing the cream-pink canvas. Pure neutral grey would feel imported from a different system. ### Surface & Borders - **surface-0 (page)** `#fff7fa` cream-pink. - **surface-1 (panel)** `#fffafc` softer cream-pink. - **surface-2 (card)** `#ffffff` white card lift. - **surface-rose** `#f7e8ed` rose card surface for nested feature blocks. - **surface-screenshot-shell** `#fde2eb` pink-shell frame for in-product screenshots. - **border** `#0000001a` — 10% black hairline (notably stronger than Mintlify's 7% — Descript's borders read as soft pencil lines). - **border-strong** `#00000026` — 15% for outlined buttons. - **border-subtle** `#00000010` — 6% quietest separation. - **border-brand** `rgba(101, 26, 57, 0.30)` — wine-tinted hairline for emphasis. ### Shadow Colors Descript's depth language is **soft tonal layering** with warm wine-tinted shadows. Cards rarely cast shadows; when they do, the shadow is wine-tinted and diffuse — `rgba(101, 26, 57, 0.06)` to `0.10` — more "page lift" than "elevation." The brand never uses cool blue-tinted shadows; that would crack the warm-pink temperature. Product screenshots are framed in soft pink shells rather than the typical neutral browser chrome — the screenshot itself sits inside a `#fde2eb` pink frame at 24px radius, treating the product UI like an artifact in a magazine layout. ### Semantic - **success** — bg `#d9eedb` (soft green wash), text `#1f4d2c`, border `rgba(31, 77, 44, 0.20)`. - **warning** — bg `#fff0d6` (warm amber wash), text `#7a4a00`, border `rgba(122, 74, 0, 0.20)`. - **danger** — bg `#fde2eb` (uses brand-soft pink), text `#651a39` (uses brand wine-dark), border `rgba(101, 26, 57, 0.30)`. Note: danger is brand-coherent — it uses the same pink + wine pair as the CTA system, just at smaller scale. - **info** — bg `#e6e8f5` (soft slate-blue wash), text `#2a2a4a`, border `rgba(42, 42, 74, 0.15)`. The unusual choice: danger uses *the brand colors* (pink + wine) rather than a separate red ladder. This reinforces the single-brand-system discipline — there is no "danger red" separate from the brand wine; the brand color *is* the urgent color. ## Typography ### Font Family - **Display & Serif**: `"Brett", "__brett_523e52", "Georgia", "Times New Roman", serif` — high-contrast custom serif loaded via the Next.js `__brett_523e52` font hash. Used at weight 400 / 500. The defining display face. - **Body**: `"Booton", "__booton_bab293", system-ui, Roboto, sans-serif` — custom geometric sans loaded via `__booton_bab293` font hash. Used at 400 / 500 / 600. - **Mono**: `"JetBrains Mono", Menlo, Monaco, monospace` — pragmatic mono fallback. - **OpenType features**: `liga`, `kern`, `onum` (old-style figures) on serif; `liga` and `kern` on body; `tnum` and `zero` on mono. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | Display Hero | Brett | 96px | 400 | 0.95 | -0.025em | liga | Largest hero variant | | Display | Brett | 80px | 400 | 0.98 | -0.02em | liga | Section intro at scale | | H1 | Brett | 72px | 400 | 1.0 | -0.02em | liga | The canonical Descript hero | | H2 | Brett | 48px | 400 | 1.05 | -0.015em | liga | Major section | | H3 | Brett | 32px | 400 | 1.15 | -0.01em | — | Sub-section, in Brett serif | | H3 Label | Brett | 18px | 400 | 1.0 | 0.04em | — | The red-orange dingbat — chapter-marker section label | | H4 | Booton | 22px | 500 | 1.25 | normal | — | Card heading (switches to body face) | | H5 | Booton | 18px | 500 | 1.35 | normal | — | Inline emphasis | | Eyebrow | Booton | 14px | 600 | 1.4 | 0.06em | uppercase | Section pre-label | | Body Large | Booton | 20px | 400 | 1.55 | normal | — | Lede paragraph | | Body | Booton | 17px | 400 | 1.55 | normal | — | Default body copy (notably 17px, not 16px) | | Body Small | Booton | 15px | 400 | 1.5 | normal | — | Captions, sidebars | | Caption | Booton | 13px | 400 | 1.4 | normal | — | Image captions | | Caption Tabular | Mono | 13px | 500 | 1.4 | normal | tnum | Stats, data labels | | Label | Booton | 12px | 600 | 1.3 | 0.06em | — | UI labels | | Button | Booton | 15px | 600 | 1.0 | normal | — | CTA copy | | Pull Quote | Brett | 36px | 400 | 1.2 | -0.015em | italic | Editorial pull-quote in serif italic | | Code | Mono | 14px | 400 | 1.55 | normal | — | Inline + block | ### Principles - **Inverted serif/sans duet — serif is the display, sans is the body.** Where Notion uses sans display + serif body (NotionInter + Lyon Text), Descript flips the polarity — Brett serif as display, Booton sans as body. This is the brand's defining typographic move and what makes the page read as "magazine-spread" rather than "AI-utility." - **Brett at weight 400 only.** Headlines hit 400 — not 500, not 700. The serif's high-contrast strokes carry the weight; going heavier would feel shouty against the cream-pink. - **The H3 dingbat is the brand signature.** Brett at 18px / 400 / `0.04em` tracking in red-orange — a magazine chapter marker that lives in the typography ladder. It's not an eyebrow; it's a section label that has been promoted to brand-typographic status. - **Booton fills 400 / 500 / 600 — Brett never collides on weight.** The two faces never compete: Brett stays at 400 (occasionally 500 for H4 if it's set in Brett), Booton fills the body weight range. Hierarchy is typeface-driven, not weight-driven. - **Body at 17px, not 16px.** Descript's default body is 17px / 1.55 — between the SaaS-standard 16px and the editorial 18px (Kit, Notion). The 17px lands the brand right between web-app and magazine. - **Negative tracking compresses with size.** -0.025em at 96px, -0.02em at 72–80px, -0.015em at 48px, -0.01em at 32px, normal at 22px and below. - **Italics in serif body, never in display H1.** Brett italic carries quoted titles and pull-quotes; the Brett display H1 stays roman. - **OpenType discipline**: `onum` (old-style figures) in Brett serif so numbers integrate with letters; `tnum` and `zero` in mono for code blocks. ## Layout ### Spacing System - **Base unit**: 4px. - **Scale**: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160 — Fibonacci-adjacent. - **Density observation**: Descript runs generous magazine-pace spacing. Headlines float in 96–128px of margin; body paragraphs sit on 24px line gaps. ### Grid & Container - **Page max width**: `1280px`. Standard SaaS width but feels editorial because the cream-pink extends edge-to-edge. - **Site gutter**: `clamp(24px, 5vw, 64px)`. - **Grid**: 12 columns with 24px gutters. Hero blocks span full width; capability rails span 6–8 columns; sidebars span 4. - **Hero treatment**: full-bleed cream-pink, 72px Brett H1 anchored left, wine-dark CTA pill below, in-product screenshot in pink-shell frame to the right. ### Whitespace Philosophy The cream-pink canvas runs edge to edge without breaking into a dark band or color zone — the consistency of canvas is the design. Section gutters run **96–128px** between major editorial blocks; minor blocks sit on 64–80px gaps; intra-section spacing uses 24–48px. The page is structured as a sequence of editorial spreads: hero, feature spread, testimonial, product walkthrough, FAQ — each spread sitting on the same cream-pink, with rose insets and pink shells providing tonal punctuation. ### Section Cadence - Hero (cream-pink + Brett H1 + pink-shell screenshot) → Feature Spread (3-up cream-soft cards) → Testimonial (rose inset block with Brett italic pull-quote) → Product Walkthrough (cream-pink with red-orange H3 dingbats marking chapters) → FAQ (cream-pink, Booton sans throughout) → Footer (cream-pink ground, slate-soft micro-text). - Cream-pink runs edge-to-edge. There are no dark bands, no chromatic interruptions, no gradient transitions. - Pink-shell screenshot frames appear once or twice per page as visual anchors. ### Breakpoints | Name | Width | Use | |---|---|---| | Mobile | < 640px | Single column, full-bleed sections, 40px H1 | | Tablet | 640–1024px | 2-column rails, 56px H1 | | Desktop | 1024–1280px | Full 12-col grid, 72px hero, 680px prose | | Wide | 1280–1440px | Site max width hits | | Ultra | > 1440px | Page locks to 1280, gutters expand | ### Touch Targets - Minimum tap target: 44×44px (WCAG AAA). - Buttons: 48px minimum height on mobile (14px vertical padding × 2 + line-height). - Nav link tap area: 44×44px even when visual padding is smaller. ### Collapsing Strategy - **Header**: full nav at ≥1024px; hamburger sheet below. - **Hero**: 96px display → 72px H1 → 56px → 48px → 40px across breakpoints. Brett serif scales down but never switches to sans. - **Capability grid**: 3-up at desktop, 2-up at tablet, 1-up at mobile. - **Body width**: 680px → fluid 90vw at mobile. - **Pink-shell screenshots**: full-width on mobile; preserve 24px radius and 24px interior padding. - **Section spacing**: 128px → 96px → 64px across sizes. ### Image Behavior - In-product screenshots use `srcset` with 1x/2x/3x; aspect-ratio enforced to prevent layout shift. - Hero imagery uses `aspect-ratio` to prevent layout shift. - Lazy-loading on below-fold images; eager on hero. - Pink-shell frames use CSS `background-color` (no images) so they render instantly around the lazy-loaded screenshot. ### Container Queries Used inside capability cards to switch icon position when card width crosses 320px (icon-left vs. icon-top). Used inside FAQ accordions to switch from inline-meta to stacked. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | 0 | Flat — no shadow | Default page surface, hero, body sections | | 1 | Tonal layering (`#fffafc` on `#fff7fa`) | Cream-soft cards, nested panels | | 2 | Hairline + tonal | Default cards | | 3 | `rgba(101, 26, 57, 0.06) 0 4px 12px` | Sticky nav, dropdowns | | 4 | `rgba(101, 26, 57, 0.08) 0 12px 32px -12px` | Hover-lifted cards, popovers | | 5 | `rgba(101, 26, 57, 0.10) 0 24px 48px -16px` | Modals, dialogs | ### Shadow Philosophy Descript's depth comes from **soft tonal layering** (`#fff7fa` → `#fffafc` → `#f7e8ed`) and 10% black hairlines. Cards rarely cast shadows; when they do, the shadow is warm and diffuse, more "page lift" than "elevation." Product screenshots are framed in soft pink shells (`#fde2eb` at 24px radius) rather than the typical neutral browser chrome — the shell *is* the elevation device, treating the product UI like a magazine artifact rather than a layered interface element. The brand never uses cool blue-tinted shadows or hard drop-shadows; that would crack the warm-pink temperature and the editorial register. ## Shapes | Tier | Value | Use | |---|---|---| | Micro (xs) | 4px | Inline chip corners, decorative dividers | | Standard (sm) | 8px | Secondary buttons, code blocks, dropdowns | | Comfortable (md) | 12px | Primary CTA, inputs | | Relaxed (lg) | 16px | Cards, modals, feature blocks | | Featured (xl) | 24px | Hero shells, pink-shell screenshot frames | | Pill | 9999px | Soft-pink chips, status pills | Descript's signature radii: **12px primary CTA / 8px secondary / 16px cards / 24px screenshot shells**. Mixed radii within a primitive are avoided (a single button is one radius; a card is one radius). The asymmetry between primary and secondary buttons (12px vs 8px) is intentional — secondary actions read as slightly more compact, less prominent. ## Components ### Buttons **Primary (Wine-Dark Lipstick)** - Background: `#651a39`. Text: `#ffffff`, Booton 600 / 15px. - Padding: `14px 28px`. Radius: `12px`. No border. - Hover: bg → `#4a1129`; transition `220ms ease-standard`. - Active: bg → `#3a0d20`. - Use: Primary CTA — *Try Descript free, Start editing, Get started.* **Secondary (Wine Outlined)** - Background: transparent. Text: `#651a39` wine. Border: `1px solid #651a39`. Radius: `8px` (notably tighter than primary). - Same padding (14×28), font (Booton 600 / 15px) as primary. - Hover: bg → `#fde2eb` soft pink wash. - Use: Twin to primary — *Watch the demo, Read more.* **Ghost (Quiet)** - Background: transparent. Text: `#1a1a1a`. No border. - Padding: `8px 14px`. Booton 500 / 15px. - Hover: text → `#651a39` wine. - Use: Nav links, footer secondary actions. ### Cards **Cream Card (Default)** - Background: `#fffafc` softer cream-pink. Border: `1px solid #00000010`. Radius: `16px`. Padding: `32px`. - Shadow: none. - Hover: border → `#0000001a`; gentle wine-tinted 12px shadow at 6% wine. - Use: Default feature card — barely lifted from the cream-pink canvas. **Rose Inset Card** - Background: `#f7e8ed` rose surface. Border: `1px solid #00000010`. Radius: `16px`. Padding: `32px`. - Use: Nested feature blocks, testimonials, capability detail cards. **Pink-Shell Screenshot Card** - Background: `#fde2eb` soft pink. Border: none. Radius: `24px`. Padding: `24px`. - Inner: in-product screenshot at original aspect ratio, no neutral browser chrome. - Use: Wraps in-product screenshots in a warm-pink editorial frame instead of the typical neutral chrome. ### Badges, Tags, Pills **Eyebrow Label** — no chrome, just type. Booton 600 / 14px / uppercase / 0.06em tracking, colour `#7a6770`. Sits above section headlines. **Red-Orange Dingbat (H3-as-label)** — no chrome, Brett serif at 18px / 400 / 0.04em tracking, colour `#f73b3b` or `#ff5340`. The brand's defining chapter-marker label. **Soft-Pink Pill** — bg `#fde2eb`, text `#651a39` wine, radius `9999px`, padding `6px 14px`. Status / NEW / FEATURED labels. ### Inputs / Forms - Background: `#ffffff`. Border: `1px solid #00000026`. Radius: `12px`. Padding: `12px 16px`. - Font: Booton 400 / 16px. Placeholder: `#a8949c`. - Focus: `0 0 0 2px #651a39` wine ring, border → `#651a39`. - Error: border → `#651a39` (uses brand wine for danger), bg → `#fde2eb`. - Helper: caption 13px slate-soft below. ### Navigation - Header height `72px`. Background `#fff7fa` cream-pink (becomes opaque-pink-blur on scroll). - Logo: Descript wordmark in Brett serif, near-black with subtle wine accent. - Nav links: Booton 500 / 15px, colour `#1a1a1a`, padding `8px 14px`. Hover → `#651a39` wine. - Right-side CTA pair: ghost "Sign in" + wine-dark pill "Try Descript free". - Mobile: full-screen sheet, links stack at 28px / Brett 400 (italic for headings). ### Optional Components **Pull Quote** — Brett 36px / 400 / italic with `-0.015em` tracking, near-black `#1a1a1a` text, with a 4px wine vertical rule on the left edge or a rose-pink block surrounding. **Footnote** — Booton 13px / 400, slate-soft; sits on a thin border-subtle rule. **Code Block** — Mono 14px, bg `#fffafc` softer cream-pink, radius `8px`, padding `16px 20px`, border `#00000010`. Inline code: same font, bg `rgba(101, 26, 57, 0.06)`, padding `2px 6px`, radius `4px`. **Tooltip** — bg `#26171d` wine-near-black, text `#ffffff`, radius `6px`, padding `8px 12px`, font `13px / Booton 500`. **Modal** — bg `#ffffff`, radius `16px`, shadow `rgba(101, 26, 57, 0.10) 0 24px 48px -16px`, max-width `560px`. Cream-pink backdrop overlay at 70% opacity. ### Easing Curves - `ease-standard`: `cubic-bezier(0.4, 0, 0.2, 1)` — Material-style; default for hover, focus, color transitions. - `ease-emphasized`: `cubic-bezier(0.2, 0, 0, 1)` — punchier exit; modal enter, hero reveal. - `ease-editorial`: `cubic-bezier(0.32, 0.72, 0, 1)` — slow-out, fast-settle; used on page transitions and editorial reveals. ### Duration Buckets - **Fast (120ms)** — colour transitions, focus rings, link hovers. - **Standard (220ms)** — button hover, card hover, dropdown reveal. - **Slow (320ms)** — modal enter/exit, page section fade-in. - **Page (440ms)** — route transitions, hero reveal sequences. ### Per-Component Micro-States - **Button hover (wine pill)**: bg `#651a39` → `#4a1129`; transition `220ms ease-standard`. No lift, no scale. - **Button hover (outlined)**: bg transparent → `#fde2eb` soft-pink wash. - **Card hover**: border deepens from `#00000010` to `#0000001a`; gentle wine-tinted shadow appears. - **Link hover**: colour `#651a39` → `#4a1129` over 120ms; underline thickens 1px → 2px. - **Input focus**: 2px wine ring fades in over 120ms; border darkens to wine. - **Pink-shell screenshot hover**: gentle 1px lift + shadow intensification; transition `320ms ease-editorial`. ### Page Transitions Editorial reveal: hero text fades in over 440ms with 24px translate-up; below-fold sections use `IntersectionObserver` to fade in at 80% viewport, 320ms duration, no translate. Product walkthroughs use scroll-pinned reveals where each red-orange H3 dingbat fades in with the section's first paragraph. ### Reduced Motion `@media (prefers-reduced-motion: reduce)` — all transitions become opacity-only, durations halved. Translate animations, scale-ins, and scroll-pinned reveals are disabled entirely; sections snap to final state. ### Contrast Pairs - **`#1a1a1a` text on `#fff7fa` bg**: 16.2:1 — AAA at all sizes. - **`#7a6770` text on `#fff7fa` bg**: 5.4:1 — AA at body sizes. - **`#a8949c` text on `#fff7fa` bg**: 3.0:1 — AA only at large sizes (≥18px or ≥14px bold). Used for eyebrows and helper. - **`#ffffff` text on `#651a39` wine button**: 10.5:1 — AAA. - **`#651a39` text on `#fde2eb` soft-pink chip**: 9.4:1 — AAA. - **`#f73b3b` red dingbat on `#fff7fa` bg**: 4.6:1 — AA at large sizes (≥18px); the H3 dingbat sits at 18px so it's contrast-safe. ### Focus Indicators - Default focus ring: `0 0 0 2px #651a39` wine with 2px offset on cream-pink pages. - On dark surfaces (rare): `0 0 0 2px #fff7fa` cream-pink. - All interactive surfaces must have a visible focus state — no `outline: none` without a replacement. ### ARIA Patterns - **Navigation**: `