light·dark·sans·developer·deploy·modern

DESIGN.md inspired by Netlify

White canvas, dark hero, Figtree-heavy 800 display — electric-teal pill CTAs, indigo links.

By webdesignhot · www.netlify.com↗

$npx @webdesignhot/design-md add netlify

Learn more about the CLI →

Live preview ↗⌘ Download for Claude Raw .md ↓

try on →

theme

1440 × 900

mobile · 390 × 844

Tokenswebdesignhot/0.2

theme: light

Typography

Ship faster than ever.

display-heroFigtree80pxw800-0.03em

Ship faster than ever.

display-xlFigtree64pxw800-0.025em

Ship faster than ever.

h1Figtree64pxw800-0.025em

Ship faster than ever.

display-lgFigtree56pxw800-0.02em

Built for teams that ship.

h2Figtree48pxw800-0.018em

A complete kit

h3Figtree32pxw700-0.012em

The quick brown fox jumps over the lazy dog.

h4Figtree24pxw700-0.006em

The quick brown fox jumps over the lazy dog.

quoteFigtree24pxw500-0.01em

The quick brown fox jumps over the lazy dog.

h5Figtree20pxw6000

The quick brown fox jumps over the lazy dog.

body-lg"Instrument Sans"18pxw4000

The quick brown fox jumps over the lazy dog.

body-md"Instrument Sans"16pxw4000

The quick brown fox jumps over the lazy dog.

button-md"Instrument Sans"16pxw6000

The quick brown fox jumps over the lazy dog.

nav-link"Instrument Sans"15pxw5000

OUR DESIGN SYSTEM

section-label"Instrument Sans"14pxw6000.04em

The quick brown fox jumps over the lazy dog.

body-sm"Instrument Sans"14pxw4000

The quick brown fox jumps over the lazy dog.

button-sm"Instrument Sans"14pxw6000

npx @webdesignhot/design-md add stripe

code-blockui-monospace14pxw4000

npx @webdesignhot/design-md add stripe

code-inlineui-monospace14pxw5000

The quick brown fox jumps over the lazy dog.

eyebrow"Instrument Sans"13pxw6000.06em

OUR DESIGN SYSTEM

caption"Instrument Sans"13pxw4000

OUR DESIGN SYSTEM

label"Instrument Sans"13pxw5000

OUR DESIGN SYSTEM

label-strong"Instrument Sans"13pxw6000.01em

Spacing

step-04px
step-18px
step-212px
step-316px
step-424px
step-532px
step-648px
step-764px
step-896px
step-9128px

Radius

micro2px
sm4px
md8px
lg12px
xl16px
pill360px

Components

Text link →

Card previewA complete kit — everything your product needs.Hero, pricing, FAQ, dashboard, docs — every layout your product needs.

Email

NewStablev1.0

Design roles7/8 mapped · webdesignhot/0.2

Maps the 8 canonical role names to this entry's actual tokens. Use these to plug the design into role-aware tools — shadcn/ui themes, role-aware Tailwind plugins, atelier-lint — without hard-coding token names.

background→bg
foreground→text
primary→brand
primary-foreground→on-brand
accent→—
muted→text-secondary
border→border
ring→brand

Lineage & influences

Netlify's design system runs a brightness flip — pure-white `#ffffff` marketing canvas alternating with near-black `#181a1c` hero and feature bands — paired with a two-axis colour discipline that distinguishes it from monochrome-blue dev-tool peers. The display face is **Figtree** set heavy (weight 800 at 64px H1), a geometric-humanist sans that reads as friendly-engineered; body copy is **Instrument Sans**, a more open grotesque, in the brand's signature near-black ink `#181a1c` (not pure black). The chromatic signature is electric **teal `#32e6e2`** (rgb 50, 230, 226) — it fills the primary `Sign up` CTA as a 360px full-pill with near-black text, and accents dark grounds. Links take a separate direction: **indigo `#5653ed`**, a cool blue-violet that anchors navigation and inline links over lavender surface tints (`#e8e6f0`) and slate-grey hairlines (`#cfd9de`). Where Vercel reserves a single blue for links-and-focus-only and inverts CTAs to near-black, Netlify *fills* its primary action with the electric teal and reserves indigo for links — a louder, friendlier action language over the same white/near-black brightness alternation. The lineage traces to the Jamstack-era developer-platform aesthetic Netlify itself helped define, plus the broader humanist-geometric-display trend (Figtree, Instrument Sans) that softened dev-tool branding away from pure terminal-brutalism.

Figtree (Erik Kennedy, open-source)↗
The display identity — heavy geometric-humanist sans at weight 800; the friendly-engineered headline silhouette.
Instrument Sans (Rajputana Custom Type)↗
Open-grotesque body face; more aperture and warmth than a neutral grotesque, paired with Figtree for the calm-precise reading register.
Vercel↗
Adjacent deploy-platform peer; shares the white-canvas + near-black brightness discipline, but Netlify fills its CTA with brand colour where Vercel withholds it.
Jamstack (the architecture Netlify coined)↗
The developer-platform-as-editorial register — deploy logs, build status, and framework grids treated as marketing content.
Stripe↗
Developer-product-as-magazine layout heritage; dense feature bands and gradient accents that the modern deploy-platform marketing surface descends from.
Radix Colors↗
Systematic semantic ramp thinking — paired light/dark token sets (--*--light / --*--dark) with accessible step contrast.

Export4 formats · paste-ready

Tailwind

theme.extend block for tailwind.config.js

tailwind.config.js

CSS variables

:root { --bg, --text, --brand, … } you can paste anywhere

design.css

DTCG JSON

W3C Design Tokens Community Group format

design.tokens.json

Figma Variables

Importable into Figma → Variables → Import

figma-variables.json

Google DESIGN.md

Portable DESIGN.md Alpha core format

design.md

The file

---
name: Netlify
tagline: 'White canvas, dark hero, Figtree-heavy 800 display — electric-teal pill CTAs, indigo links.'
updated_at: 2026-05-29T21:44:05.216Z
published_at: 2026-05-29T21:44:05.216Z
author: webdesignhot
source_url: https://www.netlify.com
spec: webdesignhot/0.2
profile: catalog
quality: curated
featured: false
categories: [dev-tools, saas]
tags: [light, dark, sans, developer, deploy, modern]
preview_swatch: ['#ffffff', '#32e6e2', '#5653ed']
related: [vercel, supabase, render]
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.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  muted: text-secondary
  border: border
  ring: brand

themes:
  default: light
  available: [light, dark]
  switch-via: 'data-theme attribute on <html> (--light / --dark token suffixes); persisted in localStorage; respects prefers-color-scheme on first paint'

