Chapter 04

Colours, fonts and components

Every template has its own design system. Colours, fonts and building blocks are set up centrally as styles and components. Change them there and the whole site follows.

Colours

Colours are stored as colour styles in "Assets" (left side of the editor). Each colour style has a role, such as background, text, accent or line.

1. Open Assets and go to the colours.
2. Click a colour style and pick your colour.
3. If the style has a light and a dark value, adjust both. The dark value applies when visitors have set their device to dark mode.

Fonts

Fonts live in the text styles, also under Assets. Every text style has its own sizes for desktop, tablet and phone.

1. Open a text style, for example the one for large headings.
2. Choose a different font or size.
3. Check the tablet and phone sizes. Large headings usually need much smaller values on a phone.
4. Look at the result in the preview at all three widths.

You can upload your brand's own fonts to Framer. Make sure your font license allows use on the web.

Components

Repeating building blocks such as the navigation, product card, buttons or footer are components. A change to the component applies everywhere it is used.

• Change the content in one place: select the component on the page. Its properties (text, link, variant) appear on the right. This change applies only here.
• Change the look everywhere: double-click the component to open its main version. There you change shape, spacing and variants for every instance at once.
• Variants are states of the same component, for example "Default", "Hover" and "Pressed", or the phone version.

Components and styles follow the naming pattern Folder/Name, for example Shop/Product Card. That makes them easy to find in Assets.

Desktop, tablet and phone

Every page has three widths (breakpoints). After larger changes, check all three: switch between widths at the top of the editor, or make the preview window narrower.