--- version: alpha name: "Arc" description: "Arc treats its product page like a fanzine — the canvas is a buttery cream `#FFFCEC`, headlines run in Marlin Soft SQ at heavyweight 700 with tight `-0.04em` tracking, and the accent palette mixes a deep `#2404AA` blue with a hot coral `#FB3A4D`. The result is editorial-feeling, hand-built, and unmistakable inside a sea of dark dev-tool sites. Where Linear runs near-black canvas + Inter Variable, where Vercel runs sharp white + Geist, where Raycast runs a dark dashboard register, Arc ships cream + soft-square sans + a 3-color brand stack — closer to a New York indie magazine than a Bay Area browser. The Browser Company's house aesthetic leans editorial-fanzine over big-tech-sterile; the marketing canvas is a buttery cream (called \"brandOffwhite\" in the source CSS), closer to Notion's warm grays than to any rival browser's chrome. Headlines hold in Marlin Soft SQ — a soft-square sans that pairs warm lowercase shapes with a heavyweight 700 hold and aggressive `-0.04em` tracking. Body uses Marlin (sister non-soft variant) and inline code uses ABC Favorit Mono. CTAs invert to white pills with deep-blue text — coral is reserved for emphasis, not buttons." colors: bg: "#FFFCEC" bg-secondary: "#FFF8DC" surface: "#FFFFFF" surface-elev: "#FFFEF7" text: "#000000" text-strong: "#000000" text-medium: "rgba(0, 0, 0, 0.8)" text-soft: "rgba(0, 0, 0, 0.6)" text-faint: "rgba(0, 0, 0, 0.45)" text-muted: "rgba(0, 0, 0, 0.3)" brand: "#2404AA" brand-deep: "#1A0388" brand-blue: "#3139FB" brand-red: "#FB3A4D" brand-coral-soft: "#FFE3E6" on-brand: "#FFFCEC" cta-bg: "#FFFFFF" cta-text: "#2702C2" swatch-pale-green: "#D7F0D2" swatch-salmon: "#FFD9CF" swatch-pale-yellow: "#FFF1A8" swatch-soft-blue: "#D1E2FF" swatch-lavender: "#E6DCFF" link: "#2404AA" link-hover: "#3139FB" selected-bg: "rgba(36, 4, 170, 0.08)" disabled: "rgba(0, 0, 0, 0.3)" border: "rgba(0, 0, 0, 0.12)" border-strong: "rgba(0, 0, 0, 0.20)" border-subtle: "rgba(0, 0, 0, 0.06)" border-brand: "rgba(36, 4, 170, 0.30)" success-bg: "#D7F0D2" success-text: "#1F4D24" warning-bg: "#FFF1A8" warning-text: "#7A5A00" danger-bg: "#FFE3E6" danger-text: "#A8112A" info-bg: "#D1E2FF" info-text: "#1A2B6B" typography: display: fontFamily: "Marlin Soft SQ" fontSize: "64px" lineHeight: 1.5 letterSpacing: "-0.04em" body: fontFamily: "Marlin" fontSize: "16px" lineHeight: 1.5 mono: fontFamily: "ABC Favorit Mono" rounded: button: "10px" card: "16px" pill: "9999px" spacing: xs: "1px" sm: "2px" md: "6px" lg: "12px" xl: "20px" --- ## Overview ## Overview Arc's marketing site refuses the dark-canvas dev-tool default. Open the page and you land on a buttery cream `#FFFCEC` — a warm off-white called "brandOffwhite" in the source CSS, closer to Notion's paper-warm grays than to Linear's near-black or Vercel's pure white. The hero stacks at 46px in **Marlin Soft SQ** at weight 700 with a tight `-0.04em` tracking; the supporting type runs in **Marlin** (the matched non-soft variant) and inline labels run in **ABC Favorit Mono**. The opening copy reads like a press quote — Arc's marketing voice borrows from real reviewers ("Arc is the Chrome replacement I've been waiting for") set as the H1. The whole surface feels editorial: a fanzine published by browser nerds. What makes Arc visually distinctive is the *combination* — most dev-tool sites pick one differentiator (color, type, layout) and lean. Arc layers three: the warm cream ground, the heavyweight soft-square type, and a hand-built three-color brand stack. Linear is dark + Inter. Vercel is sharp + Geist. Arc is cream + Marlin Soft + cobalt-coral-electric — a third option that signals warmth, opinion, and play. The accent palette of deep cobalt `#2404AA`, hot coral `#FB3A4D`, and electric blue `#3139FB` is more painterly than algorithmic; you can imagine the hex values being mixed by hand on a riso color sample, not picked from a Tailwind palette. The third register is the **student / community sub-palette**. Arc's education and community pages (built around the campus ambassadors program and student-discount tier) drop into a pastel chip set — pale green, salmon, lavender, soft yellow — used as full-bleed page grounds and decorative borders. The sub-palette signals warmth and community without competing with the cobalt-led primary system; the chrome stays consistent (Marlin Soft SQ, white CTA, 10px radius) while the canvas warms into pastel. Atmospheric vocabulary that captures the feeling: *cream-paper, fanzine, hand-tooled, soft-square, browser-nerds, warm-confident, riso-print, indie-magazine, painterly-palette, opinionated-warm, editorial-product.* Every surface lands like it was assembled by someone who reads N+1 and zines, not someone optimizing conversion-rate funnels. **Key Characteristics** - Cream `#FFFCEC` canvas — never pure white, always paper-warm "brandOffwhite" - Custom **Marlin Soft SQ** display — soft-square sans with heavyweight 700 hold - Tight `-0.04em` tracking on headlines — broadsheet-masthead compression - Three-color brand stack — cobalt `#2404AA`, coral `#FB3A4D`, electric `#3139FB` - White-pill CTA with deep-blue label — inverse of Linear/Vercel's dark pill - Hand-built palette — feels mixed, not algorithmic - Pastel community sub-palette (pale green, salmon, lavender) for student pages - ABC Favorit Mono inline — Swiss-modern monospace by Dinamo - Subtle riso-shadow language — flat with offset color, not drop-shadow - 10px button radius — softer than Vercel's 6px, not pill geometry - Editorial single-column layout with asymmetric pull-quotes - Opinion-led marketing voice — quotes from real users as H1 ## Colors ### Primary - **bg** `#FFFCEC` — buttery cream "brandOffwhite", the defining canvas. Never substitute `#FFFFFF`. - **text** `#000000` — pure black on cream gives 17.8:1 contrast (AAA at all sizes). - **bg-secondary** `#FFF8DC` — warmer cream for inset testimonial blocks. - **surface** `#FFFFFF` — pure white for cards, CTAs, modal sheets. - **cta-bg** `#FFFFFF` — primary CTA fill is white (not the cream); the value contrast against cream sells the button. - **cta-text** `#2702C2` — deep blue label inside the white pill — Arc's signature CTA inversion. ### Brand & Accent - **brand** `#2404AA` — deep cobalt; the dominant accent for links, brand wordmark, ghost-button hover, focus rings. - **brand-deep** `#1A0388` — pressed-state cobalt. - **brand-blue** `#3139FB` — saturated electric blue; used on link-hover and emphasis spots. - **brand-red** `#FB3A4D` — hot coral, reserved for highlight chips and emphasis labels. **Never a CTA fill.** - **brand-coral-soft** `#FFE3E6` — coral wash for danger semantic and gentle highlight grounds. ### Student / Community Sub-Palette - **swatch-pale-green** `#D7F0D2` — used on Arc Education pages. - **swatch-salmon** `#FFD9CF` — community / ambassador pages. - **swatch-pale-yellow** `#FFF1A8` — pricing and student-discount callouts. - **swatch-soft-blue** `#D1E2FF` — feature-comparison rails. - **swatch-lavender** `#E6DCFF` — release notes and changelog. These five hues function as full-bleed section grounds for community pages; on the marketing chrome they're *never* applied. The pastel set is sequenced — one hue per page, never stacked. ### Interactive - **link** `#2404AA` — cobalt link in body copy, underlined. - **link-hover** `#3139FB` — electric blue on hover; the only chromatic transition. - **selected-bg** `rgba(36, 4, 170, 0.08)` — cobalt 8% wash for selected nav. - **disabled** `rgba(0, 0, 0, 0.3)` — disabled control text. ### Neutral Scale - **black** `#000000` — primary text and headlines (no slate substitute; pure black on cream is the choice). - **text-medium** `rgba(0, 0, 0, 0.8)` — secondary heading colour. - **text-soft** `rgba(0, 0, 0, 0.6)` — supporting copy, captions. - **text-faint** `rgba(0, 0, 0, 0.45)` — eyebrows, placeholder. - **text-muted** `rgba(0, 0, 0, 0.3)` — disabled microcopy. ### Surface & Borders - **surface-0 (page)** `#FFFCEC` cream. - **surface-1 (panel)** `#FFF8DC` warmer cream. - **surface-2 (card)** `#FFFFFF` white card lift. - **border** `rgba(0, 0, 0, 0.12)` — default hairline. - **border-strong** `rgba(0, 0, 0, 0.20)` — outlined buttons. - **border-subtle** `rgba(0, 0, 0, 0.06)` — quietest separation. - **border-brand** `rgba(36, 4, 170, 0.30)` — cobalt-tinted rule for emphasis. ### Shadow Colors Arc's depth language is **flat with riso-print warmth**. Cards lift off cream by value contrast (white-on-cream); explicit shadows are rare and, when used, mimic riso-print offsets — slightly shifted, slightly cobalt-tinted (`rgba(36, 4, 170, 0.10) 2px 2px 0px`) — never the hard neutral drop-shadow of dashboard apps. The brand never uses cool blue-tinted neutral shadows; that would crack the warm temperature of the page. ### Semantic - **success** — bg `#D7F0D2` (pale green), text `#1F4D24`, border `rgba(31, 77, 36, 0.30)`. - **warning** — bg `#FFF1A8` (pale yellow), text `#7A5A00`, border `rgba(122, 90, 0, 0.25)`. - **danger** — bg `#FFE3E6` (coral wash), text `#A8112A`, border `rgba(168, 17, 42, 0.30)`. - **info** — bg `#D1E2FF` (soft blue), text `#1A2B6B`, border `rgba(26, 43, 107, 0.25)`. The unusual choice: semantic colours come from the *student sub-palette*, not from a separate Material or Tailwind ladder. Success isn't `green-500`; it's pale-green. The whole palette is one painterly system. ## Typography ### Font Family - **Display**: `"Marlin Soft SQ", -apple-system, system-ui, sans-serif` — custom commissioned soft-square sans by The Browser Company. Square skeletons with rounded interior corners give the type its hand-built warmth. Used at weight 400 / 500 / 700. - **Body**: `Marlin, -apple-system, system-ui, sans-serif` — the matched non-soft sister face. Used at 400 / 500 for paragraph copy, captions, and UI labels. - **Mono**: `"ABC Favorit Mono", Menlo, Monaco, monospace` — Dinamo Typefaces' Swiss-modern monospace. Used for inline code, eyebrow caps, and tabular numerals. - **OpenType features**: `liga` and `kern` always on. `tnum` and `zero` enabled in mono (tabular figures, slashed zero) for code blocks. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | Display Hero | Marlin Soft SQ | 64px | 700 | 0.92 | -0.04em | liga | Hero ceiling, largest pull | | Display | Marlin Soft SQ | 56px | 700 | 0.93 | -0.04em | liga | Section intro at scale | | H1 | Marlin Soft SQ | 46px | 700 | 0.93 | -0.04em | liga | Page title, the canonical Arc hero | | H2 | Marlin Soft SQ | 36px | 700 | 1.00 | -0.03em | liga | Major section | | H3 | Marlin Soft SQ | 28px | 500 | 1.15 | -0.02em | — | Sub-section, weight steps down | | H4 | Marlin Soft SQ | 22px | 500 | 1.25 | -0.01em | — | Card heading | | H5 | Marlin Soft SQ | 18px | 500 | 1.35 | normal | — | Inline emphasis | | Eyebrow | ABC Favorit Mono | 11px | 500 | 1.40 | 0.08em | uppercase | Section pre-label, mono caps | | Body Large | Marlin | 20px | 400 | 1.45 | normal | — | Lede paragraph | | Body | Marlin | 16px | 400 | 1.50 | normal | — | Default paragraph copy | | Body Small | Marlin | 14px | 400 | 1.50 | normal | — | Captions, sidebars | | Caption | Marlin | 13px | 400 | 1.40 | normal | — | Image captions | | Caption Tabular | ABC Favorit Mono | 12px | 500 | 1.40 | normal | tnum | Stats, data labels | | Label | ABC Favorit Mono | 11px | 500 | 1.30 | uppercase | — | UI labels, mono caps | | Button | Marlin | 14px | 600 | 1.00 | normal | — | CTA copy | | Pull Quote | Marlin Soft SQ | 28px | 500 | 1.20 | -0.02em | — | Editorial pull-quote | | Code | ABC Favorit Mono | 14px | 400 | 1.55 | normal | — | Inline + block | | Code Micro | ABC Favorit Mono | 11px | 400 | 1.40 | normal | — | Footnote refs | ### Principles - **Soft-square is the signature.** Marlin Soft SQ at weight 700 with `-0.04em` tracking on the H1 is the single decision that makes Arc unmistakable. Switching to Inter (or Geist, or Söhne) collapses the brand into the dev-tool register. - **Weight 700 only for display.** Headlines hit 700; subheads step down to 500; body holds at 400. The brand never asks weight to do shouting work — the *shape* of Marlin Soft does it. - **Negative tracking compresses with size.** -0.04em at 36–64px, -0.03em at 28–36px, -0.02em at 22–28px, normal at 18px and below. The compression mirrors broadsheet masthead typography. - **Mono for eyebrows, not just code.** ABC Favorit Mono caps at 11px / 0.08em tracking are Arc's section pre-labels — a Dinamo-signed signal of type discipline. - **Two faces, never three.** Display (Marlin Soft SQ) + body (Marlin) + mono (Favorit). Adding a serif breaks the system; Arc deliberately avoids the Notion-style sans+serif duet. - **Press-quote H1.** The hero copy is often a real reviewer's quote. Marlin Soft at 700 / 46px / -0.04em makes the press voice feel like a magazine cover blurb, not a marketing line. - **OpenType discipline**: `liga` and `kern` always on; `tnum` and `zero` in mono for tabular alignment in stats. - **Italics in body, never in display.** Marlin italic carries quoted titles and gentle emphasis; Marlin Soft never italicises. ## Layout ### Spacing System - **Base unit**: 4px. - **Scale**: 4, 8, 12, 16, 20, 24, 32, 48, 64, 80, 96, 128 — Fibonacci-adjacent. - **Density observation**: Arc is *generously spaced* by SaaS standards but tighter than Anthropic. Headlines float in 64–96px of margin; body paragraphs sit on 24px line gaps; sections separate at 80–128px. ### Grid & Container - **Page max width**: `1280px` — standard but feels wider because the cream canvas extends edge-to-edge. - **Site gutter**: `clamp(24px, 5vw, 64px)` — generous on desktop, accommodating on mobile. - **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, 46px H1 anchored left of centre, single white-pill CTA aligned underneath. ### Whitespace Philosophy The cream canvas *is* the whitespace. Arc deliberately under-fills sections so the warm ground reads as a continuous magazine spread rather than a dense product page. Section gutters run **80–128px**; minor blocks sit on 48–64px gaps; intra-section spacing uses 16–32px. The page never feels crowded — empty cream is treated as a primary visual asset. ### Section Cadence - Hero (cream) → Capability Rail (white card grid on cream) → Press Quote (warmer cream inset) → Feature Spread (cream with riso-shadow illustrations) → Student / Community (pastel swatch ground) → Footer (deeper cream). - The pastel community sections appear once or twice per page as chromatic punctuation; they never spread 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, 46px H1 | | 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: 44px minimum height on mobile (12px vertical padding × 2 + line-height ≈ 44px). - Nav link tap area: 44×44px even when visual padding is smaller. ### Collapsing Strategy - **Header**: full nav at ≥1024px; hamburger sheet below. - **Hero**: 64px display → 46px H1 → 36px → 32px across desktop/tablet/mobile. - **Capability grid**: 3-up at desktop, 2-up at tablet, 1-up at mobile. - **Body width**: 680px → fluid 90vw at mobile. - **Section spacing**: 128px → 80px → 64px across sizes. ### Image Behavior - Hero illustrations use `srcset` with 1x/2x/3x for crisp riso-shadow reproduction. - Browser-screenshot imagery uses `aspect-ratio` to prevent layout shift. - Lazy-loading on below-fold images; eager on hero. - Pastel community-page backgrounds use CSS `background-color` (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 the changelog rail when the inline meta exceeds 320px. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | 0 | Flat — no shadow | Default page surface, hero, body sections | | 1 | Value-contrast (white card on cream) | Editorial cards, capability tiles | | 2 | `rgba(0, 0, 0, 0.04) 0 1px 3px` | Sticky nav, dropdowns | | 3 | `rgba(0, 0, 0, 0.06) 0 4px 12px` | Hover-lifted cards | | 4 | `rgba(0, 0, 0, 0.08) 0 12px 32px -8px` | Overlay menus, popovers | | 5 | `rgba(0, 0, 0, 0.12) 0 24px 48px -12px` | Modals, dialogs | | Riso | `rgba(36, 4, 170, 0.10) 2px 2px 0px` | Decorative offset shadow (illustrations only) | ### Shadow Philosophy Arc's depth is **flat with riso-warm offsets**. Cards lift off cream by *value contrast alone* — white on cream provides separation without explicit shadow. When shadows do appear (modals, popovers), they're tinted with low-opacity black, never blue-tinted. The decorative *riso-shadow* — a 2px offset cobalt shadow — appears selectively on feature illustrations to mimic riso-print misregistration; it's a brand-tinted shadow used intentionally as ornament, not a generic elevation system. The system reads as paper-and-ink, not interface-and-depth. ## Shapes | Tier | Value | Use | |---|---|---| | Micro | 2px | Inline chip corners, decorative dividers | | Standard (sm) | 6px | Code block corners, compact pills | | Comfortable (md) | 10px | Buttons, inputs, dropdowns — the dominant `--radius--button` | | Relaxed (lg) | 16px | Cards, modal corners, feature tiles | | Featured (xl) | 24px | Hero shells, pull-quote modules | | Pill | 9999px | Coral emphasis chips, status indicators | Arc's signature radius is **10px** on buttons — softer than Vercel's 6px but not the full pill. Cards run 16px. Pull-quotes and hero modules use 12–24px corner rounds. The Marlin Soft SQ typeface itself echoes the geometry: square shapes with rounded interior corners, a 6–10px corner-radius equivalent in type form. ## Components ### Buttons **Primary (White Pill)** - Background: `#FFFFFF`. Text: `#2702C2` deep blue, Marlin 600 / 14px. - Padding: `12px 22px`. Radius: `10px`. No border. - Hover: bg → `#FFFCEC` (cream), text → `#1A0388`. - Active: bg → `#F2EFDB` (deeper cream), text → `#1A0388`. - Use: Primary CTA — *Get Arc, Download for Mac, Try Arc Search.* **Secondary (Outlined)** - Background: transparent. Text: `#000000`. Border: `1px solid rgba(0, 0, 0, 0.20)`. - Same padding (12×22), radius (10), font (Marlin 600 / 14px) as primary. - Hover: bg → `rgba(0, 0, 0, 0.04)`. - Use: Twin to primary — *Watch the demo, Read the changelog.* **Cobalt (Dark-Section CTA)** - Background: `#2404AA`. Text: `#FFFCEC`. No border. - Same shape (10px radius, 12×22 padding). - Hover: bg → `#3139FB` (electric blue). Active: `#1A0388`. - Use: Reserved for dark-band hero variants — rare; the white pill is the default primary. **Ghost (Quiet)** - Background: transparent. Text: `#000000`. No border. - Padding: `10px 16px`. Marlin 500 / 14px. - Hover: text → `#2404AA` cobalt. - Use: Nav links, footer secondary actions, repeated CTAs in long pages. ### Cards **Editorial Card** - Background: `#FFFFFF`. Border: `1px solid rgba(0, 0, 0, 0.12)`. Radius: `16px`. Padding: `28px`. - Shadow: none — value-contrast separates white from cream. - Hover: border → `rgba(0, 0, 0, 0.20)`; transition `220ms`. - Use: Feature tile, capability rail entry, release-note card. **Cream Inset Card** - Background: `#FFF8DC` warmer cream. Border: `1px solid rgba(0, 0, 0, 0.08)`. Radius: `16px`. Padding: `32px`. - Use: Testimonial block, quoted reviewer, pull-quote module. **Student / Community Card** - Background: any pastel swatch (pale-green, salmon, lavender, soft-blue, pale-yellow). Border: none. Radius: `16px`. Padding: `32px 28px`. - Use: Education, ambassador, community-program cards. ### Badges, Tags, Pills **Eyebrow Label** — no chrome, just type. ABC Favorit Mono 500 / 11px / uppercase / 0.08em tracking, colour `rgba(0, 0, 0, 0.6)`. Sits above section headlines. **Coral Pill** — bg `rgba(251, 58, 77, 0.12)`, text `#A8112A`, radius `9999px`, padding `4px 12px`. Hot-coral chip for emphasis labels (NEW, BETA, LIVE). **Cobalt Tag** — bg `rgba(36, 4, 170, 0.08)`, text `#2404AA`, radius `4px`, padding `4px 10px`. Subtle cobalt-tinted pill. ### Inputs / Forms - Background: `#FFFFFF`. Border: `1px solid rgba(0, 0, 0, 0.20)`. Radius: `10px`. Padding: `12px 16px`. - Font: Marlin 400 / 16px. Placeholder: `rgba(0, 0, 0, 0.45)`. - Focus: `0 0 0 2px #2404AA` ring, border → `#000000`. - Error: border → `#A8112A`, ring → `rgba(168, 17, 42, 0.30)`. - Helper: caption 13px text-soft below. ### Navigation - Header height `64px`. Background `#FFFCEC` cream (transparent on hero, becomes opaque-cream on scroll). - Logo: Arc wordmark, pure black, custom soft-square mark. - Nav links: Marlin 500 / 15px, colour `#000000`, padding `8px 14px`. Hover → `#2404AA` cobalt. - Right-side CTA pair: ghost "Sign in" + primary white-pill "Get Arc". - Mobile: full-screen sheet, links stack at 28px / Marlin Soft 500. ### Optional Components **Pull Quote** — Marlin Soft SQ 28px / 500 / -0.02em, text-medium, with a 4px cobalt vertical rule on the left edge. **Footnote** — Marlin 13px / 400, text-soft; sits on a thin border-subtle rule. **Code Block** — ABC Favorit Mono 14px, bg `#FFF8DC` warm cream, radius `8px`, padding `16px 20px`, border `rgba(0, 0, 0, 0.10)`. Inline code: same font, bg `rgba(0, 0, 0, 0.06)`, padding `2px 6px`, radius `4px`. **Tooltip** — bg `#000000`, text `#FFFCEC`, radius `6px`, padding `8px 12px`, font `13px / Marlin 500`. **Modal** — bg `#FFFFFF`, radius `16px`, shadow `rgba(0, 0, 0, 0.12) 0 24px 48px -12px`, max-width `560px`. Cream backdrop overlay at 60% opacity. **Riso-Shadow Decorative** — selectively applied to feature illustrations: `rgba(36, 4, 170, 0.10) 2px 2px 0px` offset cobalt shadow that mimics riso-print misregistration. ### 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-playful`: `cubic-bezier(0.34, 1.56, 0.64, 1)` — gentle overshoot; used sparingly on illustration hovers and student-page reveals. ### Duration Buckets - **Fast (120ms)** — colour transitions, focus rings, link hovers. - **Standard (220ms)** — button hover, card hover, dropdown reveal. - **Slow (360ms)** — modal enter/exit, page section fade-in. - **Page (480ms)** — route transitions, hero reveal sequences. ### Per-Component Micro-States - **Button hover (white pill)**: bg `#FFFFFF` → `#FFFCEC` (cream); text `#2702C2` → `#1A0388`; transition `220ms ease-standard`. No lift, no scale. - **Button hover (cobalt)**: bg `#2404AA` → `#3139FB` (electric blue) — the only hover that introduces a *brighter* color. - **Card hover**: border deepens from `rgba(0, 0, 0, 0.12)` to `rgba(0, 0, 0, 0.20)`; no shadow change. - **Link hover**: colour `#2404AA` → `#3139FB` over 120ms; underline thickens 1px → 2px. - **Input focus**: 2px cobalt ring fades in over 120ms; border darkens from 0.20 to full black. - **Nav link active**: 1px black underline animates left-to-right over 220ms. - **Illustration hover (playful)**: gentle 1deg rotation + 2px cobalt riso-shadow appears; 360ms ease-playful. ### Page Transitions Editorial reveal: hero text fades in over 480ms with 24px translate-up; below-fold sections use `IntersectionObserver` to fade in at 80% viewport, 360ms duration, no translate. ### Reduced Motion `@media (prefers-reduced-motion: reduce)` — all transitions become opacity-only, durations halved. Translate animations and the playful illustration overshoots are disabled entirely; scroll-linked reveals snap to final state. The `ease-playful` curve is replaced with `ease-standard` so motion never feels "bouncy" when the user has opted out. ### Contrast Pairs - **`#000000` text on `#FFFCEC` bg**: 17.8:1 — AAA at all sizes. - **`rgba(0, 0, 0, 0.6)` text on `#FFFCEC` bg**: 7.9:1 — AAA at body sizes. - **`rgba(0, 0, 0, 0.45)` text on `#FFFCEC` bg**: 4.5:1 — AA at large sizes only. - **`#FFFCEC` text on `#2404AA` button**: 13.1:1 — AAA. - **`#2702C2` text on `#FFFFFF` CTA**: 12.4:1 — AAA at all sizes. - **`#A8112A` text on `rgba(251, 58, 77, 0.12)` coral pill**: 6.2:1 — AAA at body sizes. ### Focus Indicators - Default focus ring: `0 0 0 2px #2404AA` cobalt with 2px offset on cream pages. - On dark surfaces (rare hero variants): `0 0 0 2px #FFFCEC` cream. - All interactive surfaces must have a visible focus state — no `outline: none` without a replacement. - The white-pill primary button gets a 2px cobalt ring with 2px white offset, so the ring is visible against both cream and white surfaces. ### ARIA Patterns - **Navigation**: `