Adapting our design system to different screen sizes and devices, ensuring a seamless experience across web and mobile platforms.
Style Guide.
[ Color ]
Primary
#F73A20
Green
#35C771
Blue
#477EE9
Dark
#0A0A0A
Light
#FFFFFF
Gray
#F8F8F8
Gray 1
#707070
Gray 2
#9B9B9B
Stroke
#EBEBEB
[ Typography ]
Display 01
Name: Geist
Size: 120px
Weight: Semibold
Line Height: 120px
Letter Spacing: -5%
Heading 01
Name: Geist
Size: 80px
Weight: Semibold
Line Height: 88px
Letter Spacing: -5%
Heading 02
Name: Geist
Size: 64px
Weight: Semibold
Line Height: 72px
Letter Spacing: -4%
Heading 03
Name: Geist
Size: 40px
Weight: Semibold
Line Height: 48px
Letter Spacing: -4%
Heading 04
Name: Geist
Size: 32px
Weight: Semibold
Line Height: 40px
Letter Spacing: -4%
Heading 05
Name: Geist
Size: 24px
Weight: Semibold
Line Height: 32px
Letter Spacing: -2%
Heading 06
Name: Geist
Size: 20px
Weight: Medium
Line Height: 28px
Letter Spacing: -2%
Paragraph 1
Name: Geist
Size: 20px
Weight: Regular
Line Height: 28px
Letter Spacing: -2%
Paragraph 2
Name: Geist
Size: 16px
Weight: Regular
Line Height: 24px
Letter Spacing: -2%
Paragraph 3
Name: Geist
Size: 14px
Weight: Regular
Line Height: 20px
Letter Spacing: -2%
Name: Geist
Size: 16px
Weight: Medium
Line Height: 24px
Letter Spacing: -2%
Tag
Name: Geist Mono
Size: 14px
Weight: Regular
Line Height: 20px
Letter Spacing: -4%
[ Button ]
Let's build something that makes a difference :)
