--- version: alpha name: "Kagi" description: "Kagi's site argues for paid search by looking nothing like a search engine. The canvas is a warm cream `#fffbf5`, the brand colour is a sun-baked orange `#ffb87a`, the body is set in IBM Plex Sans, and pull-quotes drop into IBM Plex Serif — a typographic pairing that reads more like a small magazine than a product page. Where Google argues for \"free\" with a clinical white sans-only interface, Kagi argues for \"paid\" with an editorial warm-cream layout and serif pull-quotes. The visual logic is: *you're paying for this, so it should look like something worth paying for*. Pill CTAs are fully rounded with dark text on warm orange — never white-on-orange — preserving the paper-and-ink feel. The result is a brand that reads as Are.na meets Readwise meets a thoughtful magazine cover, an aesthetic posture deliberately positioned against ad-funded utility search." colors: bg: "#fffbf5" bg-soft: "#fff6e8" surface: "#fbf2e2" surface-strong: "#f4e8ce" surface-hover: "#fff0d8" surface-elevated: "#fffefa" text: "#2b2417" text-strong: "#1c170d" text-medium: "#3a3120" text-muted: "#6b5d47" text-soft: "#8a7a5e" text-faint: "#a99a7d" on-brand: "#1c170d" on-cta: "#1c170d" brand: "#ffb87a" brand-hover: "#f3a45f" brand-active: "#e89348" brand-deep: "#c97a3b" brand-soft: "#ffe5c8" brand-faint: "#fff4e3" brand-glow: "rgba(255, 184, 122, 0.32)" accent: "#7d6ce0" accent-hover: "#6b5acc" accent-soft: "#e8e3ff" link: "#c97a3b" link-hover: "#a55d24" selected-bg: "#fbf2e2" disabled-bg: "#f4e8ce" disabled-text: "#a99a7d" border: "rgba(0, 0, 0, 0.10)" border-strong: "rgba(0, 0, 0, 0.18)" border-soft: "rgba(0, 0, 0, 0.08)" border-warm: "rgba(201, 122, 59, 0.20)" border-focus: "#c97a3b" success-bg: "#e0ebd0" success-text: "#3d5a47" warning-bg: "#fde8c7" warning-text: "#7a5e1f" danger-bg: "#f7d8d2" danger-text: "#8a3a3a" info-bg: "#e8e3ff" info-text: "#3a3a6a" typography: display: fontFamily: "IBM Plex Sans" fontSize: "80px" lineHeight: 1.55 letterSpacing: "-0.025em" body: fontFamily: "IBM Plex Sans" fontSize: "17px" lineHeight: 1.55 mono: fontFamily: "IBM Plex Mono" rounded: button: "8px" card: "16px" pill: "9999px" spacing: xs: "1px" sm: "2px" md: "6px" lg: "16px" xl: "24px" --- ## Overview ## Overview Kagi's marketing site is **a manifesto against ad-funded search dressed as a small magazine**. The canvas is a warm cream `#fffbf5` — not white, not beige, but the colour of unbleached book stock — and every other surface tones up or down from there in a single warm-neutral ladder. The brand colour is a sun-baked orange `#ffb87a` that appears almost exclusively on pill-shaped CTAs, and IBM Plex Sans + Plex Serif carry the entire typographic load. Where Google argues for "free" with a clinical white sans-only interface, Kagi argues for "paid" with an editorial warm-cream layout and serif pull-quotes. The visual logic is: *you're paying for this, so it should look like something worth paying for*. Every chromatic decision reinforces that posture — warm cream over bleached white, sun-baked orange over corporate blue, hand-set Plex Serif italic for pull-quotes, fully-rounded pill CTAs (not the modern 8–12px square-rounded default). The most consequential decision is **dark text on warm orange**. Where every modern SaaS pairs white text with a coloured CTA, Kagi insists on `#1c170d` warm-black on `#ffb87a` orange — never white. This single typographic-meets-chromatic rule preserves the paper-and-ink feel: the page reads as ink-on-paper rather than chrome-on-glow. The reverse pairing (white on orange) is doctrinally rejected — see §14. The Plex pairing is the typographic argument. IBM Plex Sans for UI body and headlines (a designed-by-IBM open-source family with a slightly architectural feel), IBM Plex Serif for editorial moments — pull-quotes, taglines, longform intros — and IBM Plex Mono for the rare code block or eyebrow tag. Three faces from one designer, one foundry, one type system. The completeness of the Plex trifecta is what gives Kagi its single typographic identity rather than the usual three-foundry collage. Atmospheric vocabulary: *warm-cream-canvas, sun-baked-orange, Plex-Sans-Plex-Serif-pairing, pill-CTA-with-dark-text, editorial-magazine, paper-and-ink, indie-publication, paid-search-as-craft-object, Are.na-cousin, Readwise-cousin, anti-ad-funded-utility.* **Key Characteristics** - Warm cream `#fffbf5` canvas — the colour of unbleached book stock - Sun-baked orange `#ffb87a` reserved for pill CTAs only - **Dark text on orange** (`#1c170d`) — never white - IBM Plex Sans + Plex Serif typographic pairing - Plex Serif italic pull-quotes — the editorial differentiator - Fully-rounded pill CTAs (radius 9999) — Kagi never squares the buttons - 16px card radius on warm-cream panels - 10% black hairlines instead of coloured borders - Tonal layering for depth — `#fffbf5 → #fff6e8 → #fbf2e2 → #f4e8ce` - Plex Mono eyebrow tags — the "specifications" feel - Lavender `#7d6ce0` rare illustration accent — never a CTA fill - Magazine-paced rhythm (96–160px section gutters) ## Colors ### Primary - **bg** `#fffbf5` — warm cream canvas; the page's defining surface, never substituted for `#ffffff`. - **text** `#2b2417` — near-black with warm cast; body default. - **bg-soft** `#fff6e8` — secondary cream stripe for alternating sections. - **surface** `#fbf2e2` — card / panel base, half-step warmer than bg. - **text-strong** `#1c170d` — display copy, deepest warm-black; also the on-brand label colour. ### Brand & Accent (orange + lavender) - **brand** `#ffb87a` — signature sun-baked orange; pill CTAs, hover-link underline. - **brand-hover** `#f3a45f` — pressed pill state. - **brand-active** `#e89348` — deeply pressed. - **brand-deep** `#c97a3b` — accent text on light surfaces; inline link colour. - **brand-soft** `#ffe5c8` — tonal pill background, status indicators. - **brand-faint** `#fff4e3` — quietest orange tint, rare promotional band. - **accent** `#7d6ce0` — lavender used sparingly in secondary marketing modules and illustrations only — **never on a CTA**. - **accent-soft** `#e8e3ff` — lavender illustration tint. ### Interactive - **link** `#c97a3b` — deep brand-orange; underlined. - **link-hover** `#a55d24` — darker pressed. - **selected-bg** `#fbf2e2` — selected nav, selected row. - **disabled-bg** `#f4e8ce` — disabled control fill. - **disabled-text** `#a99a7d` — disabled label, warm grey. - **focus-ring** `#c97a3b` — 2px solid deep-brand with 2px cream offset. ### Neutral Scale (warm grayscale) - **warm-black** `#1c170d` — display copy, deepest. - **warm-text** `#2b2417` — body default. - **warm-medium** `#3a3120` — secondary heading. - **warm-muted** `#6b5d47` — captions, metadata in warm grey. - **warm-soft** `#8a7a5e` — supporting copy. - **warm-faint** `#a99a7d` — helper, microcopy. - **warm-line** `#d4c8b0` — strong divider rule. ### Surface & Borders - **surface-0 (page)** — `#fffbf5` warm cream. - **surface-1 (panel)** — `#fff6e8` cream stripe. - **surface-2 (card)** — `#fbf2e2` warm card base. - **surface-3 (hover)** — `#f4e8ce` deeper warm. - **surface-elevated (rare)** — `#fffefa` near-white-cream. - **border** `rgba(0, 0, 0, 0.10)` — 10% black hairline (default). - **border-strong** `rgba(0, 0, 0, 0.18)` — emphasized rule. - **border-soft** `rgba(0, 0, 0, 0.08)` — quietest division. - **border-warm** `rgba(201, 122, 59, 0.20)` — rare brand-tinted hairline (used on the orange pull-quote bar). ### Shadow Colors Kagi uses **warm-brown tinted** shadows at very low opacity. The marketing surface uses tonal layering for 95% of depth — `#fffbf5 → #fff6e8 → #fbf2e2 → #f4e8ce` — and a single 10% black hairline. When a real shadow is needed, it's `rgba(43, 36, 23, ...)` (the warm-text RGB) at 0.04–0.18 opacity. The rare `warm` shadow uses the brand-orange RGB for an accent glow under hero illustrations. ### Semantic - **success** — `#e0ebd0` / `#3d5a47`. Warm-cactus green, not Tailwind-default. - **warning** — `#fde8c7` / `#7a5e1f`. Cream-warning, sits adjacent to brand. - **danger** — `#f7d8d2` / `#8a3a3a`. Warm coral, never pure red. - **info** — `#e8e3ff` / `#3a3a6a`. Lavender pair — the only place lavender appears in chrome. The semantic palette is **all desaturated warm tones**, never Tailwind-default (which would be too saturated against the cream canvas). ## Typography ### Font Family - **Display & Body**: **IBM Plex Sans** at weights 400 / 500 / 600 / 700. Plex Sans is a designed-by-IBM open-source family with a slightly architectural feel — slightly more contrast than Inter, slightly more warmth than Söhne. It's what gives Kagi the "considered" rather than "generic SaaS" cadence. Fallback: `-apple-system → system-ui → Segoe UI → Helvetica → Arial → sans-serif`. - **Editorial Serif**: **IBM Plex Serif** at weights 400 / 500 / 600. Used exclusively for pull-quotes, taglines, and rare longform intros. Italic is the dominant style. Fallback: `Georgia → Times New Roman → serif`. - **Mono**: **IBM Plex Mono** at weights 400 / 500. Used for eyebrow tags, code blocks, and the rare specification badge. Fallback: `Menlo → Consolas → monospace`. - **OpenType features**: `kern` always; `ss01` on display (cleaner alt-glyphs); `onum` (old-style figures) on body Plex Sans for editorial cadence; `tnum + zero` on Plex Mono for legible numerics. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | display-hero | Plex Sans | 80 | 600 | 1.02 | -0.025em | ss01 | Rare hero — annual report / manifesto pages | | display | Plex Sans | 64 | 600 | 1.05 | -0.02em | — | Section openers | | h1 | Plex Sans | 56 | 600 | 1.05 | -0.02em | — | Standard hero | | h2 | Plex Sans | 40 | 600 | 1.1 | -0.015em | — | Section heading | | h3 | Plex Sans | 24 | 600 | 1.25 | normal | — | Subsection | | h4 | Plex Sans | 20 | 600 | 1.3 | normal | — | Card heading | | h5 | Plex Sans | 18 | 500 | 1.35 | normal | — | Inline subheading | | eyebrow | Plex Mono | 12 | 500 | 1.4 | 0.06em | uppercase | Section label / tag — the spec-stamp | | body-large | Plex Sans | 19 | 400 | 1.55 | normal | onum | Lede | | body | Plex Sans | 17 | 400 | 1.55 | normal | onum | Default body — slightly larger than 16px web default | | body-small | Plex Sans | 15 | 400 | 1.5 | normal | — | Secondary copy | | caption | Plex Sans | 14 | 400 | 1.4 | normal | — | Helper, image caption | | caption-tabular | Plex Mono | 13 | 500 | 1.4 | normal | tnum | Spec-row data | | label | Plex Sans | 13 | 500 | 1.3 | normal | — | Form labels | | label-cta | Plex Sans | 15 | 600 | 1.2 | normal | — | Button text | | quote-pull | Plex Serif italic | 22 | 400 | 1.4 | normal | onum | Editorial pull-quote — the brand differentiator | | quote-large | Plex Serif italic | 32 | 500 | 1.3 | normal | onum | Hero-scale pull-quote | | code | Plex Mono | 14 | 400 | 1.55 | normal | tnum zero | Inline + block code | ### Principles - **Plex Sans + Plex Serif duet is the brand.** The Sans handles UI; the Serif handles editorial moments. Three Plex faces from one designer = single typographic identity. - **Body sized at 17px / 1.55 line-height.** Slightly larger than the 16px web default — designed for the long marketing essays Kagi publishes. - **Headlines compress at `-0.02em` to `-0.025em`.** Display only; body holds at normal tracking. - **Plex Serif italic for pull-quotes only.** Roman serif is rare; italic is the dominant register. - **Old-style figures (`onum`) on body.** Gives numerics the editorial, non-tabular cadence of well-set magazine prose. - **Plex Mono for eyebrow + code.** Eyebrow uppercase at 0.06em tracking — the "specifications" feel without being clinical. - **600 is the heading weight, never 700.** 700 is reserved for display-hero only. - **Modular scale of 1.25× from body 17px.** 17 → 21.25 → 26.6 → 33 → 41.5 → 52 → 65… simplified to 17/20/24/40/56/64/80 in practice. ## Layout ### Spacing System Base unit **4px**. Scale: `1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 48, 64, 80, 96, 128, 160`. Section padding regularly hits 96–160px between modules — magazine-paced rhythm. Card interiors are generous (24–32px) — paper-grade breathing room. ### Grid & Container - **Page max-width**: 1200px, centred, `clamp(24px, 5vw, 64px)` site gutter. - **Hero prose-width**: 720px max. - **Marketing prose-width**: 680px (~64 characters at Plex Sans 17px). - **Grid columns**: 12, 24px gutter — but used flexibly. Editorial layouts often run 2-up asymmetric (5/7) or 3-up symmetric. - **Section padding**: 96–160px between modules. ### Whitespace Philosophy Sections breathe. Vertical padding regularly hits 96–160px between modules; this is the magazine-paced rhythm rather than the dashboard-density of competitor sites. Within sections: 24–48px between groups. Type sizes step in stable 1.25× ratios from 17px body up through 24/32/40/56/80, mirroring an editorial modular scale. ### Section Cadence The page alternates **`#fffbf5` warm-cream**, **`#fff6e8` cream-stripe**, and (rarely) `#1c170d` warm-black bands. The dark band is for emphasis — pricing reveal, manifesto closing — not default rhythm. Most sections stay in the cream-on-cream register. ### Breakpoints | Name | Min-width | Notes | |---|---|---| | mobile | 0 | Single column, 24px gutter, hero at 36px | | tablet | 640px | 2-up feature grid, hero at 48px | | desktop | 1024px | 3-up grid, hero at 56px | | wide | 1280px | Full 12-column grid, hero at 64px | | max | 1440px | Container caps at 1200px, gutter expands | ### Touch targets All pill CTAs meet **44×44px minimum**. Primary pill at `12px 24px` padding renders ~44px tall. Plex Sans body at 17px is comfortable for touch reading. ### Collapsing strategy - **Hero** — single-column on mobile (copy → primary pill → secondary pill stacked). - **Feature grid** — 3-up desktop → 2-up tablet → 1-up mobile. - **Pricing tiers** — 3-up desktop → 1-up mobile (with horizontal scroll on tablet as fallback). - **Pull-quote** — full-width on mobile with reduced indent (16px instead of 32px). - **Top nav** — links collapse into a hamburger drawer at <1024px; primary pill stays visible. - **Testimonial card** — keeps Plex Serif italic at 22px on mobile (no shrink) but reduces padding to 24px. ### Image behaviour - Editorial illustrations use SVG with WebP raster fallback. - `loading="lazy"` below the fold. - `aspect-ratio` to prevent CLS. - Hero illustration centre-aligns and caps at 480px on mobile. ### Container queries Used on the testimonial card — at `@container (max-width: 480px)` the avatar moves from inline-with-attribution to above-the-quote. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | 0 (flat) | No shadow, no border | Page bg | | 1 (hairline) | `1px rgba(0, 0, 0, 0.10)` border | Default cards | | 2 (tonal) | `#fbf2e2` bg lift on `#fffbf5`, no shadow | Default card depth | | 3 (deeper tonal) | `#f4e8ce` bg on cream | Hover state, deepest tonal | | 4 (ambient) | `rgba(43, 36, 23, 0.06) 0 4px 12px` | Toast, light hover | | 5 (modal) | `rgba(43, 36, 23, 0.18) 0 24px 48px -12px` | Modal | | Special | `rgba(255, 184, 122, 0.20) 0 16px 40px -16px` | Rare warm-glow under hero illustration | ### Shadow Philosophy Kagi's depth language is **tonal layering plus a 10% black hairline, almost never blur**. Cards lift through tone and border, not shadow — every surface looks like a different stock weight, not a different elevation. This is what gives Kagi its paper-and-ink feel. When a real shadow is needed (modal, tooltip), it's **warm-brown tinted** (`rgba(43, 36, 23, ...)`) — never neutral black, never coloured. The rare `warm` shadow uses the brand-orange RGB for an editorial accent glow. ## Shapes | Tier | Value | Use | |---|---|---| | Micro | 4px | Inline tags (rare), focus inner-stroke | | Small | 6px | Quietest dense chips | | Standard | 8px | Tooltip, dense form chips | | Comfortable | 12px | Inputs, dropdowns | | Card | 16px | Default warm-cream cards, testimonial cards | | Large | 20px | Modal, hero shells | | Pill | 9999px | **All buttons** — Kagi's signature | The defining radius decision is the **pill button**. Where every modern SaaS lands at 8–12px on buttons, Kagi runs **fully rounded pills** for primary, secondary, and ghost. The pill radius is part of the brand fingerprint as much as the cream canvas is. Cards hold at 16px (paper-grade soft). Hero shells at 20px (rare). Pills at 9999. ## Components ### Buttons **Primary pill (orange, dark text)** — `#ffb87a` bg, `#1c170d` text, **9999 radius** (fully rounded), Plex Sans 600 / 15px, padding `12px 24px`. Hover deepens to `#f3a45f`; active to `#e89348`. The signature CTA — "Try Kagi", "Get started", "Subscribe". **Text is dark, never white** — see §14. **Secondary pill (cream outlined)** — transparent bg, `#2b2417` text, `1px rgba(0, 0, 0, 0.10)` border, 9999 radius identical to primary, Plex Sans 600 / 15px. Hover wash `#fbf2e2`. **Ghost pill** — transparent, `#2b2417` text, no border, 9999 radius preserved, `8px 16px` padding. Hover wash `rgba(0, 0, 0, 0.05)`. Used for nav and inline ghost buttons. **Deep pill (rare)** — `#1c170d` bg, `#fffbf5` text, 9999 radius. Hover `#3a3120`. Reserved for dark-band hero or pricing emphasis — at most once per page. ### Cards **Default card** — `#fbf2e2` warm-cream bg, `1px rgba(0, 0, 0, 0.10)` border, 16px radius, `24px` padding, no shadow. Used for feature cards, pricing tiers, testimonials. **Lifted cream card (rare)** — `#fffefa` near-white-cream bg, `1px rgba(0, 0, 0, 0.08)` border, 16px radius, `32px` padding. Used for hero pricing or featured testimonial. **Testimonial card** — `#fbf2e2` bg, `1px rgba(0, 0, 0, 0.10)` border, 16px radius, `32px` padding. Quote in Plex Serif italic 22px; attribution in Plex Sans 500 14px below. ### Pull-quote (the editorial signature) **Pull-quote** — transparent bg, `#1c170d` text, `3px solid #ffb87a` left border, `32px` left indent, Plex Serif italic 22px / 1.4 line-height. Indented from body grid; usually breaks up dense feature copy. ### Badges, Tags, Pills **Editorial tag** — `#fbf2e2` bg, `#6b5d47` text, **Plex Mono** 500 / 12px, pill radius. The mono gives the spec-stamp feel that distinguishes Kagi tags from generic SaaS badges. **Status pill (warm)** — `#ffe5c8` bg, `#a55d24` text, Plex Sans 500 / 12px, pill radius. Used for plan tiers: `Plus`, `Family`, `Pro`. ### Inputs & Forms **Default input** — `#fffefa` bg, `1px rgba(0, 0, 0, 0.18)` border, 12px radius, `12px 16px` padding, Plex Sans 400 / 17px, `#a99a7d` placeholder. Focus ring `0 0 0 2px #c97a3b` with 2px cream offset. **Form labels** — Plex Sans 500 / 14px, `#2b2417`, `4px` margin-bottom from input. **Helper text** — Plex Sans 400 / 14px, `#6b5d47`, `4px` margin-top from input. **Error state** — border `#f7d8d2`; helper text flips to `#8a3a3a`. ### Navigation **Top nav** — 64px header height, `#fffbf5` bg matching page (no fill until scroll), no border. Wordmark left in Plex Sans 600. Nav links right at Plex Sans 500 / 15px / `#2b2417`. Hover deepens link to `#c97a3b`. Right cluster: ghost "Sign in" + primary orange pill "Try Kagi". **Footer nav** — Plex Sans 400 / 14px / `#6b5d47`, multi-column grid. Footer typography uses a touch more leading to read as paper-paged. ### Modal **Modal** — `#fffefa` panel, 16px radius, modal shadow `rgba(43, 36, 23, 0.18) 0 24px 48px -12px`, `40px` padding. Backdrop `rgba(43, 36, 23, 0.5)`. ### Tooltips **Tooltip** — `#1c170d` bg, `#fffbf5` text, 8px radius, Plex Sans 400 / 13px, `8px 12px` padding, `220ms` fade. ### Toasts **Toast** — `#fffefa` bg, `1px rgba(0, 0, 0, 0.10)` border, 12px radius, ambient warm shadow, `12px 16px` padding. Slide-up from bottom-right. ### Easing curves - **Standard** — `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover, focus. - **Emphasized** — `cubic-bezier(0.2, 0, 0, 1)` — incoming elements, modals. - **Out** — `cubic-bezier(0.16, 1, 0.3, 1)` — overshoot-free decelerate. - **Editorial** — `cubic-bezier(0.32, 0.72, 0, 1)` — section reveal, scroll-triggered illustration parallax. ### Duration buckets - **Instant** — 80ms — focus ring. - **Fast** — 120ms — hover bg shift. - **Standard** — 220ms — default transition (slightly slower than Cartesia's 200ms — paper-paced). - **Slow** — 360ms — modal opens, card hover lift. - **Page** — 480ms — between-route transition. ### Per-component micro-states - **Pill hover** — bg shifts `#ffb87a → #f3a45f` over `120ms ease-standard`. No translate, no scale — the page is paper-static. - **Pill active** — bg drops one notch darker; faint inset shadow (`inset 0 1px 2px rgba(0, 0, 0, 0.08)`). - **Card hover** — bg lifts from `#fbf2e2 → #f4e8ce` over `220ms ease-standard`. No translate. - **Link hover** — colour shift `#c97a3b → #a55d24` over `120ms`; underline thickness can grow from 1px to 2px. - **Input focus** — focus-ring fades in `80ms`; border colour swaps to `#c97a3b`. - **Pull-quote scroll-in** — fades up 8px from below, `editorial` easing, `360ms`. Reduced-motion: opacity-only. - **Modal** — backdrop fades 0 → 0.5 over `220ms`; modal scales `0.96 → 1` simultaneously over `360ms ease-emphasized`. - **Illustration parallax** — rare, tied to scroll; disabled under reduced-motion. ### Page transitions Marketing pages use SPA-style fade-through between routes at `480ms`. Section anchors use `scroll-behavior: smooth` over `360ms`. ### Reduced-motion strategy `prefers-reduced-motion: reduce` is fully honoured. All translate transforms become opacity fades. Illustration parallax disables entirely. Smooth scroll disables. Pull-quote scroll-in becomes a static fade. ### Contrast pairs (computed) | Pair | Ratio | WCAG | |---|---|---| | `#2b2417` on `#fffbf5` (body) | 12.4:1 | AAA | | `#1c170d` on `#fffbf5` (display) | 15.1:1 | AAA | | `#1c170d` on `#ffb87a` (CTA) | 10.8:1 | AAA | | `#6b5d47` on `#fffbf5` (muted) | 5.4:1 | AA at body | | `#c97a3b` on `#fffbf5` (link) | 5.0:1 | AA | | `#a55d24` on `#ffe5c8` (status pill) | 5.5:1 | AA | | `#3d5a47` on `#e0ebd0` (success) | 6.5:1 | AAA | Note: the `#1c170d` on `#ffb87a` ratio of 10.8:1 *demands* dark text on orange — a `#ffffff` on `#ffb87a` pairing would only hit 1.9:1, well below AA. The brand's dark-text-on-orange rule is therefore an accessibility decision as much as an aesthetic one. ### Focus indicators **2px solid `#c97a3b`** (deep brand-orange) with **2px cream offset** on every interactive surface. The deep-brand colour is visually distinct from the lighter `#ffb87a` brand fill, so focus state cannot be confused with hover. ### ARIA patterns - **Pull-quote** — uses proper `
` markup with `` for attribution. Screen readers announce the quote and source. - **Pricing tiers** — `role="group"` with `aria-labelledby` referencing tier name; price values use `aria-label` for screen-reader speech ("seven dollars per month"). - **Nav** — `