Developer Tools

Cloudflare

cloudflare.com13 colors5 componentsSTK Bureau SansMulti-page · 12 screens

Welcome to Cloudflare - Powering the next generation of applications

Remix Visit

Remix

Visit

12 screenshots captured· cloudflare.com

1 / 12 · Cloudflare: Build for the agent era · 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 cloudflare.com

Primary

#FF5E1F

Primary CTA, brand accent, active state

#FF9910

Secondary accent / hero band

#FF5F08

Accent / decorative

#ED1641

Accent / decorative

Neutral

#151414

Default page background

#FFFFFF

Alternating section band; Headings / primary text; label colour on brand surfaces

#F0E3DE

Body copy

#9A9390

Captions, secondary text

#727272

Tertiary / placeholder text

#F0F0F0

1px borders and dividers

#262626

Neutral

#1F1F1F

Neutral

Semantic

#FF7038

Error

Typography · STK Bureau Sans

h156px · 500 · 55.44px

body16px · 400 · 19.2px

link16px · 400 · 24px

nav-link16px · 500 · 24px

body16px · 500 · 19.2px

h256px · 500 · 56px

body19.2px · 400 · 23.04px

body14px · 400 · 17.5px

body13px · 500 · 13px

body14px · 500 · 17.5px

h432px · 500 · 32px

caption14px · 400 · 16.1px

body16px · 400 · 16px

button16px · 500 · 24px

h348px · 500 · 48px

caption14px · 500 · 16.1px

body16px · 500 · 19.2px

h618px · 500 · 21.6px

button14px · 500 · 16.1px

button13px · 500 · 15.2941px

button14px · 400 · 16px

heading18px · 500 · 21.6px

heading19.2px · 400 · 23.04px

button14px · 500 · 21px

caption13px · 500 · 15.2941px

button14px · 400 · 17.5px

h248px · 500 · 48px

button16px · 400 · 24px

body18px · 500 · 21.6px

Typography · Apercu Mono Pro

code13.6px · 500 · 17.68px

code12px · 400 · 18px

code12px · 400 · 14.4px

code14px · 400 · 21px

code12px · 400 · 16px

code14px · 400 · 21px

code11.9px · 500 · 15.47px

Typography · FT Kunst Grotesk

body16px · 500 · 19.2px

h156px · 500 · 55.44px

h348px · 500 · 48px

h432px · 500 · 32px

body18px · 500 · 21.6px

link16px · 400 · 16px

button14px · 400 · 17.5px

caption14px · 400 · 16.1px

nav-link16px · 500 · 24px

body16px · 400 · 26px

body16px · 400 · 19.2px

body19.2px · 400 · 23.04px

body16px · 500 · 19.2px

body13px · 500 · 13px

body14px · 500 · 17.5px

Spacing

12px

8px

32px

4px

24px

16px

20px

48px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.05) 1px 6px 16px 0px inset, rgba(255, 255, 255, 0.05) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.02) 0px 4px 12px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 0px, rgba(0, 0, 0, 0.03) 0px 2px 12px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px

Components · 5

Remixes of Cloudflare

Latest remixes

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

Remix it