Brand Toolkit

Basic Info

Brand Name

Logo (SVG)

Upload SVG file

Upload an SVG file or paste inline SVG code. This is used across color application examples throughout the toolkit.

00. The Name of the Project

Visible on frontend

Hero Image / Video OR paste a Vimeo URL:

About The Project

Image

Fundamental Pillars

Image

Tone of Voice

Image

01. Logotype

Visible on frontend

Hero Image / Video OR paste a Vimeo URL:

Download URL URL for the download button that appears next to the section heading in the hero

Main Logo

Upload main logo Click to browse, or drag & drop files here

Logotype Subsections

02. Color

Visible on frontend

Hero Image / Video OR paste a Vimeo URL:

Color Palette

Corporate Colors

Correct Applications

Examples are automatically generated from your brand colors. The logo SVG from Basic Info will be used on each color background.

Monochromatic (One Ink)

Incorrect Applications

Examples are automatically generated with random colors and colors not in your brand palette to demonstrate incorrect usage. The logo SVG from Basic Info will be used.

03. Typography

Visible on frontend

Hero Image / Video OR paste a Vimeo URL:

Download URL URL for the download button that appears next to the section heading in the hero

Font Management

Font Name (optional) Leave empty to use filename

Upload Font File Supported formats: OTF, TTF, WOFF, WOFF2, EOT (max 10MB)

Typography Content

Type the font names that match your uploaded fonts. The preview will use Primary font for Display/Headings and Secondary font for Body text. CSS will be automatically generated with responsive breakpoints.

Primary Font

Secondary Font

04. Graphic Language

Visible on frontend

Hero Image / Video OR paste a Vimeo URL:

05. Photography

Visible on frontend

Hero Image / Video OR paste a Vimeo URL:

06. Brand in Use

Visible on frontend

Hero Image / Video OR paste a Vimeo URL:

07. Downloads

Visible on frontend

Add downloadable assets. Each card shows a title, optional description, file type badge, and a download link.

Figma Sync

Import from Figma Export

Upload a JSON file exported from Figma to automatically extract colors, typography, and styles. The file should contain style tokens with colors and text styles.

Figma Export JSON File Upload a JSON file exported from Figma containing style tokens

Auto-apply extracted data (update colors and typography automatically)

Import Frames as Images

Paste your Figma file URL and a Personal Access Token. Frames whose names match your section names will be imported automatically as section images.

Figma File URL

Personal Access Token Generate in Figma → Settings → Personal access tokens. Only stored in memory during this session.

Assets

Upload New Asset