Netlify

Netlify sets oversized Figtree headlines in a heavy weight on a dark void canvas. Cobalt (#89ddff) is reserved for actions, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 4px, with 6px and 360px on smaller elements.

netlify.com ↗

Colors

Cobalt

#89ddff

Primary actions and links

Iris

#c792ea

Secondary accent and highlights

Void

#000000

Page canvas

Soft Void

#111111

Headlines and body copy

Pale Cobalt

#e4f0fb

Surface or divider

Deep Pale Cobalt

#add7ff

Supporting colour

Deep Cobalt

#5fb3ff

Supporting colour

Lagoon

#5de4c7

Supporting colour

Soft Lagoon

#7fdbca

Supporting colour

Type scale

DisplayPush your ideas to the webFigtree · 64px · 800

HeadingBuild your way.Ship on one platform.Figtree · 64px · 800

SubheadingStart with code or AIFigtree · 24px · 700

BodyCreate with AI or code, deploy instantly on production infrastructure. One platform to buiInstrument Sans · 18px · 400

NavGo to homepageInstrument Sans · 16px · 400

Style reference measured from the public page at netlify.com on 2026-10-12 for design education. Netlify and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Netlify — Style Reference
> Netlify sets oversized Figtree headlines in a heavy weight on a dark void canvas. Cobalt (#89ddff) is reserved for actions, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 4px, with 6px and 360px on smaller elements.

**Theme:** dark · **Source:** https://www.netlify.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Cobalt | `#89ddff` | `--color-accent` | Primary actions and links |
| Iris | `#c792ea` | `--color-secondary` | Secondary accent and highlights |
| Void | `#000000` | `--color-canvas` | Page canvas |
| Soft Void | `#111111` | `--color-ink` | Headlines and body copy |
| Pale Cobalt | `#e4f0fb` | `--color-surface-1` | Surface or divider |
| Deep Pale Cobalt | `#add7ff` | `--color-surface-2` | Supporting colour |
| Deep Cobalt | `#5fb3ff` | `--color-surface-3` | Supporting colour |
| Lagoon | `#5de4c7` | `--color-surface-4` | Supporting colour |
| Soft Lagoon | `#7fdbca` | `--color-surface-5` | Supporting colour |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | Figtree | 64px | 800 | 1.10 | 0 |
| Heading | Figtree | 64px | 800 | 1.10 | 0 |
| Subheading | Figtree | 24px | 700 | 1.10 | 0 |
| Body | Instrument Sans | 18px | 400 | 1.50 | 0 |
| Nav | Instrument Sans | 16px | 400 | 1.50 | 0 |

Font families on the page: Instrument Sans, Figtree, Martian Mono, ui-monospace. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 4px, 6px, 360px, 50%, 16px

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer