Brand-to-Token Mapping

When to Use

• Onboarding a new brand into a multi-brand design system
• Translating a brand guide PDF into usable design tokens
• Auditing whether your tokens faithfully represent the brand
• Setting up a white-label product for a new client

The Prompt

Convert these brand guidelines into a complete set of design tokens.

Brand guidelines:
[paste or describe: primary colors, secondary colors, typography, spacing rules, logo usage, etc.]

Output requirements:
1. **Primitive tokens** — Raw values extracted from the brand guide. Name them by hue and shade (e.g., blue-500, neutral-100).
2. **Semantic tokens** — Map primitives to roles (e.g., color.brand.primary = blue-600, color.text.primary = neutral-900).
3. **Typography tokens** — Font family, sizes, weights, line heights. Map brand type styles to token names (e.g., heading-xl, body-md).
4. **Spacing tokens** — If the brand guide specifies a grid or spacing, extract the scale. Otherwise, suggest one that fits the brand's visual density.
5. **Component tokens** — For key components (button, input, card), map brand colors to component-level tokens.
6. **Multi-brand support** — Structure tokens so another brand can override only the primitive layer.

Format: JSON with comments explaining each mapping decision.
Flag any gaps where the brand guide is ambiguous or incomplete.

Example Output

{
  "_brand": "Acme Corp",
  "_source": "Brand Guidelines v2.3, March 2026",

  "primitives": {
    "color": {
      "blue-50":  "#EFF6FF",
      "blue-100": "#DBEAFE",
      "blue-500": "#3B82F6",
      "blue-600": "#2563EB",
      "blue-700": "#1D4ED8",
      "coral-400": "#FB7185",
      "coral-500": "#F43F5E",
      "neutral-50":  "#FAFAFA",
      "neutral-100": "#F5F5F5",
      "neutral-900": "#171717"
    },
    "typography": {
      "font-brand": "Plus Jakarta Sans",
      "font-mono": "JetBrains Mono"
    }
  },

  "semantic": {
    "color.brand.primary":    { "$value": "{blue-600}", "_note": "Brand guide: 'Acme Blue'" },
    "color.brand.secondary":  { "$value": "{coral-500}", "_note": "Brand guide: 'Accent Coral'" },
    "color.text.primary":     { "$value": "{neutral-900}" },
    "color.text.on-brand":    { "$value": "#FFFFFF", "_note": "White on blue-600 = 8.6:1 contrast" },
    "color.background.primary": { "$value": "#FFFFFF" },
    "color.background.brand":   { "$value": "{blue-600}" }
  },

  "gaps": [
    "Brand guide does not specify a secondary text color. Suggested: neutral-500.",
    "No spacing grid defined. Recommended: 4px base unit to match the compact visual style.",
    "Brand guide shows a gradient but does not specify exact stops. Needs clarification."
  ]
}