dagster.io2
Colors
Spacing
xs
4px
sm
12px
md
24px
lg
32px
xl
48px
gutter
24px
margin
32px
Rounded
none0px
sm4px
md6px
lg12px
xl24px
full9999px
Shadows
sm
rgba(79, 67, 221, 0.05) 0px 1px 1px 0px
md
rgba(79, 67, 221, 0.10) 0px 4px 12px 0px
lg
rgba(79, 67, 221, 0.15) 0px 8px 24px 0px
xl
rgba(79, 67, 221, 0.20) 0px 16px 40px 0px
Font
geist
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline Displaygeist · 64px · 600
Display headline
Headline LGgeist · 48px · 600
The quick brown fox
Headline MDgeist · 32px · 600
Design systems at scale
Headline SMgeist · 24px · 600
Color, type, and spacing
Text
Body LGgeist · 18px · 500
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDgeist · 16px · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMgeist · 14px · 400
Supporting text, captions, and metadata appear at this size.
Label LGgeist · 16px · 600
Button label · Primary action
Label MDgeist · 14px · 600
Form label · Required field
Label SMgeist · 12px · 500
Badge · Tag · Micro-copy