Netlify· Dev Toolsnetlify.com

Dev Tools

Netlify

Dark-canvas developer platform with a signature aqua-teal accent, Figtree at heavy weight for display, Martian Mono for code-voice sections, and full-pill buttons throughout — warm at scale, precise in detail.

Color Palette19 tokens

background#181a1c

surface#0d1818

surface-dark#0c2a2a

surface-mid#1d1f22

ink#ffffff

ink-secondary#7e8792

ink-tertiary#545a61

primary#32e6e2

on-primary#181a1c

primary-container#c2f0ed

primary-ghost-bg#2e3232

success#64d87f

error#d62740

warning#fbb13d

info#2e51ed

border#778089

border-faint#545a61

shadow-soft#000000

highlight-teal#8efbf7

Buttons

TypographyGoogle Font

Figtree

display-hero

The quick brown fox

64px · 800 · 0px

display

The quick brown fox

48px · 800 · 0px

heading-section

The quick brown fox

36px · 800 · 0px

heading-sub

The quick brown fox

24px · 700 · 0px

body-large

The quick brown fox

18px · 400 · 0px

IconsLucide

Set: Lucide · brand-matched

Formfocus ring

you@company.com

Password

••••••••

Card · Shapes

Netlify

Dark-canvas developer platform with a signature aqua-teal accent, Figtree at heavy weight for display, Martian Mono for…

Dev Tools

none

Elevation

RING

CARD

ELEVATED

Controls

Off

✓Checked

Unchecked

Selected

Option

Alerts

Heads up — a new version of the design system is available.

Saved. Your changes are live across all surfaces.

Some tokens are missing a contrast-safe pairing.

Couldn’t reach the server. Retry in a moment.

Badges

SolidSoftOutlineNewv2.0

FAQ

Netlify

Dark-canvas developer platform with a signature aqua-teal accent, Figtree at heavy weight for display, Martian Mono for code-voice sections, and full-pill buttons through…

How does it integrate with my stack?

Is there a free tier?

Tabs

OverviewActivitySettings

DayWeekMonth

Stats

48.2k

Active users

+12.4%

$12.8k

MRR

+3.1%

99.9%

Uptime

−0.02%

Table

Member	Plan	Status
AQAvery Quinn	Pro	Active
JLJordan Lee	Team	Pending
SRSam Rivera	Free	Active

Avatars

AQJLSR+5

Avery Quinn

Online · Owner

Slider · Progress

Volume62%

Storage used78%

Tooltip · Popover

Brand-styled tooltipHover target

Navigation bar

Banner

Pricing

Pro

$24 /mo

Unlimited projects
Priority support
Custom domains

Stepper

CartDetails3Payment4Review

Breadcrumb

HomeDev ToolsNetlify

Toast

Changes savedUndo

You have 3 new updates

Activity

Avery created a new project

2h ago

Jordan left a comment

5h ago

Sam shipped v2.0

1d ago

Notifications

AQAvery Quinn invited you to Netlify.

2 minutes ago

JLJordan Lee approved your design tokens.

1 hour ago

SRSam Rivera mentioned you in a thread.

Yesterday

Code

theme.ts

// Netlify tokens
export const theme = {
  primary: "#32e6e2",
  radius: "6px",
}

Calendar

March 2026

SMTWTFS28291234567891011121314151617181920212223242526272829303112

No resultsTry adjusting your filters or search for something else.

Pagination

‹123…12›

Brand moment

Netlify's site is the rare developer brand that manages to feel simultaneously dark and warm. The canvas is a near-black with a blue-grey undertone (, #181a1c) — not dead flat blac…

Netlify · Dev Tools

Similar systems

Generated from shared tags, visual DNA, category, color, type, and radius.

Filter by this ↗

Neon83%

shared styles: Dark, Cool, Bold · same category: Dev Tools

Nuxt83%

shared styles: Dark, Minimal, Cool · same category: Dev Tools

WorkOS82%

shared styles: Dark, Minimal, Cool · same category: Dev Tools

Bun81%

shared styles: Dark, Minimal, Bold · same category: Dev Tools

GitLab79%

shared styles: Dark, Minimal, Cool · same category: Dev Tools

Replit79%

shared styles: Dark, Minimal, Bold · same category: Dev Tools