colors:
  light:
    bg: '#ffffff'                  # page canvas — pure white, --background-color--light
    bg-hero: '#181a1c'             # near-black hero / feature inversion band
    bg-ink: '#0a0a0c'              # deepest band — footer, peak-contrast section
    surface: '#e8e6f0'             # lavender-grey card / inset surface, --background-color-surface--light
    surface-accent: '#c6bfd9'      # second-tier accent surface, --background-color-accent--light
    text: '#181a1c'               # primary text — the brand's signature near-black ink
    text-strong: '#000000'         # peak display / pure black, --color-primary--light
    text-secondary: '#45455f'      # supporting copy — cool slate-violet, --color-secondary--light
    text-tertiary: '#757575'       # captions, meta, search heading (--color-text-weak)
    text-faint: '#9a9ab0'          # placeholder, disabled, faintest meta
    text-on-hero: '#e6ecf2'        # near-white H1/body on the dark hero band
    text-on-hero-soft: '#cfd9de'   # secondary text on dark band, mirrors --color--dark
    brand: '#32e6e2'               # the signature electric teal — primary CTA fill (rgb 50,230,226)
    brand-deep: '#014847'          # deep-teal text on bright-teal fills (e.g. cookie CTA)
    brand-hover: '#23d4d0'         # darker teal, primary CTA hover
    brand-soft: 'rgba(50, 230, 226, 0.12)'   # soft teal wash on dark grounds, status pills
    on-brand: '#181a1c'            # near-black text on the teal pill
    link: '#5653ed'               # inline + nav link colour — indigo, --color-link--light
    link-hover: '#403fc9'          # darker indigo on hover
    link-soft: 'rgba(86, 83, 237, 0.10)'     # indigo wash for selected nav / active TOC
    border: '#cfd9de'             # default hairline — cool slate grey, --border-color--light
    border-soft: '#e3e9ec'         # quietest separation
    border-strong: '#aab6bd'       # focused inputs, outlined buttons
    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)'

  dark:
    bg: '#181821'                  # near-black indigo-tinted canvas, --background-color--dark
    bg-elev: '#20202c'             # subtle elevation — section bands
    bg-deeper: '#101019'           # deepest tier — footer, code fills
    surface: 'rgba(98, 71, 230, 0.10)'  # indigo-tinted card surface, --background-color-surface--dark
    surface-accent: 'rgba(200, 205, 254, 0.08)'  # second-tier accent, --background-color-accent--dark
    text: '#cfd9de'               # primary text — cool near-white, --color--dark
    text-strong: '#f0f1ff'         # peak display — indigo-white, --color-primary--dark
    text-secondary: '#8b8dac'      # supporting copy — muted lavender, --color-secondary--dark
    text-tertiary: '#6c6e88'       # captions, meta
    text-faint: '#4d4f66'          # placeholder, disabled
    brand: '#32e6e2'               # teal unchanged — reads vividly on dark
    brand-deep: '#014847'
    brand-hover: '#5cf0ec'         # lifted teal on dark
    brand-soft: 'rgba(50, 230, 226, 0.16)'
    on-brand: '#181a1c'            # near-black text on teal pill (held across themes)
    link: '#8886ff'               # lifted indigo for legibility on dark, --color-link--dark
    link-hover: '#a4a2ff'
    link-soft: 'rgba(136, 134, 255, 0.14)'
    border: 'rgba(200, 205, 254, 0.18)'  # translucent indigo hairline, --border-color--dark
    border-soft: 'rgba(200, 205, 254, 0.10)'
    border-strong: 'rgba(200, 205, 254, 0.30)'
    shadow-ambient: 'rgba(0, 0, 0, 0.40)'
    shadow-card: 'rgba(0, 0, 0, 0.50)'
    shadow-elev: 'rgba(0, 0, 0, 0.60)'
    shadow-deep: 'rgba(0, 0, 0, 0.72)'
    scrim: 'rgba(0, 0, 0, 0.70)'
    success: '#3dd9a3'
    success-soft: 'rgba(61, 217, 163, 0.16)'
    warning: '#f0b429'
    warning-soft: 'rgba(240, 180, 41, 0.16)'
    danger: '#ff6369'
    danger-soft: 'rgba(255, 99, 105, 0.18)'
    info: '#8886ff'
    info-soft: 'rgba(136, 134, 255, 0.14)'

gradients:
  light:
    gradient-teal: 'linear-gradient(135deg, #32e6e2 0%, #5653ed 100%)'   # teal→indigo brand sweep
  dark:
    gradient-teal: 'linear-gradient(135deg, #32e6e2 0%, #8886ff 100%)'
typography:
  display:
    family: 'Figtree, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
    weights: [500, 600, 700, 800]
    opentype-features: ['kern', 'liga']
  body:
    family: '"Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
    weights: [400, 500, 600]
    opentype-features: ['kern', 'liga']
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace'
    weights: [400, 500]
    opentype-features: ['liga', 'calt', 'tnum']
  scale:
    display-hero:    { size: 80, weight: 800, lineHeight: 1.0,  tracking: '-0.03em',  family: display }
    display-xl:      { size: 64, weight: 800, lineHeight: 1.04, tracking: '-0.025em', family: display }
    display-lg:      { size: 56, weight: 800, lineHeight: 1.05, tracking: '-0.02em',  family: display }
    h1:              { size: 64, weight: 800, lineHeight: 1.05, tracking: '-0.025em', family: display }
    h2:              { size: 48, weight: 800, lineHeight: 1.10, tracking: '-0.018em', family: display }
    h3:              { size: 32, weight: 700, lineHeight: 1.18, tracking: '-0.012em', family: display }
    h4:              { size: 24, weight: 700, lineHeight: 1.25, tracking: '-0.006em', family: display }
    h5:              { size: 20, weight: 600, lineHeight: 1.30, tracking: '0',        family: display }
    eyebrow:         { size: 13, weight: 600, lineHeight: 1.40, tracking: '0.06em',   family: body, transform: uppercase }
    section-label:   { size: 14, weight: 600, lineHeight: 1.40, tracking: '0.04em',   family: body, transform: uppercase }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-md:         { size: 16, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.50, tracking: '0',        family: body }
    caption:         { size: 13, weight: 400, lineHeight: 1.45, tracking: '0',        family: body }
    label:           { size: 13, weight: 500, lineHeight: 1.40, tracking: '0',        family: body }
    label-strong:    { size: 13, weight: 600, lineHeight: 1.40, tracking: '0.01em',   family: body }
    button-md:       { size: 16, weight: 600, lineHeight: 1.20, tracking: '0',        family: body }
    button-sm:       { size: 14, weight: 600, lineHeight: 1.20, tracking: '0',        family: body }
    nav-link:        { size: 15, weight: 500, lineHeight: 1.20, tracking: '0',        family: body }
    code-block:      { size: 14, weight: 400, lineHeight: 1.60, tracking: '0',        family: mono, opentype: ['liga', 'calt'] }
    code-inline:     { size: 14, weight: 500, lineHeight: 1.40, tracking: '0',        family: mono }
    quote:           { size: 24, weight: 500, lineHeight: 1.35, tracking: '-0.01em',  family: display }

radius:
  micro: 2
  sm: 4           # status badges, cookie-banner buttons, dense chips
  md: 8           # inputs, secondary buttons, code chips
  lg: 12          # cards, dashboard tiles, modals
  xl: 16          # large feature cards, hero panels
  pill: 360       # the signature CTA pill — full-round at 360px (effectively 9999)

spacing:
  base: 4
  scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128]

layout:
  page-width: 1280
  dense-width: 1440
  prose-width: 720
  header-height: 64

