Push your ideas to the web | Netlify

DesignScan preview · https://netlify.com · 2026-06-13

Colors

primary#2e51ed
on-primary#ffffff
secondary#32e6e2
on-secondary#181a1c
background#ffffff
text#353a3e
accent-1#181a1c
accent-2#89ddff
on-accent-2#111111
border#e9ebed
muted-surface#f6f6f7
success#bef9c6
warning#f6e0a5
info#cde2ff

Typography

display64px · 800 · lh 1.1
The quick brown fox jumps
display-4848px · 800 · lh 1.1
The quick brown fox jumps
headline-lg37px · 800 · lh 1.1
The quick brown fox jumps
headline-lg-3232px · 800 · lh 1.1
The quick brown fox jumps
headline-sm24px · 800 · lh 1.1
The quick brown fox jumps
title18px · 800 · lh 1.1
The quick brown fox jumps
body-lg16px · 400 · lh 1.5
The quick brown fox jumps
body14px · 400 · lh 1.5
The quick brown fox jumps
label12px · 400 · lh 1.5
The quick brown fox jumps

Spacing

xs4px
sm8px
md12px
lg16px
xl24px
2xl32px
3xl48px

Radius

xs2px
sm4px
md6px
lg8px
xl12px
2xl16px

Layout

sm401px
md426px
lg481px
xl641px
2xl897px
3xl1085px
containermax-width 1000px

Elevation

sm
md
lg

Components

button-primary
button-secondary
surface · input · body-text · border

Body text on the surface color — this is what reading copy looks like.

divider
surface-muted
Subtle secondary surface — sidebars, sections, callouts.
link
Inline link example →
badge Badge
feedback messages
success · Saved. Your changes are live.
warning · Heads up — this action can't be undone.
info · New: design tokens now include breakpoints.