Builder brand assets
Official logos, colors, typography, and design tokens.
Builder trademarks and logos may not be modified or used for any purpose other than representing Builder.io.
Logo
Type
Color
Format
Aspect ratio
Width
px
Colors
Click any swatch or chip to copy.
BACKGROUND
bg/page
bg/surface
bg/raised
bg/prominent
bg/translucent
bg/alternative
text
text/primary
text/secondary
text/muted
text/highlight
text/link
text/eyebrow
border
border/default
border/subtle
action
action/primary/bg
action/primary/hover
action/primary/text
action/primary/border
action/primary/effect
action/secondary/bg
action/secondary/hover
action/secondary/text
action/secondary/border
action/tab/bg
action/tab/bg-active
action/tab/bg-hover
action/tab/text
action/tab/text-active
action/tab/text-hover
action/tab/indicator
Primitives
c-blue
c-blue/100
c-blue/200
c-blue/300
c-blue/400
c-blue/500
c-blue/500 40%
c-blue/600
c-blue/900
c-accents
c-violet/400
c-green/400
c-yellow/400
c-red/400
c-pink/400
c-neutral
c-neutral/50
c-neutral/100
c-neutral/200
c-neutral/400
c-neutral/500
c-neutral/600
c-neutral/700
c-neutral/800
c-neutral/900
c-neutral/925
c-neutral/950
c-neutral/950 90%
c-white
c-white/5%
Typography
Geist
Headings, body, UI
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Geist Mono
Labels, code, decorative
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
ExampleUsage
The quick brown fox
Page heroes, top-level marketing headlines.
Geist·56px·w500·lh 1.05·ls -0.02em
The quick brown fox
Section headings, feature titles.
Geist·46px·w500·lh 1.05·ls -0.02em
The quick brown fox
Sub-section headings, card titles.
Geist·37px·w500·lh 1.05·ls -0.02em
The quick brown fox
Dashboard headings, panel titles.
Geist·28px·w500·lh 1.15·ls -0.02em
The quick brown fox
Card titles, sidebar headings.
Geist·23px·w500·lh 1.15·ls -0.02em
The quick brown fox
Small headings, group labels.
Geist·18px·w500·lh 1.15·ls -0.02em
The quick brown fox
Intro paragraphs, hero descriptions.
Geist·18px·w400·lh 1.3
The quick brown fox
General prose and content.
Geist·15px·w400·lh 1.4
The quick brown fox
Medium-weight body copy, emphasized prose.
Geist·15px·w500·lh 1.4
The quick brown fox
Helper text, timestamps, metadata.
Geist·12px·w400·lh 1.4
The quick brown fox
UI labels, category tags.
Geist Mono·14px·w600·lh 1.2·ls 0.02em
The quick brown fox
Small labels, meta text.
Geist Mono·11px·w500·lh 1.2·ls 0.04em
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Icons
5147 iconsPage 1 of 108
1 / 108
Spacing
TokenDesktopMobileVisual
spacing/00px0px
spacing/14px4px
spacing/28px8px
spacing/312px12px
spacing/416px12px
spacing/520px16px
spacing/624px20px
spacing/832px24px
spacing/1040px24px
spacing/1248px24px
spacing/1664px24px
spacing/2080px32px
spacing/2496px32px
spacing/30120px72px
spacing/35150px88px
spacing/50200px80px
Radius
radius/none0px
radius/sm3px
radius/md6px
radius/lg12px
radius/full∞