components:
  button-primary:
    bg: '#32e6e2'
    color: '#181a1c'
    radius: 360
    padding: '0 24px'
    height: 48
    font: 'Instrument Sans 16px / 600'
    hover-bg: '#23d4d0'
    use: 'Primary CTA — electric-teal full-pill with near-black text. Sign up, Get started. The signature action shape.'
  button-secondary-on-dark:
    bg: 'rgba(255, 255, 255, 0.10)'
    color: '#32e6e2'
    radius: 360
    padding: '0 24px'
    height: 48
    border: '1px solid rgba(255, 255, 255, 0.14)'
    font: 'Instrument Sans 16px / 600'
    use: 'Secondary CTA on dark hero — translucent white glass pill with teal label. Talk to sales.'
  button-secondary:
    bg: '#ffffff'
    color: '#181a1c'
    border: '1px solid #cfd9de'
    radius: 360
    padding: '0 22px'
    height: 48
    font: 'Instrument Sans 16px / 600'
    hover-border: '#aab6bd'
    use: 'Outlined twin on white — slate-grey hairline, near-black label. Learn more, Contact us.'
  button-ghost:
    bg: 'transparent'
    color: '#181a1c'
    radius: 8
    padding: '0 12px'
    height: 40
    font: 'Instrument Sans 15px / 500'
    hover-bg: '#e8e6f0'
    use: 'Quiet third action — nav links, footer secondaries, in-card actions.'
  button-link:
    bg: 'transparent'
    color: '#5653ed'
    underline: 'none at rest, 1px on hover'
    font: 'Instrument Sans 15px / 500'
    use: 'Text-link CTA — indigo, hover reveals underline. See docs, View pricing.'
  card:
    bg: '#ffffff'
    border: '1px solid #cfd9de'
    radius: 12
    padding: '24px 28px'
    shadow: 'rgba(24, 26, 28, 0.06) 0 4px 16px -4px'
    use: 'Default feature card — white fill, slate hairline border, soft single-layer shadow.'
  card-surface:
    bg: '#e8e6f0'
    border: 'none'
    radius: 12
    padding: '28px'
    shadow: 'none'
    use: 'Lavender-grey inset card — quiet grouping on white sections, no border, no shadow.'
  card-dark:
    bg: '#181a1c'
    color: '#e6ecf2'
    border: '1px solid rgba(255, 255, 255, 0.08)'
    radius: 16
    padding: '32px'
    use: 'Inverted feature / testimonial card on dark band — near-white text, teal accents.'
  input:
    bg: '#ffffff'
    color: '#181a1c'
    radius: 8
    height: 44
    padding: '0 14px'
    border: '1px solid #cfd9de'
    font: 'Instrument Sans 16px / 400'
    placeholder-color: '#9a9ab0'
    focus-border: '#5653ed'
    focus-ring: '0 0 0 3px rgba(86, 83, 237, 0.18)'
    use: 'Form fields, search bar — 44px height, 8px radius, indigo focus ring.'
  badge-brand:
    bg: 'rgba(50, 230, 226, 0.16)'
    color: '#014847'
    radius: 4
    padding: '3px 10px'
    font: 'Instrument Sans 12px / 600 / uppercase / 0.04em'
    use: 'Status pill on light — NEW, BETA, LIVE. Teal wash with deep-teal caps.'
  badge-tag:
    bg: '#e8e6f0'
    color: '#45455f'
    radius: 4
    padding: '3px 10px'
    font: 'Instrument Sans 12px / 500'
    use: 'Tag chip — framework, region, version labels in lavender-grey.'
  nav-top:
    bg: 'rgba(255, 255, 255, 0.85)'
    backdrop-filter: 'blur(12px) saturate(160%)'
    height: 64
    border-bottom: '1px solid #e3e9ec'
    use: 'Sticky top nav — translucent white fill with blur (dark inversion on dark hero pages).'
  code-block:
    bg: '#181a1c'
    color: '#e6ecf2'
    radius: 12
    padding: '20px 24px'
    border: 'none'
    font: 'ui-monospace 14px / 400 / 1.60 line-height'
    use: 'Code-tour block — near-black fill with near-white mono, teal-tinted syntax highlights.'

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  ease-out-soft: 'cubic-bezier(0.0, 0, 0.2, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  duration-page: 400
  button-hover: 'teal bg deepens 240ms standard; pill scales 1.0→1.02 on hover'
  link-hover: 'underline grows 150ms; indigo holds'
  card-hover: 'shadow tier intensifies + 2px lift over 240ms standard'
  scroll-reveal: 'sections fade + 16px rise over 320ms ease-out-soft entering viewport'
  reduced-motion: 'respects prefers-reduced-motion: reduce — transforms suppress, opacity-only fades, durations halve'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  none: 'none'
  ambient: 'rgba(24, 26, 28, 0.04) 0 1px 3px'
  card: 'rgba(24, 26, 28, 0.06) 0 4px 16px -4px'
  elevated: 'rgba(24, 26, 28, 0.10) 0 8px 28px -8px'
  popover: 'rgba(24, 26, 28, 0.16) 0 16px 40px -12px'
  modal: 'rgba(24, 26, 28, 0.24) 0 28px 72px -16px'
  ring: '0 0 0 3px rgba(86, 83, 237, 0.18)'

accessibility:
  contrast-text-on-bg: 15.3                  # #181a1c on #ffffff — AAA at all sizes
  contrast-text-secondary-on-bg: 8.4         # #45455f on #ffffff — AAA at body sizes
  contrast-text-tertiary-on-bg: 4.6          # #757575 on #ffffff — AA at body sizes
  contrast-link-on-bg: 6.0                    # #5653ed indigo on #ffffff — AA at body / AAA at large
  contrast-on-brand-on-teal: 12.3            # #181a1c on #32e6e2 teal pill — AAA at all sizes
  contrast-text-on-hero: 14.6                 # #e6ecf2 on #181a1c hero — AAA at all sizes
  contrast-teal-on-hero: 9.7                  # #32e6e2 teal on #181a1c hero — AAA at large / AA small
  focus-ring: '3px solid rgba(86, 83, 237, 0.18) indigo + 2px offset'
  reduced-motion-honored: true
  touch-target-min: 44

dark-mode: optional                          # Netlify ships a system-aware dark token set (--*--dark vars)

colors-dark:
  bg: '#181821'                  # near-black indigo-tinted canvas
  bg-elev: '#20202c'             # subtle elevation
  bg-deeper: '#101019'           # deepest tier
  text: '#cfd9de'               # cool near-white body
  text-strong: '#f0f1ff'         # peak display indigo-white
  text-secondary: '#8b8dac'      # supporting lavender
  brand: '#32e6e2'               # teal unchanged
  on-brand: '#181a1c'            # near-black text on teal pill
  link: '#8886ff'               # lifted indigo
  border: 'rgba(200, 205, 254, 0.18)'

