About Clearspace
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.
Good for
- 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
Pages
- 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
Working components
- 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.
Also
- 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
Good to know
- 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.
