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
30%
Accent
10%
FULL PALETTE
50
100
200
300
400
500
600
700
800
900
950
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
Outfit
+
Font family
BODY TEXT
Aa
Inter
+
Font family
HEADLINES
This is Heading 1
This is Heading 2
This is Heading 3
This is Heading 4
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.
Links
Set up your links styles for different sections and usages below.
Buttons
Now that your colors are set, you can move to picking your fonts and set up your text styles for your whole project.
Playground
A space to build and list your own components using the styles you've set up above.