Colors, fonts and styles

Framebrick templates are built on styles: named colors and text settings used across every page. Change a style and everything that uses it updates — the fastest way to make a template look like your brand.

Colors

1. Open Assets in the left panel and find the colour styles under Styles.
2. Click a color style and change its value — your brand color for the accent, your darkest and lightest tones for text and backgrounds.
3. Look through a few pages: buttons, links, backgrounds and hover states follow the new colors.

Keep enough contrast between text and its background so everything stays readable, in light and dark sections alike.

Fonts and text styles

Text styles set the font, size, weight, line height and letter spacing of headings, body text and labels.

1. Open Assets → Styles and click a text style (for example Heading 1).
2. Change the font — Framer offers Google Fonts, and you can upload your own — and adjust the size or weight.
3. Text styles can have their own sizes per breakpoint; check Tablet and Phone after changing sizes.

Changing the font of one text style changes every text that uses it. To switch the whole site to a new typeface, update each text style in turn.

Logo and icon

The logo usually lives in the header and footer components (Assets → Components): replace it there once. The browser-tab icon (favicon) is set in the site settings — see Title, description and share image.

Framer’s guides: Using text styles and Color styles on Framer Academy.

Next: Forms.