Developer Tools

Netlify

netlify.com17 colors15 componentsFigtreeMulti-page · 12 screens

Create with AI or code, deploy instantly on production infrastructure. One platform to build and ship.

Remix Visit

Remix

Visit

12 screenshots captured· netlify.com

1 / 12 · Push your ideas to the web | Netlify · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from netlify.com

Primary

#181A1C

#545A61

#2E51ED

#0000

#ACCE

#0D1818

#0C2A2A

#0E7FE1

Neutral

#000000

#FFFFFF

#757575

#F0F0F0

#808080

#E9EBED

#E5E5E5

#F5F5F5

Semantic

#DD0000

Error/Danger

Typography · Figtree

h248.64px · 800 · 53.504px

button14px · 600 · 21px

h164px · 800 · 70.4px

h172px · 800 · 79.2px

h164.16px · 800 · 70.576px

Typography · Martian Mono

h312px · 500 · 13.2px

code12px · 400 · 18px

code16px · 400 · 24px

Typography · Instrument Sans

body14px · 600 · 21px

label16px · 400 · 24px

Spacing

24px

12px

16px

8px

48px

32px

4px

64px

Elevation

color(srgb 0 0 0 / 0.07) 0px 16px 24px 0px, color(srgb 0 0 0 / 0.06) 0px 6px 30px 0px, color(srgb 0 0 0 / 0.1) 0px 8px 10px 0px

color(srgb 0.2 0.215686 0.231373 / 0.08) 0px 2px 4px 0px, color(srgb 0.2 0.215686 0.231373 / 0.06) 0px 1px 10px 0px

rgb(46, 81, 237) 0px 0px 0px 2px inset

Components · 15

Remixes of Netlify

Latest remixes

No public remixes yet. Be the first to make one.

Remix it