MiniDev UI

Free brand kit generator

Type a name and pick a color to get a live brand kit: logo lockups, color tokens, type scale, voice, business card, app icon and share card. Download the CSS tokens.

Type
Logo shape
Voice
Material
All tools
Get a brand like this

Brand kit · v1.0 · Brand kit

Northwind

Payroll that runs itself.

N

01

Logo

The mark and wordmark always travel together at hero sizes. Below 24px, use the mark alone.

NNorthwind
On canvas
NNorthwind
On ink
NNorthwind
On accent
xxxxNNorthwind

Clear space: x = the height of the mark

N

64px

N

32px

N

16px

16px is the minimum. Never stretch, recolour or outline the mark.

02

Colour

Sampled live from the product's tokens. Click any value to copy it.

PrimaryAa

Northwind Violet

Actions, links, focus. About 10% of any screen.

Partner

Gradients and charts only, next to the accent.

Ink

Primary buttons, headlines on light.

Canvas

The page. About 60%.

Surface

Cards and fields. About 30%.

Graphite

Body text and labels.

Proportion

How much of each colour a typical screen uses.

60 · 30 · 7 · 3

Success

Warning

Danger

Info

03

Typography

Geist for display, Geist for text. Tracking tightens as size grows.

Aa

Geist

Display · 400 to 600

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@£$₹€%?!

Display

72 / 72 · -0.05em

Payroll that runs itself.

Heading

40 / 44 · -0.04em

Payroll that runs itself.

Body

17 / 28 · 0

Clear sentences, one idea each. Numbers in tabular figures. No exclamation marks.

Label

12 / 16 · +0.08em

Status · Updated 16:04

04

Voice

How the brand sounds. Read it out loud; if it sounds like a brochure, rewrite it.

We are

  • Clear
  • Steady
  • Kind

We are not

  • Pushy
  • Vague
  • Loud
“Northwind handles it. Here is what changed.”

Say it like this

“Revolutionize your workflow today!”

Never like this

05

In the product

Material: hairline. Every component below is the real kit, in this brand.

ActivePendingOverdueNewNotifications
N

Northwind

Brand kit

Payroll that runs itself.

06

Out in the world

The same system on the things people actually touch: a card, a phone, a link someone shares.

N
NNorthwind

Sam Rivera

Founder

sam@northwind.com

Business card · 85 × 48 mm

9:41

Tuesday 14 October

NNorthwind

App icon · 1024 px master

NNorthwind

Payroll that runs itself.

northwind.com · Brand kit

Social share card · 1200 × 630

07

Take it with you

The tokens as CSS variables, ready to drop into any Tailwind or plain CSS project.

northwind-tokens.css
/* Northwind brand tokens, generated by MiniDev UI */
:root {
  --accent: …; /*  */
  --accent-2: …; /*  */
  --ink: …; /*  */
  --bg: …; /*  */
  --surface: …; /*  */
  --fg-muted: …; /*  */
  --success: …; /*  */
  --warning: …; /*  */
  --danger: …; /*  */
  --info: …; /*  */
  --on-accent: …; /*  */
  --border: …; /*  */
  --fg: …; /*  */
}
/* material: hairline · display: Geist · text: Geist */

Want a brand kit like this?

MiniDev builds the brand, the product and the site as one system, with a kit like this one at the end.

Talk to MiniDev

How to use it

  1. 1Enter your product name and a one line tagline.
  2. 2Pick a brand color, a type style and a logo shape.
  3. 3Review the kit: logos, palette, type, voice and real world mockups.
  4. 4Download the CSS tokens, or ask MiniDev to design the full brand.

What a brand kit should contain

  • Logo usage: the mark and wordmark on light, dark and brand color, with clear space and a minimum size.
  • Color: a primary, a secondary for gradients and charts, ink, canvas and surface, with rough proportions of use.
  • Type: a display face and a text face with a small, named scale.
  • Voice: three words you are, three you are not, and one sentence to say and one to never say.
  • Tokens: the same decisions as CSS variables, so the product and the site cannot drift apart.

From brand kit to product

The tokens this tool exports use the same names as MiniDev UI, so dropping them into a project restyles every component. That is how each of the eight templates gets its own look from one component set.

Frequently asked questions

Is the brand kit generator free?

Yes. Everything runs in your browser, nothing is stored, and the CSS tokens download for free.

Can I use the generated logo commercially?

The generated lockups are simple starting points built from your name and a basic shape. For a distinctive mark you can trademark, work with a designer.

How do I use the tokens?

Paste the downloaded CSS into your global stylesheet. With MiniDev UI or any shadcn-style setup, components pick up the new accent colors immediately.