Colors

The palette

Magenta-plum anchors the brand. Coral pops on emphasis moments. Linen and near-black handle surfaces.

Primary #A5205B

Deep #45123B

Pop #EB5E55

Paper #EEE4E8

Ink #010001

Typography

Poppins, all the way down.

One typeface. Five weights. Tight letter spacing on headings, normal on body.

Display 700 Make it real.

H1 700

Build your brand kit

H2 600

Save your Brand Home

H3 600

Turn on the Engine

Body 400

Structure is what turns AI from a novelty into actual leverage. This is the body copy treatment for paragraphs, descriptions, and prose blocks.

Eyebrow For solopreneurs and operators

Use the Brand Kit with AI

Drop it into any AI builder.

Cursor, Lovable, Claude Projects, ChatGPT, v0. Same pattern works everywhere. Link the CSS, paste the prompt, generate on-brand output instantly.

For HTML projects, drop this in <head>

<link rel="stylesheet" href="https://brandidentitykit.com/designhacker/brand.css">

For AI chat tools, paste this prompt

You are building for Design Hacker.
Use the brand at https://brandidentitykit.com/designhacker
Read brand.css for tokens, context.md for voice, prompt.md for full instructions.
Apply DH voice rules: no em dashes, no "not X, Y" patterns, short punchy
sentences, specific numbers, confident framing.

For Cursor / Lovable / v0, reference these URLs

brand.css     https://brandidentitykit.com/designhacker/brand.css
prompt.md     https://brandidentitykit.com/designhacker/prompt.md
context.md    https://brandidentitykit.com/designhacker/context.md
brand.json    https://brandidentitykit.com/designhacker/brand.json
design.md     https://brandidentitykit.com/designhacker/design.md

Tool recipes

Drop-in prompts for every AI builder.

Each tool behaves a little differently. Pick yours, copy the paste-block, run. Result is the same: on-brand output, every time.

ChatGPT

Hosted

ChatGPT will prompt for network access. Click Allow. After that it fetches brand.css and pulls the full design system in one shot.

Show paste-block

Build me a [page type] for [project description].

Use the Design Hacker brand:
- Link this CSS in the head: https://brandidentitykit.com/designhacker/brand.css
- Read the voice rules at: https://brandidentitykit.com/designhacker/prompt.md
- Use the canonical positioning patterns and components

Output the full HTML.

Claude Projects

Hosted

Add brandidentitykit.com/designhacker/prompt.md as a Project source once. Every chat in that Project inherits the brand automatically.

Show setup + paste-block

SETUP (once):
1. Open Project Settings → Add knowledge
2. Add URL: https://brandidentitykit.com/designhacker/prompt.md
3. Add URL: https://brandidentitykit.com/designhacker/brand.css

PROMPT (any chat in that Project):
Build me a [page type] for [project].
Use the Design Hacker brand from the Project sources.
Output the full HTML.

Claude Cowork

Inline only

Cowork's sandbox blocks external network requests. The hosted URL won't work. Use this inline-tokens block instead. Brand carries perfectly.

Show paste-block

Build me a [page type] for [project description].

Use the Design Hacker brand. Inline tokens (since you can't fetch external URLs):

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
  --paper: #EEE4E8;
  --tone: #F5EDF0;
  --ink: #010001;
  --deep: #45123B;
  --color-primary: #A5205B;
  --color-secondary: #45123B;
  --color-pop: #EB5E55;
  --font-family: 'Poppins', system-ui, sans-serif;
  --weight-display: 700;
  --radius-card: 16px;
  --radius-btn: 10px;
}

body { font-family: var(--font-family); background: var(--paper); color: var(--ink); margin: 0; line-height: 1.6; }
h1, h2, h3 { font-family: var(--font-family); font-weight: var(--weight-display); letter-spacing: -0.02em; line-height: 1.1; }
.btn-primary { background: var(--color-primary); color: var(--paper); padding: 12px 24px; border-radius: var(--radius-btn); border: none; font-family: var(--font-family); font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-secondary { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); padding: 12px 24px; border-radius: var(--radius-btn); font-family: var(--font-family); font-weight: 600; }
.eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-pop); font-weight: 500; }
.card { background: #FFFFFF; border-radius: var(--radius-card); padding: 32px; }
</style>

Voice rules (mandatory): NO em dashes, NO "this isn't X, it's Y" patterns, short punchy sentences, specific numbers beat vague claims, ALL CAPS on 1-2 words for emphasis, customer is the hero.

Banned words: synergy, game-changer, revolutionize, elevate, unleash, unlock, best-in-class, cutting-edge, robust, seamless, in today's fast-paced world.

Layout DNA: editorial magazine over generic SaaS. Tight typography, image-right hero, solid-fill primary button + outline secondary.

Output the full single-file HTML.

Cursor

Hybrid

Use @web to inject the brand.css URL into Composer context, or paste the inline tokens. Cursor's Composer respects external URLs when web search is on.

Show paste-block

@web https://brandidentitykit.com/designhacker/prompt.md

Build me a [page type] for [project description].

Use the Design Hacker brand from the URL above. Link brand.css in the head: https://brandidentitykit.com/designhacker/brand.css

Apply the voice rules and layout DNA. Output the full HTML.

Lovable

Hybrid

Lovable CAN fetch external URLs but type system fidelity is loose. Use the inline-tokens block from the Claude Cowork recipe for the cleanest output.

Show paste-block (inline mode recommended)

Build me a [page type] for [project description].

Use the Design Hacker brand. Inline tokens for cleanest type fidelity:

[paste the inline tokens block from the Claude Cowork recipe above]

Voice rules: NO em dashes, NO "not X, Y" patterns, short punchy sentences, specific numbers, customer is the hero.

Output the full single-file HTML.

v0 by Vercel

Hosted

v0 builds files into /public/ but its live preview shows the project root by default. After build, visit /public/[filename].html directly OR download the file.

Show paste-block

Build me a [page type] for [project description].

Use the Design Hacker brand:
- Link this CSS in the head: https://brandidentitykit.com/designhacker/brand.css
- Voice rules at: https://brandidentitykit.com/designhacker/prompt.md
- Apply the canonical positioning + layout DNA

Output as a single HTML file in /public/[descriptive-filename].html

After build, navigate to /public/[descriptive-filename].html to see the output.

Offline mode

Need it offline? Download the Brand Kit.

Some AI tools sandbox their networks (looking at you, Claude Cowork). Download the files locally and drop them in your project folder. Works the same as the hosted version.

Download brand.css Download prompt.md Download context.md Download brand.json Download design.md

Voice

Sample rewrites.

The voice rules at work. Same idea. Two outputs. One sounds like everyone. One sounds like Design Hacker.

Generic AI voice

"In today's fast-paced AI landscape, this isn't just a brand kit, it's a revolutionary solution that empowers entrepreneurs to elevate their workflows."

Design Hacker voice

"Most brand kits hand you colors. This one hands you a SYSTEM. Live CSS, AI builder prompts, ready components. Plug it into Cursor and watch your brand show up everywhere."

Files