tetraeder.solar1
Colors
Spacing
xs
4px
sm
8px
md
16px
lg
24px
xl
40px
gutter
24px
margin
24px
Rounded
none0px
sm4px
md8px
lg16px
xl24px
full9999px
Shadows
sm
0px 0px 8px 1.6px rgba(22, 63, 80, 0.2)
md
0px 5px 8px 1.6px rgba(22, 63, 80, 0.1)
lg
6px 6px 9px rgba(0, 0, 0, 0.2)
xl
12px 12px 50px rgba(0, 0, 0, 0.4)
Font
Poppins, sans-serif
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
RobotoSlab, sans-serif
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline DisplayRobotoSlab, sans-serif · 60.8px · 500
Display headline
Headline LGRobotoSlab, sans-serif · 48px · 700
The quick brown fox
Headline MDRobotoSlab, sans-serif · 42px · 700
Design systems at scale
Headline SMRobotoSlab, sans-serif · 32px · 700
Color, type, and spacing
Text
Body LGPoppins, sans-serif · 1.2rem · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDPoppins, sans-serif · 1rem · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMPoppins, sans-serif · 0.875rem · 400
Supporting text, captions, and metadata appear at this size.
Label LGPoppins, sans-serif · 1rem · 600
Button label · Primary action
Label MDPoppins, sans-serif · 0.875rem · 500
Form label · Required field
Label SMPoppins, sans-serif · 0.75rem · 500
Badge · Tag · Micro-copy