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