rasen.ai2
Colors
Spacing
xs
4px
sm
12px
md
16px
lg
32px
xl
64px
gutter
16px
margin
24px
Rounded
none0px
sm4px
md8px
lg16px
xl24px
full9999px
Shadows
sm
0 1px 3px 0 rgba(0,0,0,0.4)
md
0 4px 12px 0 rgba(0,0,0,0.5)
lg
0 10px 30px 0 rgba(0,0,0,0.6)
xl
0 24px 48px 0 rgba(0,0,0,0.7)
Font
gilroy-regular, sans-serif
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
gilroy-medium, sans-serif
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
ivyora
Aa Bb Cc 0123
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Heading
Headline Displaymartina · 48px · 400
Display headline
Headline LGmartina · 40px · 400
The quick brown fox
Headline MDivyora · 32px · 400
Design systems at scale
Headline SMivyora · 24px · 400
Color, type, and spacing
Text
Body LGgilroy-regular, sans-serif · 18px · 400
The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.
Body MDgilroy-regular, sans-serif · 16px · 400
The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.
Body SMgilroy-regular, sans-serif · 14px · 400
Supporting text, captions, and metadata appear at this size.
Label LGgilroy-medium, sans-serif · 19.2px · 700
Button label · Primary action
Label MDgilroy-medium, sans-serif · 16px · 500
Form label · Required field
Label SMgilroy-medium, sans-serif · 12px · 500
Badge · Tag · Micro-copy