Netlify — design system & UI screens

Dev Tools · 1 screen · 12 sections · https://www.netlify.com/

Hero with a line-art illustration and a build-and-ship logo wall: Autodesk, Zscaler, Stack Overflow.

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/netlify.

Decoded design system

Netlify's decoded design system: background #FFFFFF, text #181A1C, accent #32E6E2, link #2E51ED, primary #32E6E2; type scale h1 64px / h2 48.64px / body 14px; 8px spacing base; 3px base radius. The single interactive/action color is #32E6E2 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#F1F1F1`
border	`#DCDCDC`
text	`#181A1C`
text_muted	`#6F7172`
primary	`#32E6E2`
accent	`#32E6E2`
link	`#2E51ED`
secondary	`#9DA7B2`
button_bg	`#32E6E2`
button_text	`#12181F`

Using these colors

Action color #32E6E2 — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #32E6E2 — one role, not several (the action color).
accent #32E6E2 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #2E51ED — inline text links and link-styled controls.
secondary #9DA7B2 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Instrument Sans
Body: Figtree
Mono: Martian Mono
h1: 64px
h2: 48.64px
body: 14px

Spacing

base unit: 8px
scale: 2px, 4px, 8px, 10px, 12px, 16px, 17px, 24px, 32px, 48px

Radii

base: 3px
button: 360px

Shadows (elevation)

card: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px

Motion

Micro-interactions run at 200ms (dominant) with ease.

durations: 200ms · 100ms · 300ms
easings: ease · cubic-bezier(0.22, 1, 0.36, 1)
animated properties: background-color, border-color, filter, translate

Native design tokens

Token	Value
`--green-900`	`#152a19`
`--pink-600`	`#b938b8`
`--search-loading-color`	`color(srgb .00392156862745098 .4117647058823529 .40784313725490196)`
`--purple-200`	`#d8c7ff`
`--ntl-pink-400`	`color(srgb .9372549019607843 .4980392156862745 .9215686274509803)`
`--color-info-border`	`color(srgb .19215686274509805 .4196078431372549 .9568627450980393)`
`--ntl-gold-700`	`color(srgb .5490196078431373 .2980392156862745 .050980392156862744)`
`--color-invalid-border`	`color(srgb .8392156862745098 .15294117647058825 .25098039215686274)`
`--ntl-color-bg-3`	`color(srgb .9137254901960784 .9215686274509803 .9294117647058824)`
`--ntl-button-primary-text-color`	`color(srgb .09411764705882353 .10196078431372549 .10980392156862745)`

…and 110 more measured on the page.

Button states (measured)

primary hover: border 2px solid color(srgb 0.556863 0.984314 0.968627) · background color(srgb 0.556863 0.984314 0.968627)
primary focus: outline 1px auto rgb(16, 16, 16)

Layout (measured)

container max-width: 1280px
nav: 111px sticky
common grid: 7 columns

Motion choreography (measured)

Load order: header.site-header → path.eyes×2 → div.n-ticker-content×2 → path.star-one → path.star-two → path.cloud-two

Themes

dark counterpart: background #12181F, text #FFFFFF.

Responsive (measured)

breakpoints: 400px · 426px · 480px · 500px · 550px · 600px
mobile (390px): hero 41px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Push your ideas to the web