Home
DESIGN.mdStar on GitHub

Push your ideas to the web

Create with AI or code, deploy instantly on production infrastructure. One platform to build and ship.

Deploy Previews Edge Functions Netlify Drop Build Plugins Netlify CLI
Signature — Deploys
Production deploysacme-web.netlify.app
Deploy logmain@a3f9c1e
Colors
Primary — teal
teal#00C7B7Primary, Published, mark
teal-bright#14D8D4Bright accent
teal-light#5DE4C7Soft accent
teal-deep#014847Deep teal, dark accents
Secondary & semantic
blue#2E51EDLinks, secondary
warning#FBB13DBuilding, enqueued
danger#FE4E5CFailed deploy, error
Surfaces
bg#FFFFFFCards, panels
bg2#F4F7F7Page background
teal-black#0D1818Dark page, build log
text#181A1CHeadings, body
Typography — Mabry Pro (≈ Manrope) · Roboto Mono
display-2xl
Manrope · 800
Netlify
52px800
display-xl
Manrope · 700
Push your ideas to the web
32px700
display-md
Manrope · 600
Build your way. Ship on one platform.
22px600
text-lg
Manrope · 400
Deploy instantly on production infrastructure.
16px400
text-sm
Manrope · 400
Standard body text and UI copy.
13px400
ui-mono
Roboto Mono · 400
netlify deploy --prod
12pxmono
Components
Buttons
Deploy status
Published Building Failed Enqueued
Deploy command
Radius
6px
8px
12px
Guardrails
DO
Use teal #00C7B7 as the one primary — CTAs, the mark, the Published state
Use dark ink text on teal buttons — teal is too bright for white text
Keep dark surfaces teal-tinted black #0D1818 — not neutral gray or navy
Use amber for Building and red for Failed — never teal for a non-live state
Keep the spark/rays wordmark monochrome (dark on light, white on dark)
DON'T
Put white text on the teal button — contrast fails; use ink
Use teal for anything that isn't live / published / primary
Tint dark surfaces navy or neutral — Netlify's dark is teal-black
Set display headings in Roboto Mono — Mabry / Manrope owns headings
Fake deploy data — use real commit SHAs, branches, and states