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 / H1
Heading 1 - 170px
Heading / H2
Heading 2 - 72px
Heading / H3
Heading 3 - 56px
Heading / H4
Heading 4 - 48px
Heading / H5
Heading 5 - 32px
Heading / H6
Heading 6 - 24px
Text / Paragraphs
Font Size / XL - Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Font Size / XL - Bold
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 - Bold
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 - Bold
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 - Bold
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 - Bold
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
Off-White
#F0EEEA
Black
#100C00
Text
Primary- White
#F0EEEA
Primary- Black
#100C00
Secondary Grey - light
#7C7870
Secondary Grey - dark
#C3C1BB
Spacing & Sizing
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'.
Spacing scale
• 4px
• 8px
• 16px
• 24px
• 32px
• 40px
• 48px
• 56px
• 64px
• 72px
• 80px
• 120px
• 160px
UI component
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'.
Buttons
Primary / Default
Button
Small/ Primary / Default
Button
Primary / Inverse
Button
Small/ Secondary / Inverse
Button