lineage:
  summary: 'Netlify''s design system runs a brightness flip — pure-white `#ffffff` marketing canvas alternating with near-black `#181a1c` hero and feature bands — paired with a two-axis colour discipline that distinguishes it from monochrome-blue dev-tool peers. The display face is **Figtree** set heavy (weight 800 at 64px H1), a geometric-humanist sans that reads as friendly-engineered; body copy is **Instrument Sans**, a more open grotesque, in the brand''s signature near-black ink `#181a1c` (not pure black). The chromatic signature is electric **teal `#32e6e2`** (rgb 50, 230, 226) — it fills the primary `Sign up` CTA as a 360px full-pill with near-black text, and accents dark grounds. Links take a separate direction: **indigo `#5653ed`**, a cool blue-violet that anchors navigation and inline links over lavender surface tints (`#e8e6f0`) and slate-grey hairlines (`#cfd9de`). Where Vercel reserves a single blue for links-and-focus-only and inverts CTAs to near-black, Netlify *fills* its primary action with the electric teal and reserves indigo for links — a louder, friendlier action language over the same white/near-black brightness alternation. The lineage traces to the Jamstack-era developer-platform aesthetic Netlify itself helped define, plus the broader humanist-geometric-display trend (Figtree, Instrument Sans) that softened dev-tool branding away from pure terminal-brutalism.'
  influences:
    - name: 'Figtree (Erik Kennedy, open-source)'
      role: 'The display identity — heavy geometric-humanist sans at weight 800; the friendly-engineered headline silhouette.'
      url: 'https://fonts.google.com/specimen/Figtree'
    - name: 'Instrument Sans (Rajputana Custom Type)'
      role: 'Open-grotesque body face; more aperture and warmth than a neutral grotesque, paired with Figtree for the calm-precise reading register.'
      url: 'https://fonts.google.com/specimen/Instrument+Sans'
    - name: 'Vercel'
      role: 'Adjacent deploy-platform peer; shares the white-canvas + near-black brightness discipline, but Netlify fills its CTA with brand colour where Vercel withholds it.'
      url: 'https://vercel.com'
    - name: 'Jamstack (the architecture Netlify coined)'
      role: 'The developer-platform-as-editorial register — deploy logs, build status, and framework grids treated as marketing content.'
      url: 'https://jamstack.org'
    - name: 'Stripe'
      role: 'Developer-product-as-magazine layout heritage; dense feature bands and gradient accents that the modern deploy-platform marketing surface descends from.'
      url: 'https://stripe.com'
    - name: 'Radix Colors'
      role: 'Systematic semantic ramp thinking — paired light/dark token sets (--*--light / --*--dark) with accessible step contrast.'
      url: 'https://www.radix-ui.com/colors'
---

## 1. Visual Theme & Atmosphere

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

## 2. Color Palette & Roles

### 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.

## 3. Typography Rules

### 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.

## 4. Component Stylings

### 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.

## 5. Layout Principles

### 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.

## 6. Shapes & Radius Scale

| 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.

## 7. Depth & Elevation

| 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.

## 8. Interaction & Motion

### 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.

## 9. Accessibility & A11y

### 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**: `<nav aria-label="Primary">` landmark with skip-link to `<main>`. Mega-menu dropdowns use `aria-haspopup="true" aria-expanded`.
- **Deploy-status pills**: `aria-live="polite"` with descriptive text ("Deploy succeeded", "Building", "Deploy failed").
- **Pricing tables**: proper `<table>` semantics with `<th scope="col">` for tiers and `<th scope="row">` for features.
- **Code / deploy-log blocks**: `<pre><code role="region" aria-label="Deploy log" tabindex="0">` — focusable, labelled.
- **Modal**: `role="dialog" aria-modal="true" aria-labelledby` with focus trap and Esc-to-close.
- **Toast notifications**: `aria-live="polite"` for non-critical, `aria-live="assertive"` for build failures.
- **System-status indicator** in footer: `aria-live="polite"` ("All systems operational").

### Keyboard Navigation

- Tab order: skip-link → wordmark → primary nav → search → auth CTAs → main content → footer
- Arrow keys navigate inside mega-menu dropdowns
- `Esc` closes modals and dropdown menus
- Code / deploy-log blocks are focusable (`tabindex="0"`)
- Pricing tier toggles use radio-button keyboard semantics

### Screen Reader Hints

- Uppercase eyebrows use `text-transform: uppercase` (CSS) so screen readers announce natural-case
- Decorative hero illustrations carry `aria-hidden="true"`
- Brand wordmark uses `aria-label="Netlify"`
- Deploy-status pills announce state changes via `aria-live`
- Pricing values announce with currency unit for screen readers

### Reduced Motion

All transitions degrade to opacity-only or instant. CTA pill scale and card lift suppress. Modal scale-in becomes instant. Scroll-reveal becomes static on-mount. The brand experience preserves visual consistency under reduced-motion — nothing breaks.

## 10. Responsive Behavior

### 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.

## 11. Content & Voice

### Tone

**Friendly, capable, deploy-forward.** Netlify writes like a developer-relations engineer who's genuinely excited to get you shipping — warmer and more enthusiastic than Vercel's clipped engineering register, but still technically precise. Headlines are inviting statements ("Push your ideas to the web"); subheads explain the platform capability; product copy uses developer vocabulary (build, deploy, edge, function) without over-translating. The voice sits between consumer-product warmth and engineering-peer precision — approachable but credible.

### Microcopy Patterns

- **Button verbs**: *Sign up*, *Get started*, *Deploy now*, *Talk to sales*, *Read the docs*, *View pricing*. Action-forward, deploy-flavoured.
- **Error messages**: *"Build failed — check your build command in `netlify.toml` and redeploy."* — specific, accountable, includes the exact file.
- **Success confirmations**: *"Deploy succeeded."* / *"Site is live."* — brief, declarative, deploy-celebratory without being saccharine.
- **Empty states**: *"No sites yet. Connect a Git repository or drag-and-drop a folder to deploy."* — instruction-led, includes both paths.
- **Field labels**: *Email*, *Site name*, *Build command*, *Publish directory*. Single concept where possible.
- **Loading states**: *"Building…"*, *"Deploying…"*, *"Going live…"* — context-specific, deploy-themed, never just "Loading…"

### Empty States

The dashboard empty state ("No sites yet — connect a repository or drag-and-drop to deploy") is the tonal anchor: name the state, offer the next step, lead with the deploy verb. Marketing-site empty states follow the same convention.

### CTA Verb Conventions

- Primary on hero: *Sign up*, *Get started*, *Deploy now*
- Secondary: *Talk to sales*, *Read the docs*, *Contact us*
- Tertiary text: *See pricing*, *Browse integrations*, *View the changelog*
- Avoided: *Click here*, *Submit*, *Buy now*. Netlify uses deploy-flavoured outcome verbs.

## 12. Dark Mode & Theming

**System-aware dark mode.** Netlify ships a complete paired token set — every light token has a `--*--dark` companion — that respects `prefers-color-scheme: dark` and offers a manual theme switcher in the footer. The dark mode is a full token swap, not the same as the dark *bands* that appear inside light mode (those are intentional inversions within the light theme; dark mode re-themes the entire canvas).

Dark-mode token swap:

