Arch-Lab Style Guide
Arch-Lab Style Guide
Arch-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.
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.
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
01 – Typography
01 – Typography
Inter
Inter
Inter
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Headings
Headings
Headings
Font size: 72px | Line height: 90px | Tracking: -1.44
Font size: 72px | Line height: 90px | Tracking: -1.44
Font size: 72px | Line height: 90px | Tracking: -1.44
Heading 1
Font size: 60px | Line height: 72px | Tracking: -1.2
Font size: 60px | Line height: 72px | Tracking: -1.2
Font size: 60px | Line height: 72px | Tracking: -1.2
Heading 2
Font size: 48px | Line height: 60px | Tracking: -0.96
Font size: 48px | Line height: 60px | Tracking: -0.96
Font size: 48px | Line height: 60px | Tracking: -0.96
Heading 3
Font size: 36px | Line height: 44px | Tracking: -2%
Font size: 36px | Line height: 44px | Tracking: -2%
Font size: 36px | Line height: 44px | Tracking: -2%
Heading 4
Font size: 30px | Line height: 38px
Font size: 30px | Line height: 38px
Font size: 30px | Line height: 38px
Heading 5
Font size: 24px | Line height: 32px
Font size: 24px | Line height: 32px
Font size: 24px | Line height: 32px
Heading 6
Font size: 20px | Line height: 30px
Font size: 20px | Line height: 30px
Font size: 20px | Line height: 30px
Paragraph x-large
Font size: 18px | Line height: 28px
Font size: 18px | Line height: 28px
Font size: 18px | Line height: 28px
Paragraph large
Font size: 16px | Line height: 24px
Font size: 16px | Line height: 24px
Font size: 16px | Line height: 24px
Paragraph medium
Font size: 14px | Line height: 20px
Font size: 14px | Line height: 20px
Font size: 14px | Line height: 20px
Paragraph small
Font size: 12px | Line height: 18px
Font size: 12px | Line height: 18px
Font size: 12px | Line height: 18px
Paragraph x-small
Font size: 18px | Line height: 22px
Font size: 18px | Line height: 22px
Font size: 18px | Line height: 22px
Features small
Font size: 14px | Line height: 20px
Font size: 14px | Line height: 20px
Font size: 14px | Line height: 20px
Features x-small
02 – Colors
02 – Colors
02 – Colors
Base colors
Base colors
Base colors
These are the main colors that make up the majority of the colors used in the design system.
These are the main colors that make up the majority of the colors used in the design system.
These are the main colors that make up the majority of the colors used in the design system.
AAA
AAA
AAA
Black
Black
#000000
#000000
#000000
AAA
AAA
AAA
White
White
#FFFFFF
#FFFFFF
#FFFFFF
Primary colors
Primary colors
Primary colors
The primary color is your "brand" color, and is used across all elements such as buttons, links, inputs, etc.
The primary color is your "brand" color, and is used across all elements such as buttons, links, inputs, etc.
The primary color is your "brand" color, and is used across all elements such as buttons, links, inputs, etc.
AAA
AAA
AAA
yellow 50
yellow 50
#F2F1EE
#F2F1EE
#F2F1EE
AAA
AAA
AAA
Black 900
Black 900
#0E0E0E
#0E0E0E
#0E0E0E
Gray colors
Gray colors
Gray colors
Gray is a neutral color and is the foundation of the color system.
Gray is a neutral color and is the foundation of the color system.
Gray is a neutral color and is the foundation of the color system.
AAA
AAA
AAA
Black 50
Black 50
#393939
#393939
#393939
AAA
AAA
AAA
Black 100
Black 100
#D9D9D9
#D9D9D9
#D9D9D9
AAA
AAA
AAA
Black 200
Black 200
#0E0E0E
#0E0E0E
#0E0E0E
AA
AA
AA
Black 300
Black 300
#7D7D7D
#7D7D7D
#7D7D7D
AAA
AAA
AAA
Black 400
Black 400
#606060
#606060
#606060
AAA
AAA
AAA
Black 500
Black 500
#545454
#545454
#545454
AAA
AAA
AAA
Black 600
Black 600
#454545
#454545
#454545
AAA
AAA
AAA
Black 700
Black 700
#393939
#393939
#393939
AAA
AAA
AAA
Black 800
Black 800
#1A1A1A
#1A1A1A
#1A1A1A
03 – Shadows
03 – Shadows
03 – Shadows
xxsmall
xxsmall
xsmall
xsmall
small
small
medium
medium
large
large
xlarge
xlarge
xxlarge
xxlarge