Basic Info
Paste the inline SVG code. This will be used in color application examples.
00. The Name of the Project
About The Project
Fundamental Pillars
Tone of Voice
01. Logotype
Logotype Subsections
02. Color
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
Font Management
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.
Main Typography
Secondary Typography
Reading Levels
04. Applications
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.
Upload a JSON file exported from Figma containing style tokens