- **canvas**: `#ffffff` → `#181821` (indigo-tinted near-black, not pure black)
- **bg-elev**: `#e8e6f0` → `rgba(98, 71, 230, 0.10)` (indigo-tinted surface)
- **text**: `#181a1c` → `#cfd9de` (cool near-white)
- **text-strong**: `#000000` → `#f0f1ff` (indigo-white peak)
- **text-secondary**: `#45455f` → `#8b8dac` (muted lavender)
- **brand**: `#32e6e2` (unchanged — teal reads vividly on both grounds)
- **on-brand**: `#181a1c` (unchanged — near-black text stays on the teal pill)
- **link**: `#5653ed` → `#8886ff` (lifted indigo for legibility on dark)
- **border**: `#cfd9de` → `rgba(200, 205, 254, 0.18)` (translucent indigo hairline)
- **shadow opacities**: increase substantially in dark mode (to 40–72%) to remain visible

The signatures hold across themes: the teal CTA pill is identical (teal fill, near-black text), and the two-axis discipline (teal action / indigo link) persists with the indigo lifted to `#8886ff`. The dark canvas is deliberately indigo-tinted (`#181821`) rather than neutral black — the lavender/indigo axis bleeds into the background, the way Vercel commits to true black but Netlify warms its dark toward the brand.

## 13. Lineage & Influences

Netlify's design DNA traces three lineages: **the deploy-platform brightness flip** (white marketing canvas alternating with near-black hero and feature bands, the visual language of a control surface that switches between bright dashboard and dark terminal), **the humanist-geometric-display turn** (Figtree set heavy at 800 over Instrument Sans body — the open-source type pairing that softened dev-tool branding away from terminal-brutalism), and **the two-axis chromatic discipline** (electric teal for action, cool indigo for links — separating "deploy" from "navigate" chromatically where most peers run a single accent).

The choice of pure `#ffffff` for the canvas — rather than Vercel's considered near-white `#fafafa` — is a deliberate brightness commitment: Netlify wants maximum contrast between its white sections and its near-black bands, so the brightness flip reads as dramatic. The dark bands aren't a dark mode; they're an intentional inversion *within* light mode, dramatising the deploy/terminal moment against the bright dashboard.

The teal-filled CTA is the brand's most pointed divergence from the Vercel school. Where Vercel withholds its blue from buttons and inverts CTAs to near-black, Netlify *fills* its electric teal into the primary action and sets near-black text on top — a louder, friendlier action language. The teal at 12.3:1 with near-black text is also a contrast win: it lets the brightest brand colour carry the most important action while staying AAA-accessible.

The two-axis colour system (teal action, indigo link) is unusual among dev-tool brands. The indigo `#5653ed` and its lavender derivatives (`#e8e6f0` surface, `#c6bfd9` accent, `#45455f` secondary text) give the support palette a cool, calm cast that lets the hot teal action colour pop. The systematic paired light/dark token sets (`--*--light` / `--*--dark`) reflect the Radix-Colors-era discipline of designing semantic ramps with accessible step contrast.

What Netlify rejects: a single monochrome accent (it runs two axes), CTAs inverted to neutral (it fills with brand colour), terminal-mono eyebrows (it keeps eyebrows in the body grotesque), pure-black ink (`#181a1c`, not `#000`), and restrained display weight (Figtree at 800, not 600).

**Influences:**

- **Figtree (Erik Kennedy, open-source)** — The display identity; heavy geometric-humanist sans at weight 800, the friendly-engineered headline silhouette. *https://fonts.google.com/specimen/Figtree*
- **Instrument Sans (Rajputana Custom Type)** — Open-grotesque body face; more aperture than a neutral grotesque, paired with Figtree for the calm-precise reading register. *https://fonts.google.com/specimen/Instrument+Sans*
- **Vercel** — Adjacent deploy-platform peer; shares the white-canvas + near-black brightness discipline, but Netlify fills its CTA with brand colour where Vercel withholds it. *https://vercel.com*
- **Jamstack (the architecture Netlify coined)** — The developer-platform-as-editorial register; deploy logs, build status, and framework grids treated as marketing content. *https://jamstack.org*
- **Stripe** — Developer-product-as-magazine layout heritage; dense feature bands the modern deploy-platform surface descends from. *https://stripe.com*
- **Radix Colors** — Systematic semantic ramp thinking; paired light/dark token sets with accessible step contrast. *https://www.radix-ui.com/colors*

## 14. Do's and Don'ts

### Do

- **Do** use pure white `#ffffff` for the marketing canvas — full white, not near-white. The brightness flip needs maximum contrast.
- **Do** alternate white sections with near-black `#181a1c` hero / feature bands. The brightness rhythm is the structure.
- **Do** set **Figtree** heavy at weight 800 for the H1 and section headers. The heavy humanist display is the brand's tell.
- **Do** pair Figtree display with **Instrument Sans** body at weight 400. The heavy-over-open-grotesque contrast is the typographic engine.
- **Do** fill the primary CTA with electric teal `#32e6e2` as a 360px full-pill, near-black `#181a1c` text on top.
- **Do** reserve indigo `#5653ed` for links and navigation — the second chromatic axis, distinct from the teal action colour.
- **Do** use near-black `#181a1c` ink for body and headlines — not pure black. The slight grain softens reading.
- **Do** use lavender-grey `#e8e6f0` for quiet inset surface cards and slate `#cfd9de` for hairline borders.
- **Do** pill every button (primary, secondary, glass) at 360px — full-round is the action shape.
- **Do** use the indigo focus ring `rgba(86, 83, 237, 0.18)` — focus follows the link axis, not the teal action axis.
- **Do** render code on the dark `#181a1c` band with teal-tinted syntax — code feels terminal-native.
- **Do** keep eyebrows in Instrument Sans uppercase (13–14px / 0.04–0.06em) — softer than terminal-mono labels.

### Don't

- **Don't** use cream or near-white for the canvas. Netlify is full `#ffffff` — the brightness flip depends on it.
- **Don't** invert the CTA to neutral. Netlify *fills* the teal — the teal-on-near-black pill is the signature, the inverse of Vercel.
- **Don't** collapse teal and indigo into one accent. The two-axis system (teal action / indigo link) is the distinctive move.
- **Don't** use pure black `#000000` for body text. The ink is `#181a1c`; pure black is for the logo and peak emphasis only.
- **Don't** set the display below weight 700. Figtree at 800 is the canonical heavy headline; restrained weight loses the friendly-confident feel.
- **Don't** put white text on the teal pill. Near-black `#181a1c` text gives 12.3:1 AAA — the teal isn't dark enough for white.
- **Don't** apply the teal to links. Links are indigo `#5653ed`; teal is action-only.
- **Don't** square the buttons. The 360px full-pill is the action shape; rectangular buttons break the brand.
- **Don't** use heavy pure-black shadows. Ink-tinted `rgba(24, 26, 28, …)` soft shadows keep the white sections bright.
- **Don't** treat the dark bands as dark mode. They're intentional inversions within light mode; dark mode re-themes the whole canvas.
- **Don't** widen the reading column beyond 720px. Line length is calibrated for ~70 characters.
- **Don't** use terminal-mono for eyebrows. Netlify keeps eyebrows in the Instrument Sans body grotesque.

