Netlify Design System Reference

Web Deployment & AI-Powered Development

Netlify Design System

Modern, developer-centric, and accessible — tokens and components that make web deployment intuitive for every team.

16 Color tokens 7 Type styles 4 Shadow levels 7 Radius tokens Figtree + Instrument Sans

Foundation

Color Tokens

The full color palette extracted from Netlify's design system, including brand primaries, interactive states, neutrals, and surfaces.

Dark Base

#181A1C

Hero sections · Primary text · Dark backgrounds

Slate Gray

#545A61

Secondary text · Metadata · Reduced emphasis

Pure Black

#000000

High-contrast text · Maximum legibility

Bright Blue

#2E51ED

Links · Focus states · Interactive elements

Cyan Teal

#0E7FE1

Secondary accent · Hover state · Cooler tone

Bright Cyan

#16D9D9

Primary CTA · High-energy actions · Conversion focus

Pure White

#FFFFFF

Card backgrounds · Light surfaces · Input fields

Light Gray

#F0F0F0

Subtle backgrounds · Disabled states · Tints

Soft Gray

#F5F5F5

Alternate backgrounds · Secondary surfaces

Card Border

#E9EBED

Premium surface edges · Minimal contrast

Error Red

#DD0000

Error messages · Validation failures · Destructive actions

Typography

Type Scale

Figtree for bold headings, Instrument Sans for clear body text, and Martian Mono for technical code — designed for modern, accessible interfaces.

Display Figtree Headings · Display · Bold hierarchy

Body Instrument Sans Body text · Labels · UI elements

Monospace Martian Mono Code · Technical content · Snippets

Display Large Build what matters 72px · 800 · 79.2px lh

Heading 1 The quick brown fox 48px · 800 · 53.504px lh

Heading 2 The quick brown fox jumps 32px · 700 · 35.2px lh

Body Large The quick brown fox jumps over the lazy dog 16px · 400 · 24px lh

Body Regular The quick brown fox jumps over the lazy dog 14px · 600 · 21px lh

Body Small The quick brown fox jumps over the lazy dog 14px · 400 · 21px lh

Caption The quick brown fox jumps over the lazy dog 12px · 400 · 18px lh

Code const token = '#16D9D9'; 12px · 500 · monospace

Layout

Spacing & Shapes

4px base grid — every spacing token is a multiple of 4. Border radii range from sharp (0px) to pill (9999px) to match component context.

Spacing Scale

4px xs

8px sm

12px md

16px base

20px lg

24px xl

32px 2xl

48px 3xl

Border Radius

None 0px

SM 2px

MD 4px

LG 6px

XL 12px

Full 9999px

Border Widths

Thin 1px

Medium 2px

Thick 4px

Shadows

Level 0 Flat · no elevation

Level 1 Hover · subtle lift

Level 2 Sticky · nav · floating

Level 3 Modals · overlays · dropdowns

Opacity

Full 100%

Hover 85%

Overlay 60%

Disabled 50%

Z-index / Layering

Base 1

Sticky 100

Dropdown 1000

Modal 9999

Elevation

Depth & Surfaces

Light surfaces with subtle shadows create spatial hierarchy. White cards, gray backgrounds, and dark hero sections provide visual separation and depth.

Card Surface

Primary white surface for cards, inputs, and light containers

L0 · #FFFFFF

Secondary Surface

Alternate background for secondary containers and subtle tints

L1 · #F5F5F5

Dark Hero

Hero sections and dark-mode surfaces with full-width coverage

L2 · #181A1C

Card #FFFFFF

Secondary #F5F5F5

Disabled #F0F0F0

Hero #181A1C

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — colors, radii, shadows, and states.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #16D9D9 bg · #181A1C text · 6px radius · 12px 24px padding · 44px height · Figtree 14px 600. Secondary: transparent bg · #16D9D9 border. Ghost: text-only. Disabled: #F0F0F0 bg · opacity 50%.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · #778089 border · 4px radius · 42px height · Instrument Sans 16px. Focus: #2E51ED border 2px · 3px focus ring rgba(46,81,237,.1).

Card

Content container — elevated surface with shadow

.card

Repository name

A brief description of this project. It's open source and has 12k stars.

#FFFFFF bg · #E9EBED border · 6px radius · L3 shadow. Title: 16px/600/#181A1C. Body: 16px/#545A61. CTA: primary cyan button.

Badges

Status indicators — Success, Error, Info

.badge

Open Closed Draft

12px/600 · 4/8px padding · 12px radius · #FFFFFF text. Success: #1F883D. Error: #DD0000. Info: #2E51ED.

Guidelines

Do's & Don'ts

Principles for consistent application of the Netlify design language across surfaces and contexts.

Do — Embrace

Use Figtree weight 800 for all headings (h1–h3) to establish visual hierarchy
Maintain 16px minimum font size for body text and UI labels for readability
Apply 24px padding as default for cards and containers
Leverage dark hero sections (#181A1C) to create visual separation and focus
Use bright cyan (#16D9D9) exclusively for primary CTAs and conversion actions
Include 2px focus borders (#2E51ED) on all interactive elements for keyboard navigation

Don't — Avoid

Don't use Instrument Sans for display headings; reserve it for body and labels
Don't set font sizes below 14px in production UIs except for code or captions
Don't apply shadows to every card; use shadows only for hover and overlay states
Don't mix light and dark surfaces within a single section or panel
Don't override button font sizes from 14px; maintain consistency across all CTAs
Don't use color as the only indicator of state; combine with spacing, weight, or opacity

netlify.com

Preview