obsidian.md1
Colors
Spacing
xs
4px
sm
8px
md
16px
lg
24px
xl
48px
gutter
16px
margin
24px
Rounded
none0px
sm4px
md8px
lg12px
xl16px
full9999px
Shadows
sm
rgba(255, 255, 255, 0.024) 0px 1px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 5px 10px 5px
md
rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px
lg
0 0 50px 15px rgba(0,0,0,0.5)
xl
0 0 60px 50px rgba(63,22,189,0.3)
Font
Inter
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplayInter · 60px · 600
Display headline
Headline LGInter · 48px · 600
The quick brown fox
Headline MDInter · 36px · 600
Design systems at scale
Headline SMInter · 24px · 600
Color, type, and spacing
Text
Body LGInter · 36px · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDInter · 20px · 500
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMInter · 16px · 400
Supporting text, captions, and metadata appear at this size.
Label LGInter · 20px · 500
Button label · Primary action
Label MDInter · 16px · 500
Form label · Required field
Label SMInter · 14px · 400
Badge · Tag · Micro-copy