## 15. Agent Prompt Guide

### Quick Color Reference

```
Canvas:           #ffffff
Hero Band:        #181a1c
Body Ink:         #181a1c  (not pure black)
Text Secondary:   #45455f
Text Tertiary:    #757575
Brand Teal:       #32e6e2  (rgb 50, 230, 226 — fills the CTA pill)
On-Teal Text:     #181a1c  (near-black, NEVER white)
Indigo Link:      #5653ed  (links + nav only, NOT action)
Lavender Surface: #e8e6f0
Slate Border:     #cfd9de
Focus Ring:       rgba(86, 83, 237, 0.18) 0 0 0 3px  (indigo)
Text on Hero:     #e6ecf2  (near-white on dark band)
```

### Example Component Prompts

1. **"Create a Netlify-style hero on a near-black `#181a1c` band: 64px / 800 Figtree H1 in near-white `#e6ecf2` with `-0.025em` tracking, 18px / 400 Instrument Sans body deck in `#cfd9de` at 1.55 line-height, dual CTA pair below — primary teal full-pill (`#32e6e2` fill, near-black `#181a1c` text 16px / 600, 360px radius, 48px height) and secondary glass pill (`rgba(255,255,255,0.10)` fill, teal `#32e6e2` label, 1px `rgba(255,255,255,0.14)` border, 360px radius)."**

2. **"Design a Netlify feature card on white: `#ffffff` background, 12px radius, 1px `#cfd9de` slate hairline border, 24×28 padding, soft single-layer shadow `rgba(24, 26, 28, 0.06) 0 4px 16px -4px`. Inside: 28×28 icon at top in `#5653ed` indigo, 32px / 700 Figtree heading in `#181a1c`, 16px / 400 Instrument Sans body in `#45455f` secondary. Hover: lift 2px + intensify shadow."**

3. **"Build a Netlify primary CTA: electric-teal `#32e6e2` full-pill, 360px radius, 48px height, 0×24 padding, near-black `#181a1c` text at 16px / 600 Instrument Sans. Hover: deepen teal to `#23d4d0` and scale 1.02. Never put white text on it — the teal needs dark text for AAA contrast (12.3:1)."**

4. **"Compose a Netlify deploy-tour band: near-black `#181a1c` full-bleed section, 64px vertical padding. Centered terminal-style code block (`#181a1c` fill, 12px radius, mono 14px / 1.60) with teal `#32e6e2` success lines, amber warnings, red errors. Eyebrow above in Instrument Sans 13px / 600 uppercase `0.06em` in teal. Section heading in 48px / 800 Figtree near-white."**

5. **"Render a Netlify pricing card with featured tier: white `#ffffff` card, 12px radius, 1px `#cfd9de` border, 28px padding. Tier name in Figtree 20px / 600, price in Figtree 48px / 800 `#181a1c`, feature list with teal `#32e6e2` checkmarks. Featured tier replaces the border with a teal 2px outline + teal primary pill at the bottom (`#32e6e2` fill, near-black text, 360px radius)."**

6. **"Render a Netlify top nav: 64px height, `rgba(255, 255, 255, 0.85)` translucent white fill with `backdrop-filter: blur(12px) saturate(160%)`, 1px bottom hairline `#e3e9ec`. Wordmark left in Figtree. Center nav links (Platform, Solutions, Developers, Resources, Pricing) in Instrument Sans 15px / 500 indigo `#5653ed`. Right: ghost `Log in` + primary teal `Sign up` pill (`#32e6e2` fill, near-black text, 360px radius)."**

### Iteration Guide

1. **Check the canvas value.** If it's cream or near-white, you've drifted. Netlify is full `#ffffff` — the brightness flip needs the brightest possible white against the near-black bands.
2. **Add the dark bands.** A page that's white all the way down isn't Netlify. Alternate white editorial sections with near-black `#181a1c` hero and feature bands — the brightness rhythm is the structure.
3. **Switch to Figtree at 800.** If your headline is a restrained 600-weight sans, you've ported Vercel logic. Netlify's H1 is heavy Figtree at 800 — friendly, confident, emphatic.
4. **Fill the CTA with teal.** If your primary button is neutral or inverted, you've drifted toward Vercel. Netlify fills the electric teal `#32e6e2` into the pill, near-black text on top. This is the single most brand-defining move.
5. **Pill everything.** Buttons are 360px full-round, not rectangles. If your CTAs have 8px corners, they read as a different brand.
6. **Split the two axes.** Teal `#32e6e2` is action-only; indigo `#5653ed` is links-and-nav-only. Don't let them blur — the chromatic separation is the distinctive system.
7. **Keep dark text on the teal.** Near-black `#181a1c` on the teal pill, never white. The teal isn't dark enough for white text; dark text gives 12.3:1 AAA.
8. **Cool the support palette.** Lavender surface `#e8e6f0`, slate hairline `#cfd9de`, slate-violet secondary `#45455f`. The cool, indigo-shaded support is what lets the hot teal action colour pop.

---

*Theme-toggle audit: score=5, signals=[data-theme-attr, localStorage-theme]*

Prose

1. Visual Theme & Atmosphere

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

2. Color Palette & Roles

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.

3. Typography Rules

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.

4. Component Stylings

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).

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.

5. Layout Principles

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:

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)
Feature Grid — white #ffffff background, cards in 3-up with slate hairlines and soft shadows, Figtree 32px / 700 card titles + Instrument Sans body
Deploy-Tour Band — dark #181a1c background with a terminal-style code block and teal success accents, prose introducing the example
Framework Grid — white background, 4-up logo grid at #45455f secondary
Surface-Card Section — white background with lavender #e8e6f0 inset cards grouping related features
Pricing Cards — white background, cards in 3-up, featured tier ringed in teal
Dark Testimonial Band — #181a1c inversion with near-white text and teal-accented dark cards
Closing CTA — dark band with centered teal primary pill, single dominant action
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.

6. Shapes & Radius Scale

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.

7. Depth & Elevation

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.

8. Interaction & Motion

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: <nav aria-label="Primary"> landmark with skip-link to <main>. Mega-menu dropdowns use aria-haspopup="true" aria-expanded.
Deploy-status pills: aria-live="polite" with descriptive text (“Deploy succeeded”, “Building”, “Deploy failed”).
Pricing tables: proper <table> semantics with <th scope="col"> for tiers and <th scope="row"> for features.
Code / deploy-log blocks: <pre><code role="region" aria-label="Deploy log" tabindex="0"> — focusable, labelled.
Modal: role="dialog" aria-modal="true" aria-labelledby with focus trap and Esc-to-close.
Toast notifications: aria-live="polite" for non-critical, aria-live="assertive" for build failures.
System-status indicator in footer: aria-live="polite" (“All systems operational”).

Tab order: skip-link → wordmark → primary nav → search → auth CTAs → main content → footer
Arrow keys navigate inside mega-menu dropdowns
Esc closes modals and dropdown menus
Code / deploy-log blocks are focusable (tabindex="0")
Pricing tier toggles use radio-button keyboard semantics

