Clearspace is a brand guidelines template for Framer. Publish your logo, colours, type, voice and photography rules as a real website your team, agencies and partners can open, search and link to, instead of a PDF nobody can find.

Brand and identity designers handing a system over to a client

Startups and companies that want one living brand book

Agencies building brand portals for several clients

Home: brand essence, values, chapter index, core palette and a v2.1 changelog

Logo: versions, clear space diagram, minimum sizes, approved backgrounds and eight misuse examples

Colour: primary and secondary palettes, proportions bar and a contrast grid

Type: live type testers, the type scale and four setting rules

Voice: principles with we say / we don't examples, before-and-after rewrites and a word list

Imagery: photo principles, do and don't examples and specs for photographers

Downloads: file list with download links, plus a request form

404

Swatch: click the colour or any value (HEX, RGB, HSL, CMYK, Pantone) to copy it. Shows WCAG contrast against white and black.

Contrast Grid: every pair in your palette checked against WCAG 2.2, with an AA / AAA switch and a filter for passing pairs. You type the palette as Name:#HEX.

Type Tester: visitors type their own text and change weight, size and italic. It scales down on phones.

Desktop, tablet and phone layouts with a phone menu

Fraunces, Geist and Geist Mono (all free), with colours and text styles in one place

Scroll-in animations, SEO titles and descriptions on every page

Fernway is a made-up brand. The fern logo is part of the demo; replace it with your own files.

The download buttons link to files you upload or host (Framer, Dropbox, Google Drive). The template doesn't create a zip for you.

CMYK values are calculated from the colour unless you type your own print values; Pantone is whatever you enter.

Photos are from Unsplash.

You get a remix link to the full Framer project.