--- version: alpha name: "Netlify" description: "Netlify builds its identity on a brightness flip: a pure-white `#ffffff` marketing canvas that drops into near-black hero and feature bands where the H1 renders in near-white `#e6ecf2`. The display face is **Figtree** set heavy — weight 800 at 64px for the H1, a confident geometric-humanist sans that reads as friendly-engineered rather than brutalist. Body copy switches to **Instrument Sans**, a slightly more open grotesque, at near-black `#181a1c` (the brand's signature ink — not pure black). The chromatic signature is electric **teal `#32e6e2`** (rgb 50, 230, 226): it fills the primary `Sign up` CTA as a full-pill (360px radius) with near-black text on top, and shows up as the accent on dark grounds. Links lean a different direction entirely — indigo `#5653ed`, a cool blue-violet that anchors the secondary palette alongside lavender surface tints (`#e8e6f0`) and slate-grey hairline borders (`#cfd9de`). The result is a developer-platform register that feels modern and approachable: white-then-dark editorial bands, heavyweight humanist display, a single electric accent for action, and a calm indigo for navigation. Where Vercel commits to a single monochrome-blue discipline, Netlify runs a two-axis system — teal for action, indigo for links — over a white/near-black brightness alternation." colors: bg: "#ffffff" bg-hero: "#181a1c" bg-ink: "#0a0a0c" surface: "#e8e6f0" surface-accent: "#c6bfd9" text: "#181a1c" text-strong: "#000000" text-secondary: "#45455f" text-tertiary: "#757575" text-faint: "#9a9ab0" text-on-hero: "#e6ecf2" text-on-hero-soft: "#cfd9de" brand: "#32e6e2" brand-deep: "#014847" brand-hover: "#23d4d0" brand-soft: "rgba(50, 230, 226, 0.12)" on-brand: "#181a1c" link: "#5653ed" link-hover: "#403fc9" link-soft: "rgba(86, 83, 237, 0.10)" border: "#cfd9de" border-soft: "#e3e9ec" border-strong: "#aab6bd" shadow-ambient: "rgba(24, 26, 28, 0.04)" shadow-card: "rgba(24, 26, 28, 0.06)" shadow-elev: "rgba(24, 26, 28, 0.10)" shadow-deep: "rgba(24, 26, 28, 0.16)" scrim: "rgba(10, 10, 12, 0.50)" success: "#1aa179" success-soft: "rgba(26, 161, 121, 0.12)" warning: "#d98b00" warning-soft: "rgba(217, 139, 0, 0.12)" danger: "#e5484d" danger-soft: "rgba(229, 72, 77, 0.12)" info: "#5653ed" info-soft: "rgba(86, 83, 237, 0.10)" typography: display: fontFamily: "Figtree" fontSize: "80px" lineHeight: 1.55 letterSpacing: "-0.03em" body: fontFamily: "Instrument Sans" fontSize: "16px" lineHeight: 1.55 mono: fontFamily: "SFMono-Regular" rounded: button: "8px" card: "12px" pill: "360px" spacing: xs: "4px" sm: "8px" md: "16px" lg: "48px" xl: "96px" --- ## Overview ## Overview Netlify's marketing site is built on a single structural move: a **brightness flip**. The canvas is pure white `#ffffff` — not the near-white `#fafafa` that Vercel commits to, but full `#ffffff` — and it alternates with near-black `#181a1c` hero and feature bands. The hero lands dark, the H1 renders in near-white `#e6ecf2`, and as you scroll the page breathes between white editorial sections and dark high-contrast bands. The alternation is *brightness-based*, not colour-based: the page never shifts hue between sections, only luminance. This is the deploy-platform register — a site that wants to feel like a control surface, switching between the bright dashboard and the dark terminal. What carries the brand is the **type weight**. The display face is **Figtree**, set heavy at weight 800 — the H1 is 64px / 800 with tight `-0.025em` tracking. Figtree is a geometric-humanist sans (open-source, by Erik Kennedy) with rounded terminals and generous lowercase apertures; at 800 it reads as confident and friendly rather than brutalist. This is the key differentiator from Vercel's restrained 600-weight Geist: Netlify *wants* the headline to feel warm and emphatic. Body copy switches to **Instrument Sans**, a more open grotesque, at near-black `#181a1c` — the brand's signature ink, deliberately not pure black, which softens long-form reading. The Figtree-display / Instrument-body pairing is the typographic identity: heavy humanist display, calm open-grotesque body. The chromatic signature is **electric teal `#32e6e2`** (rgb 50, 230, 226). This is the single loudest colour in the system, and Netlify uses it where it counts most: the primary `Sign up` CTA is a full **360px pill** filled with teal, near-black `#181a1c` text on top. The teal is the action colour — it fills buttons, accents the dark hero, and signals "deploy / go." This is the opposite of Vercel's discipline: where Vercel withholds its blue from buttons and inverts CTAs to near-black, Netlify *fills* its primary action with the brand colour. The teal-on-near-black pill is the brand's most recognisable single component. The second chromatic axis is **indigo `#5653ed`** — a cool blue-violet reserved for links and navigation. The two-axis system (teal for action, indigo for links) is what makes Netlify distinctive: most dev-tool brands run a single accent hue, but Netlify separates "action" from "navigation" chromatically. The indigo carries through to lavender surface tints (`#e8e6f0` for inset cards), a slate-grey hairline border (`#cfd9de`), and the cool slate-violet of secondary text (`#45455f`). The supporting palette is cool and lavender-shaded; the action accent is hot teal. That tension — cool support, hot action — is the brand's chromatic engine. The atmospheric vocabulary that captures Netlify's feeling: *white-then-dark, brightness-flipped, Figtree-heavy, electric-teal-action, indigo-link, lavender-surface, slate-hairline, full-pill-CTA, deploy-register, friendly-engineered, near-black-ink, humanist-confident, two-axis-chroma.* Every surface lands like it was designed by a team who wanted their developer platform to feel approachable and modern — terminal-comfortable on the dark bands, dashboard-bright on the white ones, with a single electric accent that says *ship it*. **Key Characteristics** - Pure white `#ffffff` canvas alternating with near-black `#181a1c` hero / feature bands — brightness-based section rhythm - Near-black `#181a1c` body ink — the brand's signature, deliberately not pure black, for softer long-form reading - **Figtree** display set heavy at weight 800 — geometric-humanist, friendly-confident, 64px H1 with `-0.025em` tracking - **Instrument Sans** body — open grotesque, calm and precise, paired with the heavy Figtree display - Electric **teal `#32e6e2`** (rgb 50, 230, 226) as the action colour — fills the primary CTA pill - Primary CTA is a **360px full-pill** — teal fill, near-black `#181a1c` text, the signature action shape - Indigo `#5653ed` reserved for links and navigation — a separate chromatic axis from the teal action colour - Lavender-grey surface tint `#e8e6f0` for inset cards; cool slate-grey hairline `#cfd9de` for borders - Two-axis chroma: hot teal for action, cool indigo for links — over a cool lavender-shaded support palette - 1280px page width, 720px reading column; 64px sticky translucent-white top nav - Near-white `#e6ecf2` text and teal accents on the dark hero bands - System-aware dark mode (`--*--dark` token set) — indigo-tinted near-black canvas, lifted indigo links ## Colors ### Primary - **Canvas** (`#ffffff` → `--background-color--light`): the page background — pure white, full `#ffffff`. The bright half of the brightness flip; never cream, never near-white. - **Hero Band** (`#181a1c` → derived from `--color` ink): the near-black inversion band behind the hero H1 and dark feature sections. The dark half of the flip. - **Body Text** (`#181a1c` → `--color--light`): primary text and headlines — the brand's signature near-black ink at ~10% lightness. Slightly warm grain vs pure black; 15.3:1 against the canvas. - **Display Pure-Black** (`#000000` → `--color-primary--light`): rare absolute black for peak emphasis, logo wordmark, contrast-critical UI. ### Brand & Sub-Brand - **Electric Teal** (`#32e6e2` → CTA fill, rgb 50, 230, 226): the canonical brand colour and action accent. Fills the primary CTA pill, accents dark grounds. The system's single loudest colour. - **Deep Teal** (`#014847`): the near-black-teal used as *text* on bright-teal fills (e.g. the cookie-consent "Accept All" button) — a darker, more saturated teal that holds AAA contrast on the bright teal ground. - **Brand Hover** (`#23d4d0`): darker teal for primary-CTA hover on light grounds. - **Brand Soft** (`rgba(50, 230, 226, 0.12)`): soft teal wash for status pills and dark-ground accents. ### Accent - **Indigo** (`#5653ed` → `--color-link--light`): the link/navigation axis — a cool blue-violet. This is the *second* brand colour, distinct from the teal action colour. Anchors inline links, nav links, and the focus ring. - **Lavender Surface** (`#e8e6f0` → `--background-color-surface--light`): the indigo-shaded surface tint for inset cards and quiet groupings. - **Lavender Accent** (`#c6bfd9` → `--background-color-accent--light`): the second-tier accent surface, a deeper lavender for nested or emphasised inset blocks. ### Interactive - **Link** (`#5653ed` → `--color-link--light`): inline and nav links — indigo, no underline at rest, 1px underline on hover. - **Link Hover** (`#403fc9`): darker indigo on hover (paired with the growing underline). - **Selected** (`#5653ed` text on `rgba(86, 83, 237, 0.10)` background): active nav, current TOC entry, selected pricing tier. - **Focus** (`rgba(86, 83, 237, 0.18)` 3px ring): keyboard focus indicator — indigo, matching the link axis. - **Disabled** (`#9a9ab0` text): disabled controls drop to the faint neutral, no colour cue. ### Neutral Scale The neutral ramp is cool and lavender-shaded — it leans toward the indigo axis rather than pure grey: - **Pure White** (`#ffffff`) — canvas, card surface - **Border Soft** (`#e3e9ec`) — quietest separation - **Lavender Surface** (`#e8e6f0`) — inset card / surface tint - **Border** (`#cfd9de` → `--border-color--light`) — default hairline, cool slate grey - **Border Strong** (`#aab6bd`) — focused inputs, outlined buttons - **Text Faint** (`#9a9ab0`) — placeholder, disabled - **Text Tertiary** (`#757575` → `--color-text-weak`) — captions, meta, search heading - **Text Secondary** (`#45455f` → `--color-secondary--light`) — supporting copy, cool slate-violet - **Text** (`#181a1c` → `--color--light`) — primary text, headlines, near-black ink - **Text Strong** (`#000000`) — peak display ### Surface & Borders - **Canvas** (`#ffffff`) — the bright background - **Hero Band** (`#181a1c`) — the dark inversion band - **Bg Ink** (`#0a0a0c`) — deepest band; footer, peak-contrast section - **Lavender Surface** (`#e8e6f0`) — inset card surface on white sections - **Lavender Accent** (`#c6bfd9`) — second-tier accent surface - **Border Default** (`#cfd9de`) — cool slate-grey hairline at ~84% lightness - **Border Soft** (`#e3e9ec`) — quietest separation - **Border Strong** (`#aab6bd`) — outlined buttons, focused inputs ### Shadow Colors Netlify shadows are tinted with the body-ink colour (`rgba(24, 26, 28, …)`) rather than pure black, keeping them soft and warm on the white canvas. Cards lift via a single soft diffusion layer plus the slate hairline border. - `rgba(24, 26, 28, 0.04) 0 1px 3px` — ambient - `rgba(24, 26, 28, 0.06) 0 4px 16px -4px` — card (the signature soft lift) - `rgba(24, 26, 28, 0.10) 0 8px 28px -8px` — elevated dropdown - `rgba(24, 26, 28, 0.16) 0 16px 40px -12px` — popover - `rgba(24, 26, 28, 0.24) 0 28px 72px -16px` — modal ### Semantic - **Success** (`#1aa179` on `rgba(26, 161, 121, 0.12)`): build-success green — distinct from the brand teal so "deployed successfully" reads as a state, not a brand event. - **Warning** (`#d98b00` on `rgba(217, 139, 0, 0.12)`): advisory amber — rate limits, build warnings. - **Danger** (`#e5484d` on `rgba(229, 72, 77, 0.12)`): error red — build failures, destructive actions. - **Info** (`#5653ed` on `rgba(86, 83, 237, 0.10)`): info reads as the indigo link axis — informational banners and tips. ## Typography ### Font Family **Display**: `Figtree, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`. **Figtree** is an open-source geometric-humanist sans by Erik Kennedy, covering weights 300–900 in a variable file. Netlify sets it *heavy* — weight 800 is the display weight, used for the 64px H1 and section headers. The silhouette is friendly-engineered: rounded terminals, generous lowercase apertures, a single-storey `g`, a slightly geometric `a`. At 800 it reads as confident and warm rather than brutalist — the deliberate counter to terminal-grade display faces. This heavy-humanist display is the brand's primary typographic tell. **Body**: `"Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`. **Instrument Sans** is an open-grotesque sans (by Rajputana Custom Type) with more aperture and warmth than a neutral grotesque like Helvetica. Set at weight 400 for body copy in near-black `#181a1c`, it gives the reading register a calm, precise feel that balances the heavy Figtree display. The display/body contrast — heavy geometric-humanist over open grotesque — is what makes the type system feel modern-friendly rather than either brutalist or corporate. **Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace`. The system mono stack — Netlify doesn't ship a proprietary mono. Used for code blocks (rendered on the dark `#181a1c` ground with teal-tinted syntax), CLI commands, deploy-log output, and environment-variable names. **OpenType features**: Figtree and Instrument Sans both render with `kern` and `liga` always on. The mono stack adds `liga` and `calt` for code ligatures and `tnum` for tabular numerals in build-stat tables. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |------|------|------|--------|-------------|----------------|-------| | display-hero | Figtree | 80px | 800 | 1.0 | -0.03em | Top-of-page hero on dark band | | display-xl | Figtree | 64px | 800 | 1.04 | -0.025em | Major section opener | | display-lg | Figtree | 56px | 800 | 1.05 | -0.02em | Sub-section opener | | h1 | Figtree | 64px | 800 | 1.05 | -0.025em | Hero H1 — the canonical headline (near-white on dark) | | h2 | Figtree | 48px | 800 | 1.10 | -0.018em | Marketing section H2 | | h3 | Figtree | 32px | 700 | 1.18 | -0.012em | Card heading, article H3 | | h4 | Figtree | 24px | 700 | 1.25 | -0.006em | Sub-card heading | | h5 | Figtree | 20px | 600 | 1.30 | 0 | Inline emphasis heading | | eyebrow | Instrument Sans | 13px | 600 | 1.40 | 0.06em | Section pre-label, uppercase | | section-label | Instrument Sans | 14px | 600 | 1.40 | 0.04em | Marketing eyebrow, uppercase | | body-lg | Instrument Sans | 18px | 400 | 1.55 | 0 | Hero deck, lede paragraph | | body-md | Instrument Sans | 16px | 400 | 1.55 | 0 | Default body copy | | body-sm | Instrument Sans | 14px | 400 | 1.50 | 0 | Card body, dense-row body | | caption | Instrument Sans | 13px | 400 | 1.45 | 0 | Image caption, footer micro | | label | Instrument Sans | 13px | 500 | 1.40 | 0 | Form field label | | label-strong | Instrument Sans | 13px | 600 | 1.40 | 0.01em | Emphasised label | | button-md | Instrument Sans | 16px | 600 | 1.20 | 0 | Default button / CTA copy | | button-sm | Instrument Sans | 14px | 600 | 1.20 | 0 | Compact button | | nav-link | Instrument Sans | 15px | 500 | 1.20 | 0 | Top-nav links | | code-block | Mono | 14px | 400 | 1.60 | 0 | Code block content | | code-inline | Mono | 14px | 500 | 1.40 | 0 | Inline `code` references | | quote | Figtree | 24px | 500 | 1.35 | -0.01em | Pull-quote, testimonial | ### Principles - **Two-family discipline.** Figtree for display, Instrument Sans for body. The heavy-humanist-over-open-grotesque pairing is the system's identity; there is no third face beyond the system mono for code. - **Weight 800 is the display weight.** Where Vercel caps Geist at 600, Netlify pushes Figtree to 800 for the H1. The rationale is opposite: Netlify *wants* the heavy, friendly, emphatic headline; the geometric-humanist silhouette carries the weight without reading as shouty. - **Body holds at weight 400.** Instrument Sans at 400 keeps the reading register calm against the heavy display — the contrast between 800 display and 400 body is the typographic engine. - **Near-black ink, not pure black.** Body and headline copy is `#181a1c`, not `#000000`. The slight grain softens long-form reading; pure black is reserved for the logo and peak emphasis. - **Negative tracking compresses with size.** `-0.03em` at 80px, `-0.025em` at 64px, `-0.02em` at 56px, `-0.018em` at 48px, near-zero below 20px. - **16px body, 1.55 line-height.** Default reading size, capped at a 720px column for ~70-character lines. - **Uppercase eyebrows in body face.** Section eyebrows use Instrument Sans at 13–14px / 0.04–0.06em uppercase — Netlify keeps eyebrows in the body grotesque rather than a mono, a softer signal than terminal-mono labels. - **Headlines invert on dark bands.** On the dark hero, the Figtree H1 renders in near-white `#e6ecf2`; on white sections it's near-black `#181a1c`. The headline colour follows the band brightness. ## Layout ### Spacing System - Base unit: **4px** - Scale: `4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128` - Section padding (vertical): 96–128px for major marketing bands; 48–64px between dense sections; 24–32px between paragraphs and content blocks - Card internal padding: 24×28px on default cards; 28px on surface cards; 32px on dark cards; 20×24px on code blocks - Inter-card gutters: 24px between cards in 2-up; 16px in 3-up dense grids ### Grid & Container - Canonical max width: **1280px** for marketing sections; **1440px** for dense data layouts (framework grids, pricing comparisons) - 12-column grid with 24px gutters - Reading column caps at **720px** inside the wider container — ~70-character line length - Hero treatment: full-bleed dark `#181a1c` band, headline left-aligned (sometimes centered), near-white H1 with teal-and-glass CTA pair below ### Whitespace Philosophy The page balances dense developer-platform content (framework grids, deploy logs, pricing tables) with generous editorial breathing room (dark hero bands with 128px+ vertical padding). The brightness flip does the structural work: the eye reads white sections as editorial and dark sections as high-contrast feature showcases, so spacing reinforces band identity rather than fighting it. ### Section Cadence A typical Netlify page runs: 1. **Hero** — dark `#181a1c` band, 64px / 800 Figtree H1 in near-white `#e6ecf2`, 18px / 400 Instrument Sans body deck, dual CTA (teal primary pill + glass secondary pill) 2. **Feature Grid** — white `#ffffff` background, cards in 3-up with slate hairlines and soft shadows, Figtree 32px / 700 card titles + Instrument Sans body 3. **Deploy-Tour Band** — dark `#181a1c` background with a terminal-style code block and teal success accents, prose introducing the example 4. **Framework Grid** — white background, 4-up logo grid at `#45455f` secondary 5. **Surface-Card Section** — white background with lavender `#e8e6f0` inset cards grouping related features 6. **Pricing Cards** — white background, cards in 3-up, featured tier ringed in teal 7. **Dark Testimonial Band** — `#181a1c` inversion with near-white text and teal-accented dark cards 8. **Closing CTA** — dark band with centered teal primary pill, single dominant action 9. **Footer** — deepest `#0a0a0c` ink band, multi-column link grid in 14px / 400 near-white The alternation is *brightness-based* (dark → white → dark → white → near-black footer) rather than colour-based. ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <640px | Top nav collapses to logo + hamburger; hero H1 drops 64→36px; cards 1-up; CTA pair stacks vertically; framework grid 2-up | | Tablet | 640–1024px | Top nav keeps inline links (no mega-menu); hero H1 at 48px; cards 2-up; framework grid 3-up | | Desktop | 1024–1280px | Full nav with mega-menu; hero H1 at 64px; cards 3-up; framework grid 4-up | | Wide | 1280–1536px | Content caps at 1280; dense layouts expand to 1440 | ### Touch Targets - Buttons / CTA pills: 48px height (comfortably above the 44px minimum) - Nav links: 44×44px minimum tap area even at 15px text - Tag chips: 24px visual height with vertical padding for 44px effective tap area - Inputs: 44px height — finger-friendly by default ### Collapsing Strategy - **Top nav** at <1024px: primary links collapse into a hamburger sheet; mega-menus become accordion sections - **Hero CTA pair** at <640px: stacks vertically (teal primary above, glass/outlined secondary below) - **Card grids**: 4 → 3 → 2 → 1 columns - **Framework grid**: 4 → 3 → 2 columns; logos maintain aspect ratio - **Pricing cards** at <1024px: swipe-able horizontal scroll with snap points; otherwise 3-up at desktop - **Dark bands**: full-bleed at all sizes — the brightness flip holds on mobile ### Image Behavior Framework and customer logos use SVG with `currentColor` so they inherit the secondary-text colour and invert on dark bands. Product screenshots use `aspect-ratio` to prevent layout shift. Below-fold images are lazy-loaded; the hero is eager. ### Container Queries Used inside feature cards: when a card crosses ~360px width, an icon-above-title layout switches to icon-beside-title, letting the same component render compactly in 4-up grids and expansively in hero contexts. ## Elevation & Depth | Level | Treatment | Use | |-------|-----------|-----| | 0 — Flat | no shadow, canvas bg | Page canvas, dark bands, body sections | | 1 — Hairline | 1px `#cfd9de` slate border | Surface cards, framework cells, pricing cards | | 2 — Card | 1px border + `rgba(24, 26, 28, 0.06) 0 4px 16px -4px` | Default feature cards | | 3 — Elevated | `rgba(24, 26, 28, 0.10) 0 8px 28px -8px` | Dropdowns, hover-lifted cards | | 4 — Popover | `rgba(24, 26, 28, 0.16) 0 16px 40px -12px` | Menus, popovers, command surfaces | | 5 — Modal | scrim `rgba(10, 10, 12, 0.50)` + `rgba(24, 26, 28, 0.24) 0 28px 72px -16px` | Dialogs, sign-up modals | ### Shadow Philosophy Netlify shadows are **ink-tinted, soft, single-layer**. Rather than pure-black shadows, the stack uses the body-ink colour (`rgba(24, 26, 28, …)`) at low opacity, keeping the lift warm and quiet against the white canvas. Cards get a single soft 16px diffusion at 6% opacity plus the slate hairline border — the border does as much elevation work as the shadow. On dark bands, shadows give way to border-and-brightness contrast entirely (a `#181a1c` card on a `#181a1c` band separates via its `rgba(255,255,255,0.08)` border, not a shadow). Heavy shadows (popover, modal) are reserved for true overlay UI. The discipline keeps the white sections feeling bright and the dark sections feeling flat-and-terminal — shadows are a light-mode device. ## Shapes | Tier | Value | Use | |------|-------|-----| | Micro | 2px | Decorative dividers, focus indicators inside chips | | Small | 4px | Status badges, tag chips, cookie-banner buttons | | Comfortable | 8px | Inputs, secondary buttons, code chips | | Large | 12px | Cards, dashboard tiles, modals, code blocks | | Featured | 16px | Large feature cards, dark cards, hero panels | | Pill | 360px | The signature CTA pill — full-round on all primary/secondary buttons | Netlify's signature shape is the **360px full-pill** on every CTA. Unlike Vercel — which reserves the pill for hero contexts and uses 6px rectangles in compact chrome — Netlify pills *everything* in the action role: primary, secondary, and glass buttons are all full-round. The 360px value is effectively `9999px`; it's what the production CSS ships. Cards and code blocks use 12px, large feature surfaces use 16px, and dense chips use 4px. The contrast between fully-rounded buttons and gently-rounded cards is part of the friendly-but-structured feel. ## Components ### Buttons **Primary Pill** — `#32e6e2` electric-teal fill, near-black `#181a1c` text at 16px / 600 Instrument Sans, **360px full-pill radius**, 0×24px padding, 48px height. Hover deepens to `#23d4d0` over 240ms standard and scales the pill 1.0→1.02. Use case: *Sign up*, *Get started*, *Deploy now* — the dominant CTA. The teal-on-near-black pill is the brand's signature action component. (Note: this is the inverse of Vercel — Netlify *fills* the brand colour into the primary action.) **Secondary on Dark (Glass)** — `rgba(255, 255, 255, 0.10)` translucent white fill, teal `#32e6e2` label at 16px / 600, 1px border at `rgba(255, 255, 255, 0.14)`, **360px pill**, 48px height. Use case: the dark-hero secondary CTA — *Talk to sales* — a glass pill that pairs with the solid teal primary on the dark band. **Secondary Outlined (Light)** — `#ffffff` fill, near-black `#181a1c` label at 16px / 600, 1px border at `#cfd9de` (slate hairline), **360px pill**, 0×22px padding, 48px height. Hover deepens border to `#aab6bd`. Use case: *Learn more*, *Contact us* — paired adjacently with the primary teal pill on white sections. **Ghost (Quiet)** — Transparent background, near-black text at 15px / 500, 8px radius, 0×12px padding, 40px height. Hover fills with `#e8e6f0` lavender-surface. Use case: nav links, footer secondaries, in-card actions. **Link** — Transparent background, indigo `#5653ed` text at 15px / 500. No underline at rest; 1px underline appears on hover. Use case: text-link CTA — *See docs*, *View pricing*, *Read the changelog*. ### Cards **Default Card** — `#ffffff` fill, 1px slate hairline at `#cfd9de`, **12px radius**, 24×28px padding, single-layer soft shadow `rgba(24, 26, 28, 0.06) 0 4px 16px -4px`. The standard feature card on white sections. Hover lifts 2px and intensifies the shadow. **Surface Card** — `#e8e6f0` lavender-grey fill, no border, 12px radius, 28px padding, no shadow. Used for quiet groupings and inset blocks on white sections — the border-and-shadow-free alternative that leans on the lavender tint for separation. **Dark Card** — `#181a1c` near-black fill, `#e6ecf2` near-white text, 1px border at `rgba(255, 255, 255, 0.08)`, **16px radius**, 32px padding. Used for feature and testimonial cards on dark bands, with teal `#32e6e2` accents for icons and emphasis. ### Code Blocks **Code Block** — `#181a1c` near-black fill, near-white `#e6ecf2` mono text, **12px radius**, 20×24px padding, no border. Mono 14px / 400 / 1.60 line-height. Used for CLI commands, deploy-log output, and config snippets. Unlike Vercel's plain-grey marketing code blocks, Netlify renders code on the dark ground with teal-tinted syntax highlighting — the dark band makes the code feel terminal-native. **Inline Code** — `#e8e6f0` lavender-surface fill on light, near-black text at 14px / 500 mono, 4px radius, 2×6px padding. On dark bands, fills with `rgba(255, 255, 255, 0.08)`. ### Badges, Tags, Pills **Status Badge (Brand)** — `rgba(50, 230, 226, 0.16)` teal-soft fill, deep-teal `#014847` text at 12px / 600 Instrument Sans uppercase with `0.04em` tracking, 4px radius, 3×10px padding. Use case: `NEW`, `BETA`, `LIVE`, `PRO`. **Tag Chip** — `#e8e6f0` lavender fill, secondary `#45455f` text at 12px / 500, 4px radius, 3×10px padding. Use case: framework labels, region tags, version chips. **Deploy-Status Pill** — Used for live build/deploy state. Includes a 6px circle status dot at `success` green (deployed), `warning` amber (building), or `danger` red (failed) on the left, with a 13px / 500 Instrument Sans label. ### Inputs / Forms **Text Input** — `#ffffff` fill, near-black text at 16px / 400 Instrument Sans, 1px border at `#cfd9de`, **8px radius**, 44px height, 0×14px padding. Placeholder at `#9a9ab0` faint. On focus: border shifts to indigo `#5653ed` and a 3px translucent indigo ring appears (`rgba(86, 83, 237, 0.18) 0 0 0 3px`) — focus follows the *link* axis, not the teal action axis. **Select** — Same shape as text-input with a chevron icon at right (16px) at tertiary-text colour. **Search** — Same as text-input with a leading search glyph; the search-results heading uses `--color-text-weak` (`#757575`). ### Navigation **Top Nav** — `rgba(255, 255, 255, 0.85)` translucent white fill with `backdrop-filter: blur(12px) saturate(160%)`, **64px height**, 1px bottom hairline at `#e3e9ec`. On dark-hero pages the nav inverts to a translucent dark fill. Wordmark left in Figtree. Center: nav links (Platform, Solutions, Developers, Resources, Pricing) at 15px / 500 ghost-button style. Right: ghost `Log in` + primary teal `Sign up` pill. **Footer** — `#0a0a0c` near-black ink band (the deepest tier), multi-column link grid (Platform, Resources, Company, Legal) in Instrument Sans 14px / 400 at `#cfd9de` near-white. Wordmark + system-status indicator + theme switcher at the bottom. ### Optional / Decorative **Deploy-Log Block** — A terminal-style block on the dark band: `#181a1c` fill, mono output with teal `#32e6e2` success lines, amber warnings, red errors. Used to dramatise the deploy experience as marketing content. **Framework Grid** — Logos in a 4-up grid on white, each cell `#ffffff` with a slate hairline, 12px radius, logos at `#45455f` secondary. Hover tints the cell border to indigo. **Pricing Card** — Default card with hairline border. Tier name in Figtree 20px / 600, price in Figtree 48px / 800, feature list with teal checkmarks. Featured tier replaces the border with a teal 2px outline + teal primary pill at the bottom. **Modal** — `#ffffff` fill, 12px radius, 32px padding, modal shadow stack. Backdrop scrim at `rgba(10, 10, 12, 0.50)`. Max-width 480px for confirmations, 640px for dialogs. ### Easing Curves - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — Material-style; default for hover, focus, colour transitions - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — punchier exit; modal entry, toast slide-in - **Out-Soft**: `cubic-bezier(0.0, 0, 0.2, 1)` — gentle settle; dropdown reveal, scroll-reveal ### Duration Buckets | Bucket | Value | Use | |--------|-------|-----| | Fast | 150ms | Link underline grow, focus ring fade-in | | Standard | 240ms | Button hover, card lift, colour transitions | | Slow | 320ms | Scroll-reveal fade, dropdown reveal | | Page | 400ms | Route transitions | ### Per-Component Recipes - **Primary CTA hover**: teal bg deepens `#32e6e2` → `#23d4d0` over 240ms standard; pill scales 1.0→1.02. The teal-deepen plus subtle grow is the brand's most characteristic micro-interaction. - **Glass CTA hover**: white-translucent fill lifts `0.10` → `0.16` opacity over 240ms; teal label holds. - **Indigo link hover**: colour holds at `#5653ed`, 1px underline grows from 0 to full width over 150ms ease-standard. - **Card hover**: 2px translate-up + shadow intensifies (6% → 10%) over 240ms standard. - **Scroll-reveal**: sections fade in with a 16px rise over 320ms ease-out-soft when entering the viewport at 80% threshold. One-shot per section. - **Toast slide-in**: from top-right with 12px translate-down + opacity 0→1 over 240ms ease-emphasized. Auto-dismisses after 4s. - **Modal entry**: backdrop scrim fades over 240ms; modal content fades + scales from 0.96 to 1.0 over 320ms ease-emphasized. ### Page Transitions Page-to-page navigation uses a 400ms cross-fade with the sticky header staying static. Anchor links smooth-scroll over ~500ms ease-emphasized. The brightness flip between sections means scroll feels like moving through alternating bright/dark rooms. ### Reduced Motion Respects `prefers-reduced-motion: reduce`. All `translate` and `scale` transforms suppress — the CTA pill no longer scales on hover, cards no longer lift. Transitions degrade to opacity-only or instant render; durations halve. Scroll-reveal becomes static on-mount. Link hover underline appears instantly rather than growing. Nothing breaks; the brightness alternation and colour states are preserved. ### Contrast Pairs | Pair | Ratio | Level | |------|-------|-------| | `#181a1c` text on `#ffffff` canvas | 15.3 | AAA at all sizes | | `#45455f` secondary on `#ffffff` | 8.4 | AAA at body sizes | | `#757575` tertiary on `#ffffff` | 4.6 | AA at body sizes | | `#9a9ab0` faint on `#ffffff` | 2.6 | Fails AA — used only for placeholder/disabled | | `#5653ed` indigo link on `#ffffff` | 6.0 | AA at body / AAA at large; reinforced with hover-underline | | `#181a1c` text on `#32e6e2` teal pill | 12.3 | AAA at all sizes | | `#014847` deep-teal on `#32e6e2` teal fill | 6.8 | AA at body / AAA at large | | `#e6ecf2` near-white on `#181a1c` hero | 14.6 | AAA at all sizes | | `#32e6e2` teal on `#181a1c` hero | 9.7 | AAA at large / AA at small | | `#cfd9de` near-white on `#181a1c` hero | 11.8 | AAA at all sizes | The teal pill's near-black `#181a1c` label is the brand's strongest contrast choice — 12.3:1 — which is precisely why Netlify fills the CTA with the bright teal and sets *dark* text on top rather than white. The indigo link at 6.0:1 passes AA at body sizes; it's reinforced with a hover-underline so colour-blind users can identify links by behaviour. ### Focus Indicators Focus ring is `3px solid rgba(86, 83, 237, 0.18)` translucent indigo with 2px outline-offset. Focus follows the *link* axis (indigo), not the teal action axis — keeping the keyboard-focus signal chromatically distinct from the teal CTA fill so a focused-but-not-the-CTA element never reads as the primary action. ### ARIA Patterns - **Top nav**: `