Uppercase eyebrows use text-transform: uppercase (CSS) so screen readers announce natural-case
Decorative hero illustrations carry aria-hidden="true"
Brand wordmark uses aria-label="Netlify"
Deploy-status pills announce state changes via aria-live
Pricing values announce with currency unit for screen readers

Reduced Motion

All transitions degrade to opacity-only or instant. CTA pill scale and card lift suppress. Modal scale-in becomes instant. Scroll-reveal becomes static on-mount. The brand experience preserves visual consistency under reduced-motion — nothing breaks.

10. Responsive Behavior

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.

11. Content & Voice

Tone

Friendly, capable, deploy-forward. Netlify writes like a developer-relations engineer who’s genuinely excited to get you shipping — warmer and more enthusiastic than Vercel’s clipped engineering register, but still technically precise. Headlines are inviting statements (“Push your ideas to the web”); subheads explain the platform capability; product copy uses developer vocabulary (build, deploy, edge, function) without over-translating. The voice sits between consumer-product warmth and engineering-peer precision — approachable but credible.

Microcopy Patterns

Button verbs: Sign up, Get started, Deploy now, Talk to sales, Read the docs, View pricing. Action-forward, deploy-flavoured.
Error messages: “Build failed — check your build command in netlify.toml and redeploy.” — specific, accountable, includes the exact file.
Success confirmations: “Deploy succeeded.” / “Site is live.” — brief, declarative, deploy-celebratory without being saccharine.
Empty states: “No sites yet. Connect a Git repository or drag-and-drop a folder to deploy.” — instruction-led, includes both paths.
Field labels: Email, Site name, Build command, Publish directory. Single concept where possible.
Loading states: “Building…”, “Deploying…”, “Going live…” — context-specific, deploy-themed, never just “Loading…”

Empty States

The dashboard empty state (“No sites yet — connect a repository or drag-and-drop to deploy”) is the tonal anchor: name the state, offer the next step, lead with the deploy verb. Marketing-site empty states follow the same convention.

CTA Verb Conventions

Primary on hero: Sign up, Get started, Deploy now
Secondary: Talk to sales, Read the docs, Contact us
Tertiary text: See pricing, Browse integrations, View the changelog
Avoided: Click here, Submit, Buy now. Netlify uses deploy-flavoured outcome verbs.

12. Dark Mode & Theming

System-aware dark mode. Netlify ships a complete paired token set — every light token has a --*--dark companion — that respects prefers-color-scheme: dark and offers a manual theme switcher in the footer. The dark mode is a full token swap, not the same as the dark bands that appear inside light mode (those are intentional inversions within the light theme; dark mode re-themes the entire canvas).

Dark-mode token swap:

canvas: #ffffff → #181821 (indigo-tinted near-black, not pure black)
bg-elev: #e8e6f0 → rgba(98, 71, 230, 0.10) (indigo-tinted surface)
text: #181a1c → #cfd9de (cool near-white)
text-strong: #000000 → #f0f1ff (indigo-white peak)
text-secondary: #45455f → #8b8dac (muted lavender)
brand: #32e6e2 (unchanged — teal reads vividly on both grounds)
on-brand: #181a1c (unchanged — near-black text stays on the teal pill)
link: #5653ed → #8886ff (lifted indigo for legibility on dark)
border: #cfd9de → rgba(200, 205, 254, 0.18) (translucent indigo hairline)
shadow opacities: increase substantially in dark mode (to 40–72%) to remain visible

The signatures hold across themes: the teal CTA pill is identical (teal fill, near-black text), and the two-axis discipline (teal action / indigo link) persists with the indigo lifted to #8886ff. The dark canvas is deliberately indigo-tinted (#181821) rather than neutral black — the lavender/indigo axis bleeds into the background, the way Vercel commits to true black but Netlify warms its dark toward the brand.

13. Lineage & Influences

Netlify’s design DNA traces three lineages: the deploy-platform brightness flip (white marketing canvas alternating with near-black hero and feature bands, the visual language of a control surface that switches between bright dashboard and dark terminal), the humanist-geometric-display turn (Figtree set heavy at 800 over Instrument Sans body — the open-source type pairing that softened dev-tool branding away from terminal-brutalism), and the two-axis chromatic discipline (electric teal for action, cool indigo for links — separating “deploy” from “navigate” chromatically where most peers run a single accent).

The choice of pure #ffffff for the canvas — rather than Vercel’s considered near-white #fafafa — is a deliberate brightness commitment: Netlify wants maximum contrast between its white sections and its near-black bands, so the brightness flip reads as dramatic. The dark bands aren’t a dark mode; they’re an intentional inversion within light mode, dramatising the deploy/terminal moment against the bright dashboard.

The teal-filled CTA is the brand’s most pointed divergence from the Vercel school. Where Vercel withholds its blue from buttons and inverts CTAs to near-black, Netlify fills its electric teal into the primary action and sets near-black text on top — a louder, friendlier action language. The teal at 12.3:1 with near-black text is also a contrast win: it lets the brightest brand colour carry the most important action while staying AAA-accessible.

The two-axis colour system (teal action, indigo link) is unusual among dev-tool brands. The indigo #5653ed and its lavender derivatives (#e8e6f0 surface, #c6bfd9 accent, #45455f secondary text) give the support palette a cool, calm cast that lets the hot teal action colour pop. The systematic paired light/dark token sets (--*--light / --*--dark) reflect the Radix-Colors-era discipline of designing semantic ramps with accessible step contrast.

