Skip to content

Search design systems

Search for a design system by domain or name

Attio
6

Colors

Spacing

xs
4px
sm
8px
md
16px
lg
24px
xl
40px
gutter
16px
margin
24px

Rounded

none0px
sm0.25rem
md0.375rem
lg0.5rem
xl0.75rem
full9999px

Shadows

sm

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

md

0 4px 8px -2px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04)

lg

0 10px 24px -4px rgba(0,0,0,0.10), 0 4px 8px -2px rgba(0,0,0,0.06)

xl

0 24px 48px -8px rgba(0,0,0,0.14), 0 8px 16px -4px rgba(0,0,0,0.08)

Font

inter

Aa Bb Cc 0123

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz

interDisplay

Aa Bb Cc 0123

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz

Heading

Headline DisplayinterDisplay · 4rem · 600

Display headline

Headline LGinterDisplay · 3.5rem · 600

The quick brown fox

Headline MDinterDisplay · 2.5rem · 600

Design systems at scale

Headline SMinterDisplay · 2rem · 600

Color, type, and spacing

Text

Body LGinter · 1.125rem · 500

The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.

Body MDinter · 1rem · 500

The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.

Body SMinter · 0.875rem · 500

Supporting text, captions, and metadata appear at this size.

Label LGinter · 1.25rem · 500

Button label · Primary action

Label MDinter · 0.875rem · 500

Form label · Required field

Label SMinter · 0.75rem · 500

Badge · Tag · Micro-copy