Typography
Headings
Framer only allows for Headings 1 to Heading 3 in the Text Styles panel. However we can work around this. When using Heading 4 to Heading 6, you need to set the Tag in the Accessibility properties to the appropriate heading tag (Heading 4 = h4). You can also apply this same logic to headings you don't want to be treated as a semantic heading (you may want the heading style, without the HTML tag and meaning), in this case you can change the Tag in the Accessibility properties to 'p'.
Heading / H0
Heading 0 - 72pt
Heading / H1
Heading 1 - 56pt
Heading / H2
Heading 2 - 40pt
Heading / H3
Heading 3 - 32pt
Heading / H4
Heading 4 - 24pt
Heading / H5
Heading 5 - 20pt
Heading / H6
Heading 6 - 16pt
Text / Paragraphs
Font Size / XL - Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / XL - Semibold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / L - Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / L - Semibold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / M - Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / M - Semibold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / S - Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / S - Semibold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / XS - Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / XS - Semibold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Text / Button
Font Size / Regular
Button
Font Size / Small
Button
Colours
Framer only allows for Headings 1 to Heading 3 in the Text Styles panel. However we can work around this. When using Heading 4 to Heading 6, you need to set the Tag in the Accessibility properties to the appropriate heading tag (Heading 4 = h4). You can also apply this same logic to headings you don't want to be treated as a semantic heading (you may want the heading style, without the HTML tag and meaning), in this case you can change the Tag in the Accessibility properties to 'p'.
Base
White
#F9F6F0
Black
#181801
Dark Grey
#56534D
Light Grey
#D4D3D0
Primary
800
#272702
600
#555507
400
#9B9B12
100
#D4D43A
Text
Primary - Dark mode
#FFFFFF
Secondary - Dark mode
#D4D3D0
Primary - Light mode
#181801
Secondary - Light mode
#6F6B62
Spacing & Sizing
ARCH Template uses the 4pt system for both spacing & typography. Apart from spacing blocks below, there are no set sections that come with set padding or spacing in the ARCH Template style guide. This spacing scale is for your reference when setting spacing on stacks and grids. We recommend sticking to this scale for site-wide consistency.
Spacing scale
• 4px
• 8px
• 16px
• 24px
• 32px
• 40px
• 48px
• 56px
• 64px
• 72px
• 80px
• 120px
• 160px
Horizontal padding blocks
Desktop 40px
Tablet 32px
Phone 16px
Container blocks
L Container - 1280px Max Width
UI component
Copy buttons from here, or drag them from the Assets panel into your designs. All buttons have variants such as left and right icons, styling choices and so on. To edit a button's styling, click into it to edit the component.
Icons
S- 24x24