How to Use Claude Design to Build a Brand Kit

A prescriptive, copy-paste guide for using Claude Design to produce a complete brand kit — logo, color palette for light and dark mode, and typography — from minimal inputs (a name, a tagline, a few audience descriptions, a few reference brands). Written for Claude Pro, Max, Team, and Enterprise subscribers who have already turned Claude Design on.

1. Pre-work: the 8-item brief

Before you open Claude Design, write an 8-item brief. Do this in a plain text file. Pasting this into your first prompt saves three or four rounds of back-and-forth.

1. Brand name: <one line>
2. Tagline: <one line>
3. One-sentence positioning: "<Brand> is the <category> for <who> who want <outcome>."
4. Primary audience: <who, what they care about, what they're fleeing>
5. Secondary audiences (up to two more): <same shape>
6. Brand personality adjectives (3–5): e.g. warm, rigorous, quiet, craft-forward
7. Reference brands I admire (3–5): upload screenshots AND list URLs. Note one sentence on
   WHY each reference lands — is it the type, the color, the restraint, the density?
8. Anti-references (2–3): "this is what I want to avoid looking like." Also with screenshots.

Claude Design reads images directly. Take clean screenshots of reference homepages, pricing pages, and dashboards rather than pasting URLs alone — it improves output quality measurably.

2. The 6-prompt discovery loop

This is the core sequence. Six prompts, each builds on the last, each produces a concrete artifact. Paste them exactly as written (substituting your brief) and refine with sliders and inline comments rather than starting over.

Prompt 1 — Propose 3 personality directions

Uploads: your 8-item brief (paste the text), plus all reference-brand screenshots and anti-reference screenshots.

Here is the brand brief for <NAME>. I've attached reference and anti-reference
imagery.

Propose exactly 3 distinct personality directions this brand could take. Each
direction should have:
  - A one-word name (e.g. "Lantern", "Workshop", "Signal")
  - Three sentences on what it feels like
  - Five tone-of-voice adjectives
  - A one-line "anti" statement (what this direction is NOT)
  - A rough visual vibe in three sentences (type feel, color mood, density/pace)

Make the three directions meaningfully different from each other. Do not hedge
into a blend. Do not show logos or colors yet — just write.

Expected output: three named directions in plain prose. Pick one. If none feel right, use inline comments to say which bits resonated and which didn't — don't restart with a new Prompt 1.

Prompt 2 — Develop the chosen direction

I'm going with direction <NAME>. Flesh it out into a one-page brand voice
document:
  - A two-paragraph brand story I could put on an about page
  - Tone-of-voice rules: 5 "we say this" / 5 "we don't say this" pairs
  - Three example taglines in this voice, each with a one-sentence rationale
  - A one-paragraph visual principle paragraph (what the design system should
    feel like — crisp, dense, airy, typographic, geometric, etc.)

Do not generate visuals yet.

Expected output: a short voice doc. Save this; you'll reuse it in the website redesign guide. Refine with inline comments until the "we don't say" list is sharp.

Prompt 3 — Three logo concepts

Now design 3 logo concepts in direction <NAME>, each a separate approach:

  Concept A — Wordmark only. Custom or tuned letterforms, no mark. Explore one
    typographic idea that reflects the personality (e.g. a specific letter
    treatment, a ligature, a monospace moment, a serif/sans pairing).
  Concept B — Wordmark + icon mark. The mark should be geometrically simple,
    work at 16px favicon scale, and reinforce the brand story in one glance.
  Concept C — Monogram / abbreviation. A compact mark using just the initials
    or a key word, suitable for app icons and avatars.

