Style guide starter
This is a fully customizable style guide starter pack for Framer, to help you create and manage all your colors, text and links styles, as well as the components you'll be using across your project. Preview all your styles on one page to ensure consistency across your whole site.
Colors
Start by setting up your colors to keep them consistent across your website. Whether you're using the 60-30-10 rule or want to use a bigger palette, this section will hep you defining all your colours.
60-30-10 Rule
Primary
60%
Secondary
15%
Secondary
15%
Accent
10%
FULL PALETTE
White
Ascend White
Gray
Blue
Black
Typography
Now that your colors are set, you can move to picking your fonts and set up your text styles for your whole project.
HEADINGS & SUBTITLES
Aa
Clash Grotesk
+
Font family
BODY TEXT
Aa
Clash Grotesk
+
Font family
Headlines
This is Heading 1
This is Heading 2
BODY TEXT
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.