Version 1.0
Here's a complete styleguide based on Framepad for easy customization. Visit https://www.framepad.co/starter-docs for documentation on using Framepad Starter & the style guide effectively.
Headings
This section defines your heading styles. By default, heading styles will apply the corresponding HTML heading tag (H1-H6). If you want to use a heading style but without the HTML tag and meaning, we can change the tag in the Accessibility properties to 'p'. See the documentation for more information.
Heading / H1
Heading 1
Heading / H2
Heading 2
Heading / H3
Heading 3
Heading / H4
Heading 4
Heading / H5
Heading 5
Heading / H6
Heading 6
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 / Text Links
Text Link / Text Link Style 1
Text Link / Text Link Style 2
Text Link / Text Link Style 3
Use this section to define and keep track of your colors. Don't forget to create color styles for each swatch in the 'Shared Colors' section.
White
Grayscle / 50
Grayscle / 100
Grayscle / 200
Grayscle / 300
Grayscle / 400
Grayscle / 500
Grayscle / 600
Grayscle / 700
Grayscle / 800
Grayscle / 900
Color / Black
Spacing Scale
Framepad Starter 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 Framepad 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. See the documentation for more information.
1px
2px
4px
8px
12px
16px
24px
32px
48px
64px
80px
96px
120px
160px
Horizontal Padding Blocks (H Block / Left & Right)
We can use horizontal padding to give each section a left and right margin. Using this spacing system, we can systemise and control page margins site-wide on different breakpoints, with a single parameter. See the documentation for more information.
Desktop - 40px
Tablet - 32px
Phone - 20px
NOTE: If you're using the Framepad Components, you'll need to adjust the spacing by the padding property on the 'H Padding' layer, instead of using this block system. Below are the default horizontal spacing values used in all components. However if you change them, you can document them below.
Desktop
40px left & right
Tablet
32px left & right
Phone
20px left & right
Vertical Padding Blocks (V Block / Top & Bottom)
We can use vertical padding to space sections from each other. We can systemise and control vertical padding with a single parameter. Use any of the four default spacing blocks, or create your own for consistent vertical padding that can be altered site wide. See the documentation for more information.
L - 120px
M - 80px
S - 64px
XS - 40px
NOTE: If you're using the Framepad Components, to adjust the spacing, you'll need to edit the padding property on the 'V Padding' layer, instead of using this block system. Below are the default vertical spacing values used in all components. However if you change them, you can document them below.
L
120px top & bottom
M
80px top & bottom
S
64px top & bottom
XS
40px top & bottom
Spacing Blocks
Spacing Blocks is a way we can easily and quickly space elements. They are a flexible and visual way to space elements. Good for spacing multiple elements that aren't evenly spaced, rather than creating multiple stacks. See the documentation for more information.
6XS - 2px
5XS - 4px
4XS - 8px
3XS - 12px
2XS - 16px
XS - 24px
S - 32px
M - 40px
L- 48px
XL- 56px
2XL - 64px
3XL - 80px
4XL - 96px
5XL - 120px
6XL - 160px
Container Sizes
We can use container sizes to limit the width of our content. The Framepad Starter style guide does not have any set container components within Framer as using components in this way can be limiting. Instead we recommend selecting and copying the required container and pasting it into your frame (remember to change the height from 100px Fixed to 'Fit Content). See the documentation for more information.
L Container - 1280px Max Width
M Container - 960px Max Width
S Container - 768px Max Width
Buttons
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.
NOTE: If you're using the Framepad Component Library, please replace the buttons in the components with the appropriate button from this style guide below, as Framer does not currently automatically combine buttons from the components with buttons from this style guide.
To do so, in the component copied from the component library, select the 'Placeholder Button' and right click.
From the list, select 'Replace With…' —> 'Project', and then select 'Button'.
Icons
Image based icons
XS - 16x16
S - 24x24
M - 40x40
L - 64x64
XL - 80x80
Phosphor icons
XS - 16x16
S - 24x24
M - 40x40
L - 64x64
XL - 80x80
Credits
Notion screenshot by Jonathan Sabbah’s Everyday OS template