Brandit

Item: Brandit
Rating: 7

Framer template for publishing brand guidelines online

A Framer Marketplace template by Design from Nick. Its words and photos are demo content.

Live preview Get this template Save page

7.0/10MABTU rating

Home

DESKTOP · 1440 × 12,282/ ↗

MOBILE · 390

Section outline · Home

01heroYellow mascot panel, intro paragraph456
02overviewMission and four values998
03logoPrimary, secondary, clearspace, versions, misuse184
04colorPrimary, secondary and neutral swatches with tints1,422
05typographyTwo typeface specimens with weights1,475
06art directionMascot illustration tiles, animation frame1,749
07in usePoster and merch photo grid1,233
08footerWordmark and back to top188

Rating · Home

Visual design7.1

UX & clarity6.9

Originality7.3

Craft & consistency6.5

Motion5.5

Performance & a11y9.0

This page scores 7.0; the site score weights the home page double.

Main colours

Light·white background·vivid

Typography

Google Sansheading · sans · google Open Sansbody · sans · google

Stack & style

Framer React Google Fonts

Minimal Bold typography Illustration-led Swiss grid Sticky header Service area list

Design DNA

Template: white with a highlighter yellow #F7E86B, black and pastel blue, green and red secondaries. A fixed left sidebar lists Brand Overview, Logo, Color, Typography, Art Direction, In-use with tiny numbers; the right column is a two-column doc grid of section title and paragraph over hairline rules. Heavy black stencil-like wordmark and a hat-wearing blob mascot drive the hero and art-direction tiles. Colour swatches show HEX/RGB/CMYK with tint steps, type specimens show large 'Aa' with weight lists, logo pages show clearspace diagrams and do/don't examples with red crosses.

Worth borrowing

Guidelines-as-website: sticky chapter sidebar plus a two-column title-and-paragraph grid per chapter.
Colour swatches with 75/50/25% tint strips and HEX/RGB/CMYK stacked inside the chip.
Incorrect-usage row: logo variants with red cross badges in the corner.