Skip to content

Search design systems

Search for a design system by domain or name

Rare UI
1

Colors

Spacing

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

Rounded

none0px
sm0.25rem
md0.375rem
lg0.5rem
xl1rem
full9999px

Shadows

sm

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

md

0 1px 3px 0px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.10)

lg

0 1px 3px 0px rgba(0,0,0,0.10), 0 4px 6px -1px rgba(0,0,0,0.10)

xl

0 1px 3px 0px rgba(0,0,0,0.10), 0 8px 10px -1px rgba(0,0,0,0.10)

Font

Inter

Aa Bb Cc 0123

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz

openRunde

Aa Bb Cc 0123

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz

Heading

Headline DisplayopenRunde · 72px · 700

Display headline

Headline LGopenRunde · 3rem · 700

The quick brown fox

Headline MDopenRunde · 1.875rem · 700

Design systems at scale

Headline SMopenRunde · 1.5rem · 600

Color, type, and spacing

Text

Body LGInter · 18px · 500

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

Body MDInter · 1rem · 400

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

Body SMInter · 0.875rem · 400

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

Label LGInter · 1rem · 500

Button label · Primary action

Label MDInter · 0.875rem · 500

Form label · Required field

Label SMInter · 0.75rem · 500

Badge · Tag · Micro-copy