What is Netlify's primary brand color?

Netlify's brand voltage is a saturated teal-cyan, hex #32e6e2, wired into the CSS as --color-brand-2, --color-brand-core-2, --button-primary-bg-color, and --teal-200. It is the fill of the primary CTA pill in the hero and the search-submit button below the fold; on hover it brightens to a paler teal #8efbf7 wired as --color-brand-2-hover. A secondary brand cobalt #2e51ed (--color-brand-primary, --color-brand-1) carries the link tone and the highlighted-tab accent. The deep teal-charcoal #0c2a2a wired as --code-bg-color and --button-secondary-bg-color is the dark editorial surface that appears in cards below the fold. The composition reads as one teal voltage with two intensity steps and a near-black charcoal floor.

What typefaces does Netlify use, and what should I use as substitutes?

Netlify runs three typefaces with sharply divided jobs. Figtree is the display sans, used at 64px weight 800 for the hero h1 and the largest below-fold section h2, plus 36-48px weight 700 for smaller section headings. Instrument Sans is the body sans, used at 16-18px weight 400 for paragraph copy and 14px weight 400 for navigation links. Martian Mono is the uppercase voice, used at 16px weight 400 with letter-spacing in all-caps for eyebrow labels above sections; it appears 44 times in the captured page, more than any other type variant. All three are open source — Figtree is on Google Fonts, Instrument Sans is by Instrument design studio, Martian Mono is by Evil Martians. No substitution needed; the system already runs free fonts.

Why does the Netlify page change surface color between the hero and the body?

Netlify's hero sits on an almost-black canvas at hex #181a1c (--ntl-neutral-800) with white type, then the page flips to a warm white canvas at #ffffff with near-black type for everything below the fold. The split is intentional — the dark hero band signals the product's deploy-platform identity (the term in dev-infrastructure for a runtime that runs in the background), while the white body reads as marketing editorial. The single object that stitches the two halves together is the teal-cyan CTA pill #32e6e2 — it appears in both surface eras and carries the brand voltage end-to-end. Most peers (Vercel, Render, Cloudflare) commit to one canvas; Netlify is the only major dev-infra brand that runs both.

What is Netlify's corner-radius philosophy?

The radius scale is small-step plus pill. The dominant radius is 4px (23 occurrences on cards, dropdowns, and the text input field), followed by 6px (8 occurrences on icon buttons) and 12px (3 occurrences on larger feature cards). The hero CTA and the in-card secondary buttons render at a fully-rounded pill — declared in CSS as 360px which on a 36px-tall button effectively reads as 9999px. There is no 8px or 16px middle tier in heavy use; the system is small-step everywhere except the two pill surfaces, which read as the warmest and most-tappable elements on the page.

Can I use this DESIGN.md to build my own React deploy-platform site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Netlify's specific moves: the dark-to-light page split rather than a single canvas, the teal-cyan pill as the only chromatic anchor across both halves, three typefaces with sharply different jobs (Figtree display, Instrument Sans body, Martian Mono eyebrow), and a 64px weight 800 hero step that holds the line on visual force. The tokens resolve cleanly without invention. One caveat — the split-canvas move only works if your product story really has two narrative halves (above-fold identity, below-fold editorial). For most landing pages a single canvas is the better answer.

Netlify Design System

Netlify's marketing system as a DESIGN.md file.

About Netlify DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source netlify.com

Web Infrastructure & Hosting
Developer Tools & IDEs

Netlify's marketing site opens with a move you do not see on Vercel, Cloudflare, or Render: the page is split into two surface eras. The above-fold band is near-black ink with a chunky 64px Figtree headline ("Push your ideas to the web") in white, a hand-drawn illustration of a shopping cart full of cloud icons floating to the right, and a single saturated teal-cyan pill CTA centered beneath. The instant you scroll past the fold the surface flips — warm white canvas, near-black ink type, a 64px section h2 ("Build your way. Ship on one platform.") in Figtree weight 800 again, and dark editorial cards in a deep teal-charcoal returning the brand voltage as in-card decoration. The two halves are stitched together by a single object: the cyan pill. It is the only chromatic surface that appears in both the dark hero and the light body, and it carries the brand voltage end-to-end.

The DESIGN.md file packages the system into a machine-readable spec. Inside: 18 color tokens drawn from a 200-plus CSS custom-property root, organized into a brand-voltage tier (teal-cyan primary, paler teal hover, deep teal-charcoal as the secondary surface), an ink tier (near-black headline / muted-grey body / off-white text inverse), a hairline tier (a faintly-blue #e4f0fb that doubles as soft surface fill), and a small status set. Ten typography tokens span three typefaces: Figtree (the workhorse display sans, weights 600-800), Instrument Sans (the body sans, weight 400-500), and Martian Mono (the uppercase eyebrow voice, weight 400). Sixteen components cover the cyan pill primary CTA, the dark hero panel, the white body card, the mono-uppercase eyebrow row, the input field, and the editorial dark cards used below the fold.

Feed this file to Claude or Cursor and it reproduces Netlify's specific moves: the dark-to-light page split rather than a single canvas, the cyan pill as the only chromatic anchor, three typefaces with sharply different jobs, and the 64px / weight 800 display step that distinguishes the system from quieter peers like Vercel (60px / weight 500) and Render (48px / weight 600). The one move worth borrowing only if your product story has two distinct narrative halves is the split-canvas opener; for most SaaS the surface should pick a side.

What makes it distinct

Teal-cyan voltagethe brand color is a single saturated cyan that owns the hero CTA pill and every link accent, against an almost-black canvas
Three-voice typographyFigtree at weight 800 for display, Instrument Sans for body, Martian Mono uppercase for eyebrows and code
Two-era pagea near-black hero band drops to a warm white body, with the teal pill stitching the two halves together
Heavy 800-weight displaythe 64px hero h1 sits at weight 800 (not the 500-600 most dev-infra peers use); a deliberate dial against the dark canvas
Mono uppercase eyebrowsMartian Mono at 16px appears 44 times as section labels in all-caps; the system's quiet technical voice

Live at netlify.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

netlify.com

Explore Netlify

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Netlify design system FAQ

Common questions about Netlify's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Netlify — official site

Netlify's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.