BRAND_KIT_V1

Brand Kit Generator

One brand name, one seed color — get a coherent palette, typography pairing, and logo lockups you can ship today.

Inputs

Color Palette

Typography Preview

Modern Editorial

Nimbus

Clarity for builders.

Body copy renders in Inter. Use heading weight 700 for display type and weight 400 for paragraphs. Tech, B2B, professional services.

Logo Lockups

Wordmark

Nimbus

Reverse

Nimbus

Icon mark

N
Nimbus

Stacked

N

NIMBUS

Export

:root {
  --brand-primary: #00f0ff;
  --brand-primary-dark: #009aa3;
  --brand-primary-light: #9ef5fa;
  --brand-secondary: #0666e0;
  --brand-accent: #ff0f00;
  --brand-neutral-dark: #081111;
  --brand-neutral-light: #eef6f7;
  --brand-heading-font: "Inter", "Geist Sans", system-ui, -apple-system, sans-serif;
  --brand-body-font: "Inter", "Geist Sans", system-ui, -apple-system, sans-serif;
}

How is the palette generated?

Your seed color is converted to HSL, then we derive primary, dark, and light variants by adjusting lightness, plus a secondary (analogous hue) and a complementary accent. Two neutrals are pulled from the same hue with low saturation for backgrounds and surfaces.

Where do the fonts come from?

The pairings are curated combinations of widely available Google Fonts plus solid system fallbacks. The preview uses system fallbacks for instant rendering; when you copy the CSS export you get the full font-family stack to use in your own project (drop the matching `@import` from Google Fonts at the top).

Is any of this stored on a server?

No. Everything runs in your browser — color math, lockups, and previews. Your last kit is auto-saved to localStorage so you can revisit and tweak.