What Netlify rejects: a single monochrome accent (it runs two axes), CTAs inverted to neutral (it fills with brand colour), terminal-mono eyebrows (it keeps eyebrows in the body grotesque), pure-black ink (#181a1c, not #000), and restrained display weight (Figtree at 800, not 600).

Influences:

Figtree (Erik Kennedy, open-source) — The display identity; heavy geometric-humanist sans at weight 800, the friendly-engineered headline silhouette. https://fonts.google.com/specimen/Figtree
Instrument Sans (Rajputana Custom Type) — Open-grotesque body face; more aperture than a neutral grotesque, paired with Figtree for the calm-precise reading register. https://fonts.google.com/specimen/Instrument+Sans
Vercel — Adjacent deploy-platform peer; shares the white-canvas + near-black brightness discipline, but Netlify fills its CTA with brand colour where Vercel withholds it. https://vercel.com
Jamstack (the architecture Netlify coined) — The developer-platform-as-editorial register; deploy logs, build status, and framework grids treated as marketing content. https://jamstack.org
Stripe — Developer-product-as-magazine layout heritage; dense feature bands the modern deploy-platform surface descends from. https://stripe.com
Radix Colors — Systematic semantic ramp thinking; paired light/dark token sets with accessible step contrast. https://www.radix-ui.com/colors

14. Do’s and Don’ts

Do

Do use pure white #ffffff for the marketing canvas — full white, not near-white. The brightness flip needs maximum contrast.
Do alternate white sections with near-black #181a1c hero / feature bands. The brightness rhythm is the structure.
Do set Figtree heavy at weight 800 for the H1 and section headers. The heavy humanist display is the brand’s tell.
Do pair Figtree display with Instrument Sans body at weight 400. The heavy-over-open-grotesque contrast is the typographic engine.
Do fill the primary CTA with electric teal #32e6e2 as a 360px full-pill, near-black #181a1c text on top.
Do reserve indigo #5653ed for links and navigation — the second chromatic axis, distinct from the teal action colour.
Do use near-black #181a1c ink for body and headlines — not pure black. The slight grain softens reading.
Do use lavender-grey #e8e6f0 for quiet inset surface cards and slate #cfd9de for hairline borders.
Do pill every button (primary, secondary, glass) at 360px — full-round is the action shape.
Do use the indigo focus ring rgba(86, 83, 237, 0.18) — focus follows the link axis, not the teal action axis.
Do render code on the dark #181a1c band with teal-tinted syntax — code feels terminal-native.
Do keep eyebrows in Instrument Sans uppercase (13–14px / 0.04–0.06em) — softer than terminal-mono labels.

Don’t

Don’t use cream or near-white for the canvas. Netlify is full #ffffff — the brightness flip depends on it.
Don’t invert the CTA to neutral. Netlify fills the teal — the teal-on-near-black pill is the signature, the inverse of Vercel.
Don’t collapse teal and indigo into one accent. The two-axis system (teal action / indigo link) is the distinctive move.
Don’t use pure black #000000 for body text. The ink is #181a1c; pure black is for the logo and peak emphasis only.
Don’t set the display below weight 700. Figtree at 800 is the canonical heavy headline; restrained weight loses the friendly-confident feel.
Don’t put white text on the teal pill. Near-black #181a1c text gives 12.3:1 AAA — the teal isn’t dark enough for white.
Don’t apply the teal to links. Links are indigo #5653ed; teal is action-only.
Don’t square the buttons. The 360px full-pill is the action shape; rectangular buttons break the brand.
Don’t use heavy pure-black shadows. Ink-tinted rgba(24, 26, 28, …) soft shadows keep the white sections bright.
Don’t treat the dark bands as dark mode. They’re intentional inversions within light mode; dark mode re-themes the whole canvas.
Don’t widen the reading column beyond 720px. Line length is calibrated for ~70 characters.
Don’t use terminal-mono for eyebrows. Netlify keeps eyebrows in the Instrument Sans body grotesque.

15. Agent Prompt Guide

Quick Color Reference

Canvas:           #ffffff
Hero Band:        #181a1c
Body Ink:         #181a1c  (not pure black)
Text Secondary:   #45455f
Text Tertiary:    #757575
Brand Teal:       #32e6e2  (rgb 50, 230, 226 — fills the CTA pill)
On-Teal Text:     #181a1c  (near-black, NEVER white)
Indigo Link:      #5653ed  (links + nav only, NOT action)
Lavender Surface: #e8e6f0
Slate Border:     #cfd9de
Focus Ring:       rgba(86, 83, 237, 0.18) 0 0 0 3px  (indigo)
Text on Hero:     #e6ecf2  (near-white on dark band)

Example Component Prompts

“Create a Netlify-style hero on a near-black #181a1c band: 64px / 800 Figtree H1 in near-white #e6ecf2 with -0.025em tracking, 18px / 400 Instrument Sans body deck in #cfd9de at 1.55 line-height, dual CTA pair below — primary teal full-pill (#32e6e2 fill, near-black #181a1c text 16px / 600, 360px radius, 48px height) and secondary glass pill (rgba(255,255,255,0.10) fill, teal #32e6e2 label, 1px rgba(255,255,255,0.14) border, 360px radius).”
“Design a Netlify feature card on white: #ffffff background, 12px radius, 1px #cfd9de slate hairline border, 24×28 padding, soft single-layer shadow rgba(24, 26, 28, 0.06) 0 4px 16px -4px. Inside: 28×28 icon at top in #5653ed indigo, 32px / 700 Figtree heading in #181a1c, 16px / 400 Instrument Sans body in #45455f secondary. Hover: lift 2px + intensify shadow.”
“Build a Netlify primary CTA: electric-teal #32e6e2 full-pill, 360px radius, 48px height, 0×24 padding, near-black #181a1c text at 16px / 600 Instrument Sans. Hover: deepen teal to #23d4d0 and scale 1.02. Never put white text on it — the teal needs dark text for AAA contrast (12.3:1).”
“Compose a Netlify deploy-tour band: near-black #181a1c full-bleed section, 64px vertical padding. Centered terminal-style code block (#181a1c fill, 12px radius, mono 14px / 1.60) with teal #32e6e2 success lines, amber warnings, red errors. Eyebrow above in Instrument Sans 13px / 600 uppercase 0.06em in teal. Section heading in 48px / 800 Figtree near-white.”
“Render a Netlify pricing card with featured tier: white #ffffff card, 12px radius, 1px #cfd9de border, 28px padding. Tier name in Figtree 20px / 600, price in Figtree 48px / 800 #181a1c, feature list with teal #32e6e2 checkmarks. Featured tier replaces the border with a teal 2px outline + teal primary pill at the bottom (#32e6e2 fill, near-black text, 360px radius).”
“Render a Netlify top nav: 64px height, rgba(255, 255, 255, 0.85) translucent white fill with backdrop-filter: blur(12px) saturate(160%), 1px bottom hairline #e3e9ec. Wordmark left in Figtree. Center nav links (Platform, Solutions, Developers, Resources, Pricing) in Instrument Sans 15px / 500 indigo #5653ed. Right: ghost Log in + primary teal Sign up pill (#32e6e2 fill, near-black text, 360px radius).”

Iteration Guide

Check the canvas value. If it’s cream or near-white, you’ve drifted. Netlify is full #ffffff — the brightness flip needs the brightest possible white against the near-black bands.
Add the dark bands. A page that’s white all the way down isn’t Netlify. Alternate white editorial sections with near-black #181a1c hero and feature bands — the brightness rhythm is the structure.
Switch to Figtree at 800. If your headline is a restrained 600-weight sans, you’ve ported Vercel logic. Netlify’s H1 is heavy Figtree at 800 — friendly, confident, emphatic.
Fill the CTA with teal. If your primary button is neutral or inverted, you’ve drifted toward Vercel. Netlify fills the electric teal #32e6e2 into the pill, near-black text on top. This is the single most brand-defining move.
Pill everything. Buttons are 360px full-round, not rectangles. If your CTAs have 8px corners, they read as a different brand.
Split the two axes. Teal #32e6e2 is action-only; indigo #5653ed is links-and-nav-only. Don’t let them blur — the chromatic separation is the distinctive system.
Keep dark text on the teal. Near-black #181a1c on the teal pill, never white. The teal isn’t dark enough for white text; dark text gives 12.3:1 AAA.
Cool the support palette. Lavender surface #e8e6f0, slate hairline #cfd9de, slate-violet secondary #45455f. The cool, indigo-shaded support is what lets the hot teal action colour pop.

Theme-toggle audit: score=5, signals=[data-theme-attr, localStorage-theme]

Ship with this

Drop netlify into your project, then ship the actual sections in an afternoon.

1 · install design

npx @webdesignhot/design-md add netlify

2 · ship landing page

npx agentkit init --design netlify

How AgentKit reads DESIGN.md →