--- version: alpha name: "Kit" description: "Kit (formerly ConvertKit) is the editorial newsletter platform reborn with a publication-grade chrome. The canvas is a warm cream `#f9f7f4` and a slightly deeper `#f2efe9` for inset zones; display copy uses the custom **KitSansFont** at 80px, weight 500, and the secondary chrome runs **Libre Franklin**. The brand's chromatic identity is a pastel-rainbow chip set — sky `#bce1fa`, peach `#ffd0ad`, mint `#b9e9c5`, lilac `#e7c9f1`, gold `#f2ba41` — anchored by a single confident sky-blue CTA `#44b1ff`. The result reads more like a literary magazine than an email tool. Where Substack runs orange + serif and Mailchimp runs yellow + cute-illustration, Kit splits the difference: a custom chunky-humanist display sans on cream, a sky-blue Stripe-discipline anchor, and a pastel chip set that signals creator-warmth without joining the bubblegum-illustration crowd. The 2024 ConvertKit-to-Kit rebrand traded a generic SaaS chrome for a magazine-grade editorial system; the chunky 80px headline at weight 500 with line-height < 1.0 is the brand's typographic signature." colors: bg: "#f9f7f4" bg-alt: "#f2efe9" bg-tertiary: "#ebe6dd" surface: "#ffffff" surface-elev: "#fffdf9" text: "#1e1e1e" text-strong: "#0f0f0f" text-medium: "#000000cc" text-soft: "#00000099" text-faint: "#00000066" text-muted: "#0000004d" brand: "#44b1ff" brand-soft: "#44b1ffd9" brand-deep: "#2c8fd6" brand-tint: "#bce1fa" on-brand: "#1e1e1e" accent-sky: "#bce1fa" accent-sky-deep: "#a2d1f1" accent-peach: "#ffd0ad" accent-mint: "#b9e9c5" accent-lilac: "#e7c9f1" accent-gold: "#f2ba41" accent-gold-soft: "#fce8b8" accent-rose: "#f7c4cd" link: "#44b1ff" link-hover: "#2c8fd6" selected-bg: "#f2efe9" disabled: "#0000004d" border: "#0000000f" border-strong: "#00000019" border-subtle: "#00000008" border-brand: "rgba(68, 177, 255, 0.30)" success-bg: "#b9e9c5" success-text: "#1f4d2c" warning-bg: "#fce8b8" warning-text: "#7a5a00" danger-bg: "#f7c4cd" danger-text: "#a8113a" info-bg: "#bce1fa" info-text: "#1a3a7a" typography: display: fontFamily: "KitSansFont" fontSize: "96px" lineHeight: 1.5 letterSpacing: "-0.01em" body: fontFamily: "Libre Franklin" fontSize: "18px" lineHeight: 1.5 mono: fontFamily: "JetBrains Mono" rounded: button: "8px" card: "16px" pill: "9999px" spacing: xs: "1px" sm: "2px" md: "6px" lg: "16px" xl: "24px" --- ## Overview ## Overview Kit's site reads like a literary newsletter that learned to sell. The canvas is a warm cream `#f9f7f4` (ecru, not white), and the display face is a custom **KitSansFont** set at 80px weight 500 on a 76px line-height. Headlines hit chunky-but-humanist — closer to a magazine title-card than a SaaS hero. Body copy switches register to **Libre Franklin**, the Google open-source workhorse, at 18px on 27px. The brand's chromatic identity is the **pastel-rainbow chip set** — peach, mint, sky, lilac, gold — used to mark feature categories, audience pillars, and creator-success stories. Anchoring it all is a single confident sky-blue `#44b1ff` for the primary CTA and link layer. The whole composition reads as the natural successor to the editorial-newsletter era Substack and Ghost opened. What makes Kit visually distinctive is the *position between* — Kit isn't Substack (which leans full-serif and ink-dense), and it isn't Mailchimp (which leans bubblegum-illustrated and yellow). Kit takes Substack's editorial register, removes the serif from the chrome (relegating it to pull-quotes only), and adds a pastel chip set that signals creator-warmth without slipping into cute-illustration territory. The chunky 80px humanist display + the Stripe-discipline single-blue + the pastel chip set = a publication-grade editorial system that happens to sell email infrastructure. The third register is the **pastel chip choreography**. Kit uses peach for tools, mint for growth, sky for audience, lilac for community, gold for pricing — and the choreography is *sequenced*. Within a section, only one or two pastels appear; the rainbow is never stacked. A feature ladder might run peach → mint → sky vertically, but never peach + mint + lilac in a single module. This sequencing keeps the palette feeling intentional, like a magazine spread where each spread gets its own colourway, rather than a Mailchimp-style decorative random-pastel. Atmospheric vocabulary that captures the feeling: *cream-paper, ecru-canvas, magazine-titlecard, chunky-humanist, KitSans-signature, pastel-sequenced, sky-anchor, editorial-newsletter, Libre-Franklin-workhorse, line-height-tight, creator-warmth, publication-grade.* Every surface lands like a Substack publication that hired a magazine art director. **Key Characteristics** - Cream `#f9f7f4` canvas — ecru, not white, never pure white - Custom **KitSansFont** display — chunky humanist at 80px weight 500 - Tight line-height (< 1.0) on hero — magazine title-card stack - **Libre Franklin** body at 18px / 1.5 — Google workhorse for crisp body copy - Single sky-blue `#44b1ff` for primary CTA — Stripe-discipline anchor - Pastel chip palette — sky, peach, mint, lilac, gold — sequenced, not stacked - Each pastel maps to a content pillar (audience / tools / growth / community / pricing) - 16px card radius — soft editorial corners - Pill (9999px) on email-capture inputs and primary CTAs - Libre Caslon Text serif — used sparingly in pull-quotes only - Deeper paper `#f2efe9` for feature bands — warm tonal layering - 96–128px section gutters — magazine-pace cadence ## Colors ### Primary - **bg** `#f9f7f4` — warm cream canvas, ecru. Never pure white. Defining ground. - **text** `#1e1e1e` — near-black display copy; warmer than `#000` so type doesn't fight cream. - **bg-alt** `#f2efe9` — deeper paper for inset zones, feature bands, pricing emphasis. - **bg-tertiary** `#ebe6dd` — deepest cream for testimonial blocks. - **surface** `#ffffff` — raised paper card lift over cream. ### Brand & Accent - **brand** `#44b1ff` — signature sky-blue. Primary CTA fill, body links, brand wordmark accent. - **brand-soft** `#44b1ffd9` — 85% sky for hover-soft. - **brand-deep** `#2c8fd6` — pressed-state sky. - **brand-tint** `#bce1fa` — sky tint for chips (also doubles as `accent-sky`). - **on-brand** `#1e1e1e` — near-black label on sky-blue CTA. The signature inversion — most blue CTAs use white text; Kit's near-black on sky reads more like a magazine cover blurb than a SaaS button. ### Pastel Chip Set (the editorial palette) - **accent-sky** `#bce1fa` — audience pillar, info contexts. - **accent-sky-deep** `#a2d1f1` — deeper sky variant for emphasis. - **accent-peach** `#ffd0ad` — tools pillar, warm feature categories. - **accent-mint** `#b9e9c5` — growth pillar, success contexts. - **accent-lilac** `#e7c9f1` — community pillar, social features. - **accent-gold** `#f2ba41` — pricing emphasis, premium tier highlights. - **accent-gold-soft** `#fce8b8` — gold wash for warning bg. - **accent-rose** `#f7c4cd` — rare rose chip for danger / removal contexts. These six pastels are first-class design tokens. They appear as full-bleed section grounds on feature pages, as chip backgrounds on capability tiles, and as decorative dingbats. The choreography rule: one pastel per section, two if needed for a comparison; never three or more in a single module. Sequenced, not stacked. ### Interactive - **link** `#44b1ff` — sky link in body copy. Underlined on hover only, not by default. - **link-hover** `#2c8fd6` — deeper sky on hover. - **selected-bg** `#f2efe9` — selected nav state, deeper paper. - **disabled** `#0000004d` — disabled control text at 30% black. ### Neutral Scale - **near-black** `#1e1e1e` — primary display and body text. - **text-strong** `#0f0f0f` — rare deepest black for hero accent. - **text-medium** `#000000cc` (80%) — secondary heading colour. - **text-soft** `#00000099` (60%) — supporting copy, captions. - **text-faint** `#00000066` (40%) — eyebrows, helper. - **text-muted** `#0000004d` (30%) — disabled microcopy. ### Surface & Borders - **surface-0 (page)** `#f9f7f4` cream. - **surface-1 (panel)** `#f2efe9` deeper paper. - **surface-2 (emphasis)** `#ebe6dd` deepest cream. - **surface-3 (card)** `#ffffff` white paper lift. - **border** `#0000000f` — ~6% black hairline. - **border-strong** `#00000019` — ~10% black for outlined buttons. - **border-subtle** `#00000008` — quietest separation. - **border-brand** `rgba(68, 177, 255, 0.30)` — sky-tinted hairline. ### Shadow Colors Kit's depth language is **paper-tonal layering**. Cream `#f9f7f4` ground → deeper paper `#f2efe9` inset → white `#ffffff` raised card. Hairlines are 6% black. Shadows are minimal — cards take a soft 12px blur at 6% near-black on hover only. The pastel chip set provides chromatic depth without ever spreading to the chrome itself. The brand never uses cool blue-tinted shadows — that would crack the warm temperature of the cream-paper canvas. ### Semantic - **success** — bg `#b9e9c5` (mint chip), text `#1f4d2c` (deep forest), border `rgba(31, 77, 44, 0.20)`. - **warning** — bg `#fce8b8` (gold-soft wash), text `#7a5a00`, border `rgba(122, 90, 0, 0.20)`. - **danger** — bg `#f7c4cd` (rose chip), text `#a8113a`, border `rgba(168, 17, 58, 0.25)`. - **info** — bg `#bce1fa` (sky chip), text `#1a3a7a`, border `rgba(26, 58, 122, 0.20)`. The unusual choice: semantic colours come *from* the pastel chip palette, not from a separate Material/Tailwind ladder. Success isn't `green-500`; it's mint-chip. Info is sky-chip — not `blue-500`. The whole palette is one editorial system. ## Typography ### Font Family - **Display**: `KitSansFont, "KitSansFont Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif` — custom commissioned chunky humanist sans by Kit (post-rebrand 2024). Used at weight 400 / 500 / 700. The defining brand voice. - **Body**: `"Libre Franklin", "Libre Franklin Fallback", -apple-system, system-ui, sans-serif` — Pablo Impallari's Google open-source companion. Crisp, readable, high-contrast humanist sans. Used at 400 / 500 / 600. - **Serif**: `"Libre Caslon Text", Georgia, "Times New Roman", serif` — sparingly used in pull-quotes and creator testimonials only. Italic carries the editorial-magazine register. - **Mono**: `ui-monospace, "SF Mono", "JetBrains Mono", monospace` — pragmatic system fallback chain. Rare on marketing chrome. - **OpenType features**: `liga` and `kern` always on. `onum` (old-style figures) enabled in serif body for editorial reading. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | Display Hero | KitSansFont | 96px | 500 | 0.92 | -0.01em | liga | Largest hero variant | | Display | KitSansFont | 80px | 500 | 0.95 | normal | liga | The canonical Kit hero — chunky stacked | | H1 | KitSansFont | 64px | 500 | 0.98 | normal | liga | Page title | | H2 | KitSansFont | 48px | 500 | 1.00 | -0.01em | liga | Major section | | H3 | KitSansFont | 28px | 500 | 1.15 | normal | — | Sub-section | | H4 | KitSansFont | 22px | 500 | 1.25 | normal | — | Card heading | | H5 | Libre Franklin | 18px | 600 | 1.35 | normal | — | Inline emphasis (switches to body face) | | Eyebrow | Libre Franklin | 12px | 600 | 1.40 | 0.06em | uppercase | Section pre-label | | Body Large | Libre Franklin | 20px | 400 | 1.50 | normal | — | Lede paragraph | | Body | Libre Franklin | 18px | 400 | 1.50 | normal | — | Default body copy (notably 18px, not 16px) | | Body Small | Libre Franklin | 16px | 400 | 1.50 | normal | — | Captions, sidebars | | Caption | Libre Franklin | 14px | 400 | 1.40 | normal | — | Image captions | | Caption Tabular | Mono | 13px | 500 | 1.40 | normal | — | Stats, data labels | | Label | Libre Franklin | 12px | 600 | 1.30 | normal | — | UI labels | | Button | Libre Franklin | 15px | 600 | 1.00 | normal | — | CTA copy | | Pull Quote | Libre Caslon Text | 28px | 400 | 1.30 | normal | italic | Editorial pull-quote in serif italic | | Code | Mono | 14px | 400 | 1.55 | normal | — | Inline + block | ### Principles - **Tight line-height on the display.** KitSansFont at 80px / 500 with `0.95` line-height — *line-height < 1.0* — is the brand's typographic signature. It stacks the headline tight, like a magazine cover title. Going to 1.1 or 1.2 (the standard SaaS heading line-height) collapses the brand into Substack/Mailchimp territory. - **Two-family duet.** KitSansFont (display) + Libre Franklin (body). Every visible piece of chrome lands in one of the two faces. Adding a third sans breaks the system; the serif (Libre Caslon Text) is reserved for editorial pull-quotes only. - **Body at 18px, not 16px.** Kit's default body is 18px / 1.5 — slightly larger than the SaaS-standard 16px / 1.5. The choice is editorial: 18px reads as magazine, 16px reads as web app. - **Weight 500 only for KitSansFont display.** Headlines hit 500 — not 600 or 700. The face has enough character that 500 carries the weight; going heavier would feel shouty. Body switches to Libre Franklin at 400 / 500 / 600. - **Eyebrows in Libre Franklin caps.** 12px / 600 / 0.06em uppercase tracking. The mono signal (which Plain or Anthropic uses for eyebrows) is rejected here — Kit keeps eyebrows in the body face for editorial cohesion. - **Italics in serif body, never in display.** Libre Caslon Text italic carries quoted titles and pull-quotes; KitSansFont never italicises. - **OpenType discipline**: `onum` (old-style figures) in serif body so numbers sit visually with letters; standard `liga` and `kern` everywhere. - **Sentence case for headlines.** Kit writes "Build your audience" not "Build Your Audience" — a creator-direct-address convention. ## Layout ### Spacing System - **Base unit**: 4px. - **Scale**: 4, 8, 12, 16, 20, 24, 32, 48, 64, 80, 96, 128, 160 — Fibonacci-adjacent. - **Density observation**: Kit pages run wide with generous gutters. The cream canvas extends edge-to-edge, and the 18px body sits in 24–32px line gaps. ### Grid & Container - **Page max width**: `1320px` — slightly wider than the SaaS-standard 1280, accommodating the chunky hero scale. - **Site gutter**: `clamp(24px, 5vw, 72px)`. - **Grid**: 12 columns with 24px gutters. Hero blocks float a large display headline left with a creator photo or screenshot right, often overlaid with a pastel feature chip. - **Hero treatment**: full-bleed cream, 80px KitSansFont headline anchored left, sky pill CTA below, creator photograph or product screenshot right. ### Whitespace Philosophy The cream canvas *is* the whitespace. Kit deliberately under-fills sections so the warm ground reads as a continuous magazine spread. Section gutters run **96–128px** between major editorial blocks; minor blocks sit on 64–80px gaps; intra-section spacing uses 24–48px. Pricing and conversion zones tend to land on the deeper `#f2efe9` paper for emphasis. ### Section Cadence - Hero (cream + creator photograph) → Feature Ladder (3-up white cards on cream at 16px radius) → Pastel Feature Block (full-bleed peach / mint / sky / lilac / gold) → Editorial Pull-Quote (deeper paper inset with serif italic) → Pricing (cream → deeper paper transition for emphasis) → Footer (cream ground, slate-soft micro-text). - Pastel feature blocks appear once or twice per page as chromatic punctuation; 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, 40px H1 | | Tablet | 640–1024px | 2-column rails, 56px H1 | | Desktop | 1024–1280px | Full 12-col grid, 80px hero, 680px prose | | Wide | 1280–1320px | Site max width hits | | Ultra | > 1320px | Page locks to 1320, gutters expand | ### Touch Targets - Minimum tap target: 44×44px (WCAG AAA). - Pill buttons: 48px minimum height on mobile (14px vertical padding × 2 + line-height). - Email-capture pill: 52px minimum height to comfortably accommodate 16px input text + 14px vertical padding. ### Collapsing Strategy - **Header**: full nav at ≥1024px; hamburger sheet below. - **Hero**: 96px display → 80px hero → 64px → 48px → 40px across breakpoints. - **Capability grid**: 3-up at desktop, 2-up at tablet, 1-up at mobile. - **Body width**: 680px → fluid 90vw at mobile. - **Email-capture pair**: side-by-side at desktop, stacked at mobile. - **Section spacing**: 128px → 96px → 64px across sizes. ### Image Behavior - Creator photographs use `srcset` with 1x/2x/3x; aspect-ratio enforced to prevent layout shift. - Pastel chip cards use CSS `background-color` (no images) so they render instantly. - Lazy-loading on below-fold images; eager on hero. ### Container Queries Used inside capability cards to switch layout when card width crosses 320px (icon-left vs. icon-top). Used inside pricing tier cards to switch from horizontal to vertical feature lists. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | 0 | Flat — no shadow | Default page surface, hero, body sections | | 1 | Paper tier (`#f2efe9` inset on cream) | Inset feature bands, deeper paper sections | | 2 | Hairline + white card on cream | Editorial cards | | 3 | `rgba(30, 30, 30, 0.06) 0 12px 24px -8px` | Hover-lifted cards | | 4 | `rgba(30, 30, 30, 0.06) 0 4px 12px` | Sticky nav, dropdowns | | 5 | `rgba(30, 30, 30, 0.08) 0 24px 48px -16px` | Modals, popovers | ### Shadow Philosophy Kit's depth is **paper-tonal**. Cream `#f9f7f4` ground → deeper paper `#f2efe9` inset → white `#ffffff` raised card. The three-tier surface ladder provides most of the elevation; explicit shadows are reserved for hover states and overlays. When shadows do appear, they're warm-tinted at low opacity (`rgba(30, 30, 30, 0.06)` to `0.08`) — never neutral grey, never blue-tinted. The pastel chip set provides chromatic depth without ever spreading to the chrome itself, keeping the system's elevation language tonal-warm. ## Shapes | Tier | Value | Use | |---|---|---| | Micro (xs) | 4px | Inline chip corners, decorative dividers | | Standard (sm) | 6px | Compact pills, chip emphasis | | Comfortable (md) | 8px | Inputs (rectangular), code blocks, dropdowns | | Relaxed (lg) | 12px | Image masks, soft popover containers | | Featured (xl / card) | 16px | Cards, pastel chip cards, modals | | Pill | 9999px | Email-capture inputs, primary/secondary CTAs, status chips | Kit's signature shape is the **16px card** paired with the **full pill** on actions and email-capture. Cards default to 16px, buttons to full pills, image masks often round to 12px to match the editorial register. The system favours soft-rounded over sharp-rectangle, mirroring the chunky-humanist KitSansFont's own corner geometry. ## Components ### Buttons **Primary (Sky Pill)** - Background: `#44b1ff`. Text: `#1e1e1e` near-black, Libre Franklin 600 / 15px. - Padding: `14px 28px`. Radius: `9999px` (full pill). No border. - Hover: bg → `#2c8fd6`; text → `#ffffff`; transition `220ms ease-standard`. - Active: bg → `#1f6ca8`. - Use: Primary CTA — *Get started free, Start your newsletter, Try Kit.* **Secondary (Outlined Pill)** - Background: transparent. Text: `#1e1e1e`. Border: `1px solid #00000019`. Radius: `9999px`. - Same padding (14×28), font (Libre Franklin 600 / 15px) as primary. - Hover: bg → `#00000008`. - Use: Twin to primary — *Watch the demo, Read the docs.* **Dark (Cream-Section Alternate)** - Background: `#1e1e1e`. Text: `#f9f7f4`. No border. Pill radius. - Same shape as primary. - Hover: bg → `#0f0f0f`. - Use: Used on cream-light sections where the sky would feel out of place; rare alternate primary. **Ghost (Quiet)** - Background: transparent. Text: `#1e1e1e`. No border. - Padding: `8px 14px`. Libre Franklin 500 / 15px. - Hover: text → `#44b1ff` sky. - Use: Nav links, footer secondary actions. ### Cards **Editorial Card (White Paper)** - Background: `#ffffff`. Border: `1px solid #0000000f`. Radius: `16px`. Padding: `32px`. - Shadow: none — value-contrast separates white from cream. - Hover: border → `#00000019`; gentle 12px shadow at 6% black; transition `220ms`. - Use: Feature tile, capability rail entry, integration card. **Paper Inset Card** - Background: `#f2efe9` deeper paper. Border: `1px solid #0000000f`. Radius: `16px`. Padding: `32px`. - Use: Testimonial block, feature band, pricing-tier emphasis. **Pastel Chip Card** - Background: any pastel chip token (peach, mint, sky, lilac, gold). Border: none. Radius: `16px`. Padding: `40px 32px`. - Use: Feature category card — peach for tools, mint for growth, sky for audience, lilac for community, gold for pricing. ### Badges, Tags, Pills **Eyebrow Label** — no chrome, just type. Libre Franklin 600 / 12px / uppercase / 0.06em tracking, colour `#00000099`. Sits above section headlines. **Pastel Pill** — bg from the chip set (peach / mint / sky / lilac / gold), text `#1e1e1e` near-black, radius `9999px`, padding `6px 14px`. Feature category chips on capability tiles. ### Inputs / Forms **Email-Capture (Pill)** - Background: `#ffffff`. Border: `1px solid #00000019`. Radius: `9999px` full pill. Padding: `14px 24px`. - Font: Libre Franklin 400 / 16px. Placeholder: `#00000066`. - Focus: `0 0 0 2px #44b1ff` sky ring, border → `#44b1ff`. - Often paired with sky-blue CTA button hard-right; the email-capture pair is the most-used Kit component on the marketing site. **Standard (Rectangular)** - Background: `#ffffff`. Border: `1px solid #00000019`. Radius: `8px`. Padding: `12px 16px`. - Font: Libre Franklin 400 / 16px. Placeholder: `#00000066`. - Focus: `0 0 0 2px #44b1ff` sky ring. - Use: Form fields, search. ### Navigation - Header height `72px`. Background `#f9f7f4` cream (becomes opaque-cream-blur on scroll). - Logo: Kit wordmark in custom KitSansFont, near-black with a sky accent stroke. - Nav links: Libre Franklin 500 / 15px, colour `#1e1e1e`, padding `8px 14px`. Hover → `#44b1ff` sky. - Right-side CTA pair: ghost "Sign in" + sky pill "Get started free". - Mobile: full-screen sheet, links stack at 28px / KitSansFont 500. ### Optional Components **Pull Quote** — Libre Caslon Text 28px / 400 / italic, near-black `#1e1e1e` text, with a 4px sky vertical rule on the left edge or a pastel-chip block surrounding. **Footnote** — Libre Franklin 14px / 400, text-soft; sits on a thin border-subtle rule. **Code Block** — Mono 14px, bg `#f2efe9` deeper paper, radius `8px`, padding `16px 20px`, no border (paper fill provides separation). Inline code: same font, bg `rgba(0, 0, 0, 0.05)`, padding `2px 6px`, radius `4px`. **Tooltip** — bg `#1e1e1e`, text `#f9f7f4`, radius `6px`, padding `8px 12px`, font `13px / Libre Franklin 500`. **Modal** — bg `#ffffff`, radius `16px`, shadow `rgba(30, 30, 30, 0.08) 0 24px 48px -16px`, max-width `560px`. Cream backdrop overlay at 60% 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 (sky pill)**: bg `#44b1ff` → `#2c8fd6`; text `#1e1e1e` → `#ffffff`; transition `220ms ease-standard`. No lift, no scale. - **Button hover (outlined)**: bg transparent → `#00000008`. - **Card hover**: border deepens from `#0000000f` to `#00000019`; gentle 12px shadow at 6% black appears. - **Link hover**: colour `#44b1ff` → `#2c8fd6` over 120ms; underline thickens 1px → 2px. - **Input focus**: 2px sky ring fades in over 120ms; border darkens from 0.10 to full sky-blue. - **Pastel chip hover**: brightness shifts +5% (CSS filter); transition `220ms ease-standard`. ### 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. Pastel feature blocks reveal with a gentle scale-in (0.97 → 1.0) over 320ms ease-editorial. ### Reduced Motion `@media (prefers-reduced-motion: reduce)` — all transitions become opacity-only, durations halved. Translate animations and pastel scale-ins are disabled entirely; scroll-linked reveals snap to final state. ### Contrast Pairs - **`#1e1e1e` text on `#f9f7f4` bg**: 16.4:1 — AAA at all sizes. - **`#00000099` text on `#f9f7f4` bg**: 7.8:1 — AAA at body sizes. - **`#00000066` text on `#f9f7f4` bg**: 4.6:1 — AA at body sizes. - **`#1e1e1e` text on `#44b1ff` sky button**: 8.9:1 — AAA at body sizes. - **`#1e1e1e` text on `#b9e9c5` mint chip**: 12.1:1 — AAA. - **`#1e1e1e` text on `#ffd0ad` peach chip**: 13.4:1 — AAA. The near-black-on-pastel contrast is uniformly AAA across the chip set — the choice of light pastels (rather than saturated mid-pastels) keeps the chip cards accessibility-safe by default. ### Focus Indicators - Default focus ring: `0 0 0 2px #44b1ff` sky-blue with 2px offset on cream pages. - On dark surfaces (rare): `0 0 0 2px #f9f7f4` cream. - All interactive surfaces must have a visible focus state — no `outline: none` without a replacement. ### ARIA Patterns - **Navigation**: `