--- version: alpha name: "Mintlify" description: "Mintlify's site is a study in restraint — a pure-white `#ffffff` canvas, near-black `#08090a` text (the same hex Linear uses), Inter at weight 600 with a tight `-0.02em` tracking, and a single mint-green `#0c8c5e` accent. The CTA pattern is a black pill with white text — Linear-style inversion in light mode. Where most docs-platform marketing sites lean on rainbow gradients or illustrated mascots to look \"friendly,\" Mintlify refuses the entire vocabulary. The single mint-green accent does all the brand work — used sparingly (link color, accent dots, never CTA fills), it compounds. Warm-neutral grays for surfaces (`#f9f8f7`, `#e6e5e3`) keep the pure white from feeling sterile, while the 16.7M-pixel border-radius on buttons (effectively pill-9999) follows the Linear/Vercel convention. The whole system reads as documentation that happens to sell something — calm, structured, type-led, single-accent confidence. The mint hue is lab-defined as L=51.3, a=-41.6, b=15.4 — a forest-leaning mint that signals trust without joining the SaaS-green crowd." colors: bg: "#ffffff" bg-secondary: "#f9f8f7" bg-tertiary: "#f4f2ef" surface: "#ffffff" surface-elev: "#fafaf9" text: "#08090a" text-strong: "#000000" text-medium: "#3a3b3c" text-soft: "rgba(8, 9, 10, 0.6)" text-faint: "rgba(8, 9, 10, 0.45)" text-muted: "rgba(8, 9, 10, 0.3)" brand: "#0c8c5e" brand-bright: "#10a370" brand-deep: "#085f3f" brand-soft: "#e6f4ed" brand-tint: "#c5e6d5" on-brand: "#ffffff" cta-bg: "#08090a" cta-text: "#ffffff" link: "#0c8c5e" link-hover: "#085f3f" selected-bg: "#f9f8f7" disabled: "rgba(8, 9, 10, 0.3)" border: "rgba(8, 9, 10, 0.07)" border-strong: "rgba(8, 9, 10, 0.14)" border-subtle: "rgba(8, 9, 10, 0.04)" border-brand: "rgba(12, 140, 94, 0.30)" success-bg: "#e6f4ed" success-text: "#085f3f" warning-bg: "#fef4e6" warning-text: "#7a4a00" danger-bg: "#fdeeee" danger-text: "#a82020" info-bg: "#eef4fd" info-text: "#1a3a7a" typography: display: fontFamily: "Inter" fontSize: "64px" lineHeight: 1.5 letterSpacing: "-0.025em" body: fontFamily: "Inter" fontSize: "16px" lineHeight: 1.5 mono: fontFamily: "JetBrains Mono" rounded: button: "8px" card: "12px" pill: "9999px" spacing: xs: "1px" sm: "2px" md: "6px" lg: "16px" xl: "24px" --- ## Overview ## Overview Mintlify's marketing site is a study in restraint — a pure-white `#ffffff` canvas, near-black `#08090a` text (the same hex Linear uses, no coincidence — it's the "warmest possible black" calibration), Inter at weight 600 with a tight `-0.02em` tracking, and a single mint-green `#0c8c5e` accent doing all the brand work. The hero "The Intelligent Knowledge Platform" runs at 47.4px — generously sized, but the pure-white ambient space lets it breathe rather than dominate. CTAs flip to the now-canonical "near-black pill on light canvas" pattern (Linear, Vercel, and now Mintlify all converge on this), and the mint accent is reserved for link colour, accent dots, the brand wordmark — never a CTA fill. What makes this design distinctive vs. nearby alternatives: most docs-platform marketing sites lean on rainbow gradients or illustrated mascots to look "friendly." Mintlify refuses the entire vocabulary. The single mint-green accent does all the brand work — and because it's used sparingly, it compounds. The warm-neutral grays for surfaces (`#f9f8f7`, `#f4f2ef`) keep the pure-white from feeling sterile; they lean ever-so-slightly warm, the way Vercel's surfaces lean cool. Both choices are deliberate temperature signals — Mintlify reads as approachable-warm-confident rather than icy-tech-confident. The third register is the **content-density-as-design-language** approach: Mintlify, being a documentation platform, ships marketing pages whose information density mirrors the documentation it sells. Code blocks, capability rails, capability comparison tables — all rendered with the same hairline-border + warm-neutral-bg + Inter-at-weight-500 register that defines well-built developer documentation. The marketing site looks like a sample chapter of the product. That conceit is the deepest brand signal: Mintlify's value proposition (documentation that respects developers) is performed at the marketing layer. Atmospheric vocabulary that captures the feeling: *pure-white-broadsheet, mint-restraint, near-black-pill, warm-neutral-surfaces, type-led, hairline-bordered, documentation-as-marketing, calm-confident, Linear-adjacent, Vercel-cousin, single-accent-discipline.* Every surface lands like it was designed by an engineer who reads The New York Times type-of-times column and respects the reader's attention. **Key Characteristics** - Pure white `#ffffff` canvas — never warm, never off-white - Near-black `#08090a` text — the Linear hex, the warmest possible black - Inter at weight 600 with `-0.02em` tracking — the Vercel/Linear marketing convention - Single mint-green `#0c8c5e` accent — used as link, dot, wordmark; never CTA fill - Near-black pill CTAs — full 9999px radius, white label, Linear-style inversion - Warm-neutral surface grays (`#f9f8f7`, `#f4f2ef`) — soften the pure white - Hairline borders at 7% black — flat depth language, no drop shadows - Documentation-density chrome — code blocks, hairline tables, tight type ladder - Self-hosted Inter Variable — pragmatic FOUT/FOIT engineering - 96–128px section gutters — generous magazine-pace spacing - Pill geometry on actions, 12px radius on cards — two-tier shape system - Mint-on-mint subtle backgrounds (`#e6f4ed`) for success / brand emphasis ## Colors ### Primary - **bg** `#ffffff` — pure white page canvas. The defining ground; never substituted with off-white or cream. - **text** `#08090a` — near-black (Linear's hex). Warmer than `#000` so type doesn't feel surgical against the white. - **bg-secondary** `#f9f8f7` — warm-neutral subtle bg for inset cards and section grounds. - **bg-tertiary** `#f4f2ef` — slightly deeper warm-neutral for emphasis blocks. - **cta-bg** `#08090a` — primary CTA inverts the canvas exactly (near-black on white). - **cta-text** `#ffffff` — white label on near-black pill. ### Brand & Accent - **brand** `#0c8c5e` — forest-leaning mint-green; the single brand accent. Lab-defined L=51.3, a=-41.6, b=15.4 — leans warm and forest-grounded rather than clinical. - **brand-bright** `#10a370` — hover-brightened mint for link-hover states. - **brand-deep** `#085f3f` — pressed-state mint, also used as success-text on light grounds. - **brand-soft** `#e6f4ed` — mint wash for success backgrounds and emphasis modules. - **brand-tint** `#c5e6d5` — mint tint for chips and decorative dots. ### Interactive - **link** `#0c8c5e` — mint link in body copy, often without underline (relies on colour alone for differentiation). - **link-hover** `#085f3f` — deeper mint on hover; the only chromatic transition. - **selected-bg** `#f9f8f7` — warm-neutral selected state for nav and sidebar. - **disabled** `rgba(8, 9, 10, 0.3)` — disabled control text. ### Neutral Scale - **near-black** `#08090a` — primary text and headlines. - **slate-medium** `#3a3b3c` — secondary heading colour. - **slate-soft** `rgba(8, 9, 10, 0.6)` — supporting copy at 60% opacity. - **slate-faint** `rgba(8, 9, 10, 0.45)` — eyebrows, helper text. - **slate-muted** `rgba(8, 9, 10, 0.3)` — disabled microcopy. The choice to use opacity-based slate scales rather than fixed hex values is deliberate: it lets the same text colour adapt to surface tint (the same `0.6` on white reads slightly cooler than on `#f9f8f7`, which is the right behaviour for warm-neutral surface tinting). ### Surface & Borders - **surface-0 (page)** `#ffffff` pure white. - **surface-1 (panel)** `#f9f8f7` warm-neutral. - **surface-2 (emphasis)** `#f4f2ef` deeper warm-neutral. - **border** `rgba(8, 9, 10, 0.07)` — default hairline (notably lighter than Vercel's 0.10). - **border-strong** `rgba(8, 9, 10, 0.14)` — outlined buttons, dividers. - **border-subtle** `rgba(8, 9, 10, 0.04)` — quietest separation. - **border-brand** `rgba(12, 140, 94, 0.30)` — mint-tinted rule for brand emphasis. ### Shadow Colors Mintlify shadows are **almost absent**. Cards use a 1px border at 7% black plus the warm-neutral subtle-bg `#f9f8f7` for elevation. Floating UI primitives (popovers, the docs-search widget) introduce a soft 4-stack shadow tinted with low-opacity slate (`rgba(8, 9, 10, 0.06)` to `0.10`), but hero and section cards stay flat. The brand reads as paper-thin, not stacked-layered — a deliberate signal that the docs platform respects the reader's screen real estate. ### Semantic - **success** — bg `#e6f4ed` (mint wash), text `#085f3f` (deep mint), border `rgba(12, 140, 94, 0.30)`. Note: success is *the brand color*, not a separate green-500. - **warning** — bg `#fef4e6` (warm-amber wash), text `#7a4a00`, border `rgba(122, 74, 0, 0.25)`. - **danger** — bg `#fdeeee` (soft-red wash), text `#a82020`, border `rgba(168, 32, 32, 0.30)`. - **info** — bg `#eef4fd` (soft-blue wash), text `#1a3a7a`, border `rgba(26, 58, 122, 0.25)`. The unusual choice: success colour is *the same* mint as the brand. This reinforces the single-accent discipline — Mintlify never breaks into a separate semantic-green ladder. ## Typography ### Font Family - **Display & Body**: `Inter, "Inter Fallback", -apple-system, system-ui, sans-serif` — Rasmus Andersson's Inter Variable, self-hosted (not Google Fonts). Used at 400 / 500 / 600 / 700 across the entire surface. - **Mono**: `ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace` — pragmatic system mono fallback chain. Mintlify does not license a proprietary mono. - **OpenType features**: `ss01` (alternate single-storey `a`), `ss02` (alternate dotted `0`), `cv11` (alternate `g`) for Inter display sizes; `liga` and `kern` always on; `tnum` and `zero` enabled in mono for code tabular alignment. - **"Inter Fallback"** is the loading-state shim that ships with self-hosted Inter Variable to prevent FOUT — a deliberate engineering signal. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | Display Hero | Inter | 64px | 600 | 1.05 | -0.025em | ss01 liga | Homepage hero ceiling | | Display | Inter | 56px | 600 | 1.08 | -0.02em | ss01 | Section intro at scale | | H1 | Inter | 48px | 600 | 1.15 | -0.02em | liga | Page title — the canonical Mintlify hero | | H2 | Inter | 40px | 600 | 1.10 | -0.02em | liga | Major section | | H3 | Inter | 28px | 600 | 1.25 | -0.015em | — | Sub-section | | H4 | Inter | 22px | 600 | 1.30 | -0.01em | — | Card heading | | H5 | Inter | 18px | 600 | 1.40 | normal | — | Inline emphasis | | Eyebrow | Inter | 12px | 500 | 1.40 | 0.06em | uppercase | Section pre-label | | Body Large | Inter | 18px | 400 | 1.55 | normal | — | Lede paragraph | | Body | Inter | 16px | 400 | 1.50 | normal | — | Default paragraph copy | | Body Small | Inter | 14px | 400 | 1.50 | normal | — | Captions, sidebars | | Caption | Inter | 13px | 400 | 1.40 | normal | — | Image captions | | Caption Tabular | Mono | 12px | 500 | 1.40 | normal | tnum | Stats, data labels | | Label | Mono | 11px | 500 | 1.30 | uppercase | — | UI labels, mono caps | | Button | Inter | 15px | 500 | 1.00 | normal | — | CTA copy | | Pull Quote | Inter | 24px | 500 | 1.35 | -0.01em | — | Editorial pull-quote | | Code | Mono | 14px | 400 | 1.55 | normal | — | Inline + block | | Code Micro | Mono | 12px | 400 | 1.40 | normal | — | Footnote refs | ### Principles - **Inter at weight 600 with `-0.02em` tracking** is the Mintlify hero setting. The exact same setting works for Vercel — calibrated for marketing-page legibility on light canvas. - **Single family discipline.** Inter handles display, body, navigation, captions. Mono falls back to system. Adding a serif breaks the system; Mintlify deliberately avoids the Notion-style sans+serif duet. - **Negative tracking compresses with size.** `-0.025em` at 56–64px, `-0.02em` at 40–48px, `-0.015em` at 28px, `-0.01em` at 22px, normal at 18px and below. - **Weight 600 only for display.** Headlines hit 600; body holds at 400; UI labels at 500. The brand never uses 700 — that would feel shouty against the calm canvas. - **OpenType discipline**: `ss01` (alternate `a`), `ss02` (alternate `0`), `cv11` (alternate `g`) enabled at display sizes for the slightly-more-humanist-feeling Inter cut. `tnum` and `zero` in mono for code blocks. - **Sentence case for headlines.** Mintlify writes "The intelligent knowledge platform" not "The Intelligent Knowledge Platform" — a developer-doc convention that keeps the page approachable. - **Body width capped at 720px** even when the page is 1280px wide — readability column. - **Self-hosted Inter Variable.** Mintlify does not load Google Fonts; the "Inter Fallback" shim is a deliberate FOUT-prevention engineering signal that aligns with the brand's "respects developer experience" pitch. ## Layout ### Spacing System - **Base unit**: 4px. - **Scale**: 4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128, 160 — Fibonacci-adjacent. - **Density observation**: Mintlify is *generously spaced* by SaaS standards. Headlines float in 96–128px of margin; body paragraphs sit on 24px line gaps; sections separate at 96–128px. ### Grid & Container - **Page max width**: `1280px` — standard B2B SaaS width. - **Site gutter**: `clamp(24px, 5vw, 64px)` — accommodating across viewports. - **Grid**: 12 columns with 24px gutters. Hero blocks span full width; capability rails span 4 columns; sidebars span 3. - **Hero treatment**: full-bleed white, 47–48px headline, body confined to a 720px column anchored left of centre. ### Whitespace Philosophy The whitespace *is* the brand asset. Mintlify deliberately under-fills pages so headlines have room to breathe. The visual density is closer to a research-tech blog than a SaaS landing — and that's the point. Section gutters run **96–128px** between major editorial blocks; minor blocks sit on 64–80px gaps; intra-section spacing uses 24–48px. ### Section Cadence - Hero (pure white) → Capability Rail (white card grid on white, hairline-bordered) → Code Tour (warm-neutral inset block) → Integrations (white cards with mint-dot accents) → Testimonials (mint-soft card) → Pricing (white card grid) → Footer (warm-neutral ground). - The mint-soft block appears once or twice per page as chromatic punctuation; never spreads to the chrome. - Cream-on-cream sections separated by 1px border-subtle hairlines or by spacing alone. ### Breakpoints | Name | Width | Use | |---|---|---| | Mobile | < 640px | Single column, full-bleed sections, 32px H1 | | Tablet | 640–1024px | 2-column rails, 40px H1 | | Desktop | 1024–1280px | Full 12-col grid, 48px H1, 720px 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). - Pill buttons: 40px minimum height on desktop, 44px on mobile (10px 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. Doc-search shortcut visible at all sizes. - **Hero**: 64px display → 48px H1 → 40px → 32px across desktop/tablet/mobile. - **Capability grid**: 4-up at desktop, 2-up at tablet, 1-up at mobile. - **Body width**: 720px → fluid 90vw at mobile. - **Section spacing**: 128px → 96px → 64px across sizes. - **Code blocks**: horizontal scroll on mobile, never wrap. ### Image Behavior - Capability illustrations use `srcset` with 1x/2x/3x. - Browser-screenshot imagery uses `aspect-ratio` to prevent layout shift. - Lazy-loading on below-fold images; eager on hero. - Mint accent dots are CSS shapes (no images) so they render instantly. ### Container Queries Used inside capability cards to switch icon position when card width crosses 280px (icon-left vs. icon-top). Used inside code-tour blocks to switch from side-by-side to stacked layout. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | 0 | Flat — no shadow | Default page surface, hero, body sections | | 1 | Hairline + warm-bg | Cards (border + warm-neutral fill alternative) | | 2 | `rgba(8, 9, 10, 0.04) 0 1px 3px` | Sticky nav | | 3 | `rgba(8, 9, 10, 0.06) 0 4px 12px` | Hover-lifted cards | | 4 | `rgba(8, 9, 10, 0.08) 0 12px 32px -8px` | Overlay menus, popovers | | 5 | `rgba(8, 9, 10, 0.10) 0 16px 40px -16px` | Modals, doc-search widget | ### Shadow Philosophy Mintlify's depth is **almost absent**. Cards lift off white by hairline border alone (`rgba(8, 9, 10, 0.07)`) — no shadow, no fill change. When shadows do appear (modals, popovers, doc-search), they're tinted with low-opacity slate-dark, never neutral grey, and never blue-tinted. The brand reads as flat, type-led, paper-thin — the same reason heavy drop-shadows would feel wrong: the docs-platform pitch is "respect the reader's screen," and a heavily layered hero would betray it. ## Shapes | Tier | Value | Use | |---|---|---| | Micro | 2px | Decorative dividers, inline chip corners | | Standard (sm) | 6px | Compact pills, code-block corners (when not 8) | | Comfortable (md) | 8px | Inputs, dropdowns, modal action buttons | | Relaxed (lg) | 12px | Cards, callouts — the dominant `--radius--card` | | Featured (xl) | 16px | Modals, popover containers, doc-search widget | | Pill | 9999px | Buttons (primary, secondary, mint), status pills | Mintlify's signature shape is the **full pill** on actions (`9999px`) paired with the **12px card**. The pill geometry mirrors Linear's keyboard-shortcut chips and Vercel's hero CTA pattern — all three converge on pills as the primary action shape. There are no zero-radius surfaces except editorial section dividers (1px hairlines). ## Components ### Buttons **Primary (Near-Black Pill)** - Background: `#08090a`. Text: `#ffffff`, Inter 500 / 15px. - Padding: `10px 20px`. Radius: `9999px` (full pill). No border. - Hover: bg → `#1a1c1e`; transition `200ms ease-standard`. - Active: bg → `#000000` (rare absolute-black for the pressed beat). - Use: Primary CTA — *Get started, Book a demo, Sign up free.* **Secondary (Outlined Pill)** - Background: transparent. Text: `#08090a`. Border: `1px solid rgba(8, 9, 10, 0.14)`. Radius: `9999px`. - Same padding (10×20), font (Inter 500 / 15px) as primary. - Hover: bg → `rgba(8, 9, 10, 0.04)`. - Use: Twin to primary — *Watch the demo, Read the docs.* **Mint (Brand Stamp)** - Background: `#0c8c5e`. Text: `#ffffff`. No border. Pill radius. - Same shape as primary. - Hover: bg → `#10a370`. Active: `#085f3f`. - Use: Reserved for one beat per page — wordmark stamp, hero accent CTA. Rare; the near-black pill is the default. **Ghost (Quiet)** - Background: transparent. Text: `#08090a`. No border. - Padding: `8px 16px`. Inter 500 / 15px. - Hover: text → `#0c8c5e` mint. - Use: Nav links, footer secondary actions, repeated CTAs in long pages. ### Cards **Default Card (Flat)** - Background: `#ffffff`. Border: `1px solid rgba(8, 9, 10, 0.07)`. Radius: `12px`. Padding: `24px`. - Shadow: none. - Hover: border → `rgba(8, 9, 10, 0.14)`; transition `200ms`. - Use: Feature tile, capability rail, pricing card. **Warm Inset Card** - Background: `#f9f8f7` warm-neutral. Border: `1px solid rgba(8, 9, 10, 0.07)`. Radius: `12px`. Padding: `32px`. - Use: Testimonial block, code-tour container, integration callout. **Mint-Soft Card** - Background: `#e6f4ed` mint wash. Border: none. Radius: `12px`. Padding: `24px`. - Use: Success callout, brand-emphasis module, "what's new" highlight. ### Badges, Tags, Pills **Eyebrow Label** — no chrome, just type. Inter 500 / 12px / uppercase / 0.06em tracking, colour `rgba(8, 9, 10, 0.6)`. Sits above section headlines. **Mint Pill** — bg `#e6f4ed`, text `#085f3f`, radius `9999px`, padding `4px 10px`. Status / NEW / BETA labels. **Inline Tag** — bg `#f9f8f7`, text `#08090a`, border `1px solid rgba(8, 9, 10, 0.07)`, radius `4px`, padding `4px 8px`. Capability chip in feature lists. ### Inputs / Forms - Background: `#ffffff`. Border: `1px solid rgba(8, 9, 10, 0.14)`. Radius: `8px`. Padding: `10px 14px`. - Font: Inter 400 / 15px. Placeholder: `rgba(8, 9, 10, 0.45)`. - Focus: `0 0 0 2px #0c8c5e` mint ring, border → `#08090a`. - Error: border → `#a82020`, ring → `rgba(168, 32, 32, 0.30)`. - Helper: caption 13px slate-soft below. ### Navigation - Header height `64px`. Background `#ffffff` (becomes `rgba(255,255,255,0.85)` blur on scroll). - Logo: Mintlify wordmark, near-black with mint accent dot. - Nav links: Inter 500 / 14px, colour `#08090a`, padding `8px 12px`. Hover → `#0c8c5e` mint. - Right-side CTA pair: ghost "Sign in" + primary near-black pill "Get started". - Mobile: full-screen sheet, links stack at 22px / Inter 500. ### Optional Components **Pull Quote** — Inter 24px / 500 / -0.01em tracking, slate-medium `#3a3b3c` text, with a 4px mint vertical rule on the left edge. **Footnote** — Inter 13px / 400, slate-soft; sits on a thin border-subtle rule. **Code Block** — Mono 14px, bg `#f9f8f7` warm-neutral, radius `8px`, padding `16px 20px`, border `rgba(8, 9, 10, 0.07)`. Inline code: same font, bg `rgba(8, 9, 10, 0.06)`, padding `2px 6px`, radius `4px`. Syntax highlighting uses muted near-black + mint + warm-amber tokens (no neon). **Tooltip** — bg `#08090a`, text `#ffffff`, radius `6px`, padding `8px 12px`, font `13px / Inter 500`. **Modal** — bg `#ffffff`, radius `16px`, shadow `rgba(8, 9, 10, 0.10) 0 16px 40px -16px`, max-width `560px`. White backdrop overlay at 50% opacity (with subtle blur). **Doc-Search Widget** — popover with full 8-stack shadow, 12px radius, 24px padding, Inter 14px result list, mint-tinted hover row. The most-shadowed component in the system. ### 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; used on modal enter, hero reveal. - `ease-out`: `cubic-bezier(0.0, 0, 0.2, 1)` — gentle settle; used on dropdown reveal, doc-search opening. ### Duration Buckets - **Fast (100ms)** — colour transitions, focus rings, link hovers. - **Standard (200ms)** — button hover, card hover, dropdown reveal. - **Slow (300ms)** — modal enter/exit, page section fade-in. - **Page (400ms)** — route transitions, hero reveal sequences. ### Per-Component Micro-States - **Button hover (near-black pill)**: bg `#08090a` → `#1a1c1e`; transition `200ms ease-standard`. No lift, no scale. - **Button hover (outlined)**: bg transparent → `rgba(8, 9, 10, 0.04)`. - **Card hover**: border deepens from `rgba(8, 9, 10, 0.07)` to `rgba(8, 9, 10, 0.14)`; no shadow change. - **Link hover**: colour `#0c8c5e` → `#085f3f` over 100ms. - **Input focus**: 2px mint ring fades in over 100ms; border darkens. - **Doc-search reveal**: popover scales from 0.97 to 1.0 with opacity 0 to 1 over 200ms ease-out. ### Page Transitions Hero text fades in over 400ms with 16px translate-up; below-fold sections use `IntersectionObserver` to fade in at 80% viewport, 300ms duration, no translate. The brand does not use scroll-pinned animations — every section is independently navigable. ### Reduced Motion `@media (prefers-reduced-motion: reduce)` — all transitions become opacity-only, durations halved. Translate animations are disabled entirely; scroll-linked reveals snap to final state. The doc-search popover scale animation is replaced with a pure fade. ### Contrast Pairs - **`#08090a` text on `#ffffff` bg**: 19.5:1 — AAA at all sizes. - **`rgba(8, 9, 10, 0.6)` text on `#ffffff` bg**: 8.4:1 — AAA at body sizes. - **`rgba(8, 9, 10, 0.45)` text on `#ffffff` bg**: 5.6:1 — AAA at body sizes. - **`#ffffff` text on `#08090a` button**: 19.5:1 — AAA. - **`#ffffff` text on `#0c8c5e` mint button**: 4.6:1 — AA at body sizes; safe for buttons. - **`#085f3f` text on `#e6f4ed` mint chip**: 7.8:1 — AAA. ### Focus Indicators - Default focus ring: `0 0 0 2px #0c8c5e` mint with 2px offset on white pages. - On near-black surfaces (rare): `0 0 0 2px #ffffff`. - All interactive surfaces must have a visible focus state — no `outline: none` without a replacement. ### ARIA Patterns - **Navigation**: `