For each concept:
  - Show the logo at three sizes: 32px, 128px, and display (400px+).
  - Show both on dark AND on light background.
  - Include a two-sentence rationale (what's the idea, why does it fit direction <NAME>).

Avoid: swooshes, generic gradient pill logos, overused AI-era tropes
(hexagons + radial gradients, pastel cloud shapes).

The three-concepts-in-one-prompt approach is the biggest single usage saver here. Asking for logos one at a time across three prompts generally consumes meaningfully more of your subscription limit than a single batched request.

Prompt 4 — Refine the chosen logo

Use Claude Design's inline comments, direct edits, and adjustment knobs (or the custom sliders Claude builds for your design) for this step. Don't write a new full prompt — that's the expensive path. Click on the logo and leave comments like:

• "Tighten the letter spacing by about 8%."
• "The mark feels slightly too heavy at small sizes. Reduce stroke weight by one step."
• "Try a slightly warmer version of the primary color — move it 10° toward amber."

When the mark is close but not there, use a targeted follow-up prompt:

Keep the current logo. Change only these things:
  - <specific change 1>
  - <specific change 2>
  - <specific change 3>

Do not redesign the logo. Preserve overall form, proportions, and letterform
choices. Show the result at 32px, 128px, and display scale on both dark and
light backgrounds.

The key pattern: "Keep X, change only Y." This constrains the model and saves usage.

Prompt 5 — Full light + dark palette as semantic tokens

This is the heaviest prompt in the guide. Done right, it produces the entire color system in one shot — both modes, all semantic slots. Do not skip any of the fields below; filling them in for you is what Claude Design is for.

Design the full color system for <BRAND> as a set of semantic tokens.

Output TWO complete palettes — LIGHT MODE and DARK MODE — mirroring each other
at the semantic level. Every semantic token must exist in both modes and must
carry the same meaning (e.g. --primary is "brand identity" in both modes, even
if the hex differs).

Required semantic tokens (every one, both modes):
  --background          --foreground
  --card                --card-foreground
  --popover             --popover-foreground
  --primary             --primary-foreground
  --secondary           --secondary-foreground
  --muted               --muted-foreground
  --accent              --accent-foreground
  --border
  --input
  --ring                (focus ring)
  --destructive         --destructive-foreground   --destructive-subtle
  --success             --success-foreground       --success-subtle
  --warning             --warning-foreground       --warning-subtle
  --info                --info-foreground          --info-subtle

Output format for each mode:
  - A table: token name | OKLCH value | hex preview | one-line usage note
  - Contrast guarantee: every foreground paired with its background hits WCAG
    AA (4.5:1 for body text, 3:1 for large text and UI elements). Flag any
    pair that doesn't.
  - A 2-row visual proof: one row of chips for bg/card/popover/primary/accent/
    muted, one row for destructive/success/warning/info + their subtle variants.

Design principles:
  - Use OKLCH values, not HSL or hex as source. Dark mode should not be "the
    light palette inverted" — lift chroma and shift hue where it helps
    legibility on dark backgrounds.
  - The primary color should be recognizable as the brand's signature even
    in grayscale; don't hide identity behind a safe neutral.
  - Semantic state colors (success/warning/info) should stay visually
    harmonious with the primary — no clashing hues.
  - Keep the palette to ~20 total values per mode. Resist expanding beyond
    the required tokens.

Do not generate imagery. Just the tokens and the visual proof.

Prompt 6 — Typography pair

Design the typography system for <BRAND>.

Select three typefaces:
  - Display (for hero and marketing headlines)
  - Body (for running text, UI labels, everything else)
  - Mono (for code, numbers in tables, tabular data)

Constraints:
  - All three must be released under SIL Open Font License or Apache 2.0
    AND available on Google Fonts (list the exact Google Fonts name).
  - Display + Body should be from different type families and must pair
    deliberately — state the pairing rationale in one sentence.
  - Body must have at least 5 weights and true italics.
  - Mono must have tabular figures.

Output:
  - A type-scale table with exact sizes and line-heights for:
    display (hero), h1, h2, h3, h4, body-lg, body, body-sm, caption, mono.
    Give both rem values and approximate pixel values at 16px root.
  - A one-line "use when" rule for each size.
  - A visual specimen showing each typeface in a headline, a paragraph, and
    UI labels, rendered on the brand's primary background color.
  - A Google Fonts @import line I can paste at the top of globals.css.

Avoid: over-popular pairings (Inter + JetBrains Mono is the current default
of everything — propose something that actually reflects the brand unless
you have a strong reason to default).

Expected output: a type system you can paste into code. If the display typeface feels generic, use an inline comment to name three typefaces you'd prefer it to behave like — don't restart the prompt.

3. Pin the brand system so future projects inherit it

Claude Design lets your team save a design system that every subsequent project auto-inherits. Once pinned, you stop rebuilding the palette in every new design session.

1. Ask Claude to summarize the project's design system — color tokens (both modes), typography scale, logo variants, spacing + radius scale, component primitives it has proposed (buttons, cards, inputs) — and confirm everything is captured.
2. Flag anything missing and ask Claude to fill it in. Typical gaps: focus-ring spec, shadow tokens, motion tokens (duration, easing), icon style rules.
3. Ask Claude to save the system at the organization level under a clear name (e.g. "<Brand> v1.0") so other projects and teammates can inherit it. Exact control location may shift as Claude Design evolves — if you can't find it, ask Claude where the current saving surface lives.
4. When you open a new Claude Design project for marketing collateral or product UI, attach this system at the start so Claude defaults to it for the whole session.

Teams can maintain more than one system. Useful if you run a parent brand with sub-brands or seasonal campaign identities.

4. Export the brand kit

Claude Design exports to several formats. For a brand kit, the useful combinations are:

• Standalone HTML — use this as the public-facing style guide page on your site. Drop it into your repo, swap the site chrome, done.
• PDF — for email attachments, contractor briefs, pitch follow-ups.
• PPTX — for decks that need to reference the brand visually.
• Individual assets — ask Claude explicitly for SVG logo variants, PNG favicons at 16/32/180, and an OG image at 1200×630, then export each. Requesting them by name in the design session is more reliable than hoping a bulk export covers them.
• Folder (zip) — the catch-all. Use for archiving the full session's artifacts.

5. Map the kit to code (Tailwind v4 @theme, CSS vars)

Claude Design's handoff to Claude Code is the fastest path from brand kit to working globals.css. Once the kit is ready, ask Claude Design to package it for handoff, then pass the result to Claude Code with an instruction like the one below:

I'm handing you a Claude Design brand kit bundle. Convert the color tokens
into a Tailwind v4 @theme block in src/app/globals.css, following the
project's existing pattern:

  - Put primitive tokens in :root (light) and .dark (dark-mode overrides),
    referencing them from @theme via var(--token-name).
  - Use OKLCH values as provided — do not convert to HSL or hex.
  - Preserve the foreground / subtle variant pairings (every state color gets
    its triplet: base, foreground, subtle).
  - Also port the typography scale as --text-* tokens in the same @theme
    block, with --text-<name>--line-height pairs where applicable.
  - Drop the @import for the Google Fonts line from the typography system
    at the very top of globals.css.
  - Replace any existing raw hex colors in the file with semantic token refs.
  - Do not touch other files yet. This is a tokens-only change. Show me the
    diff before applying.

This is a one-commit change. The rest of the codebase doesn't get touched until the website redesign guide covers the page-level work.

6. Usage-economy tips

Claude Design usage burns faster than Claude.ai chat does. These habits keep it sustainable:

• One big prompt beats three small ones. Prompts 3 (three logo concepts) and 5 (full semantic palette) are structured this way deliberately. Don't unbundle them.
• Refine, don't restart. Inline comments and sliders are fractional-cost edits. "Scrap this, try again" reprompts are full-cost. If a concept is 70% there, ride it.
• "Keep X, change only Y." This phrasing in follow-up prompts keeps the model anchored and stops it from re-exploring parts that were already decided.
• Close sessions once the kit is pinned. Once the kit is pinned, start a fresh project for the next task rather than piling new work into the branding session — scoped projects are easier to iterate on and easier to reason about against your subscription limits.
• Export aggressively. Export at every stable milestone (after logo, after palette, after typography). Re-exports are free; regenerating a lost artifact is not.
• Claude Design is for design systems and visual work. If you're fighting it to write voice copy or do strategy analysis, you're using the wrong tool and burning the expensive meter. Do that work in Claude.ai (cheaper) and bring the output back.

This guide's companion is How to Use Claude Design to Redesign a Whole Website, which picks up where this one stops — applying the pinned brand system to a full redesign across mobile, standard, and ultrawide breakpoints.