Brand Kit Builder

What Is a Brand Kit?

A brand kit is a small set of decisions that everyone on a product team can reuse without asking. The minimum viable kit covers four areas. Typography, with one heading font and one body font. Color, with a background, a text color, a primary, and an accent. Type scale, with a base size and a ratio. And tokens, the CSS variables or JSON values that the production code reads from.

Design tokens are the smallest unit of design decision, captured as a name and a value. The W3C Design Tokens Community Group maintains the format that the JSON export here follows. The benefit is portability: the same tokens feed CSS, Tailwind, native apps, and design tools without anyone re-typing the value.

The kit on this page ships every export format the spec calls for. CSS variables for direct use. SCSS for Sass projects. A Tailwind theme object for Tailwind v4 (and v3 with a small adaptation). JSON tokens that match the W3C draft. A Markdown file you can drop into a repository as DESIGN.md. And an SVG palette you can hand to designers.

How the Contrast Summary Works

Every brand kit needs to clear WCAG AA at minimum. The Web Content Accessibility Guidelines (WCAG) 2.1 from the W3C defines AA normal text as a 4.5:1 contrast ratio and AA large text as 3:1. The brand kit builder shows a contrast summary panel that lists every text and background combination in the kit.

The builder checks four combinations automatically: text on background, primary on background, accent on background, and text on surface. If any combination falls below 4.5:1, the builder flags it with a warning badge and suggests an accessible variant. The accessible variant darkens or lightens the foreground color just enough to cross the threshold.

You can override any color in the kit after the builder suggests it. The contrast check updates immediately when you change a value. Run through the combinations again any time you adjust the palette or background color.

The Five Type Scale Ratios

The type scale ratio determines how much larger each heading step is compared to the previous one. The brand kit builder exposes five named ratios. Choosing the right one depends on how many heading levels the design uses and how much visual separation each step needs.

• Minor second (1.067). The gentlest scale. Steps are close together, so this ratio works best for designs with many heading levels or tight vertical constraints. The jump from h4 to h5 is barely visible.
• Major second (1.125). A modest scale with a clear step between levels. A safe default for most websites and applications. The h3 to h4 step is noticeable without being dramatic.
• Minor third (1.200). A stronger scale with clear hierarchy. Use this when the design has three heading levels and needs each one to be clearly distinct. The h2 to h3 step is obvious.
• Major third (1.250). A bold scale with dramatic jumps between levels. Works well for marketing sites and landing pages where the heading hierarchy needs to carry visual weight. The h1 will feel substantially larger than h2.
• Perfect fourth (1.333). The largest standard ratio. This is for display-heavy layouts where headings dominate the page. Each step takes up significantly more space. Reserve it for designs with two heading levels maximum.

What the Export Formats Give You

The brand kit exports six formats from the same configuration. Pick the format that matches your project setup.

CSS

Custom properties for every color role and font token. Includes the Google Fonts @import with the correct weights for heading, body, and UI fonts. Add the import to your stylesheet and reference the variables in your components.

SCSS

SCSS variables for the same tokens as the CSS export. Compatible with any Sass compilation pipeline. Drop the file into your project and import it before your component styles.

Tailwind

A partial theme object that covers font families, colors, and font sizes from the type scale. Paste it into your tailwind.config file under the theme key. The font sizes use the scale base and ratio you set.

JSON

A W3C Design Tokens Community Group format file with a flat token structure. This is the format most design system tools consume. The token names use the role-based naming convention so they survive a rebrand.

Markdown

A DESIGN.md file listing every font, color, and scale step in readable prose. Use this as a starting document for the team. Update it by hand when the kit changes, or regenerate it from the builder.

SVG

A palette SVG with labeled color swatches for text, background, primary, accent, surface, and border. Drop this into a presentation, a brand guidelines doc, or a Notion page.

Frequently Asked Questions

What is the difference between the brand kit and the playground?

The playground is a live preview environment where you test any combination of fonts, colors, and scales against realistic layouts. The brand kit builder is a structured form that collects the four parts of a brand kit and produces exportable design tokens. The playground is faster for exploration; the brand kit produces cleaner deliverables.

Can I import an existing brand kit from JSON?

The builder saves its state to localStorage and restores it when you return. It does not currently import external JSON files, but you can paste the exported JSON token values into the custom color fields to reconstruct a kit from another source.

Does the brand kit include a logo font?

The kit focuses on heading, body, and UI fonts. The logo text field lets you set a word mark that appears in the preview. Font Blend does not have a logo font tool, but you can find logo-appropriate fonts using the font catalog with the display and handwriting categories.

What is the UI font option for?

Some designs use a different font for interface elements like buttons, labels, and form fields than they do for body text. The UI font field lets you set this separately. If your design uses the body font for interface elements, leave the UI font option off and set only heading and body.

How do I share the kit with my team?

Click the share button to generate a URL that encodes the entire kit configuration. Send that URL to a colleague and it will open with the same fonts, colors, scale, and brand name. The kit is encoded in the URL; no server or account is involved.

Related Tools

The brand kit pulls from three other Font Blend tools. The playground tests the kit on a real layout. The palette generator lists every curated palette. The contrast checker verifies the kit meets WCAG AA.