Skaler-Lab Style Guide
Edit these styles here and the changes will be reflected throughout the project.
To update text, and colors, use the Framer Assets Styles panel on the left hand side of your screen.
To update UI elements, edit the master components on this page.
01 – Typography
Inter
Aa
Headings
Font size: 72px | Line height: 90px | Tracking: -1.44
Heading 1
Font size: 60px | Line height: 72px | Tracking: -1.2
Heading 2
Font size: 48px | Line height: 60px | Tracking: -0.96
Heading 3
Font size: 36px | Line height: 44px | Tracking: -2%
Heading 4
Font size: 30px | Line height: 38px
Heading 5
Font size: 24px | Line height: 32px
Heading 6
Font size: 20px | Line height: 30px
Paragraph x-large
Font size: 18px | Line height: 28px
Paragraph large
Font size: 16px | Line height: 24px
Paragraph medium
Font size: 14px | Line height: 20px
Paragraph small
Font size: 12px | Line height: 18px
Paragraph x-small
Font size: 18px | Line height: 22px
Features small
Font size: 14px | Line height: 20px
Features x-small
02 – Colors
Base colors
These are the main colors that make up the majority of the colors used in the design system.
AAA
Black
#000000
AAA
White
#FFFFFF
Primary colors
The primary color is your "brand" color, and is used across all elements such as buttons, links, inputs, etc.
AAA
Neon Green
#BEF84F
AAA
Royalty Purple
#894FF8
AAA
Black 900
#0E0E0E
Gray colors
Gray is a neutral color and is the foundation of the color system.
AAA
Black 50
#393939
AAA
Black 100
#D9D9D9
AAA
Black 200
#0E0E0E
AA
Black 300
#7D7D7D
AAA
Black 400
#606060
AAA
Black 500
#545454
AAA
Black 600
#454545
AAA
Black 700
#393939
AAA
Black 800
#1A1A1A
03 – Shadows
xxsmall
xsmall
small
medium
large
xlarge
xxlarge