Design practice

Brand-to-Token Translation

Take an existing brand's visual identity and map it to a three-tier design token architecture

Start the exercise

01 / Prepare

What you’ll
work on.

Take an existing brand's visual identity (from a public brand guidelines document or your own brand sprint exercise) and translate it into a structured three-tier design token architecture. Practice the bridge between brand design and digital product implementation.

Before you begin

  • Understanding of the three-tier token model (reference, semantic, component)
  • Access to a brand's guidelines or visual identity assets
  • Understanding of reference, semantic, and component design tokens
  • Basic JSON familiarity

02 / Practice

The work,
step by step.

Work through these 6 parts at your own pace. Keep your notes and work together so you can review them when you finish.

  1. Audit the Brand Assets

    45 min

    1. Choose a brand — Use a publicly available brand guidelines document (Slack, Spotify, IBM, or similar) or your work from the Brand Identity Sprint exercise

    2. Extract the visual primitives: every color used (primary, secondary, neutral, semantic), typography (typefaces, sizes, weights), spacing patterns (if documented), border radius, shadow, elevation values (if present), motion values (duration, easing — if the brand defines them)

  2. Define Reference Tokens

    45 min

    1. Map every raw value to a reference token

      {
  "ref": {
    "color": {
      "brand-blue": { "500": "#4A154B", "400": "#6B2D6E" },
      "neutral": { "0": "#FFFFFF", "100": "#F8F8F8" }
    },
    "font": {
      "family": { "display": "Larsseit", "body": "Lato" }
    },
    "spacing": {
      "base": "4px",
      "scale": { "1": "4px", "2": "8px", "3": "12px" }
    }
  }
}

  3. Define Semantic Tokens

    45 min

    1. Assign intent to the reference values

      {
  "semantic": {
    "color": {
      "surface": { "primary": "{ref.color.neutral.0}", "secondary": "{ref.color.neutral.100}" },
      "text": { "primary": "{ref.color.neutral.900}", "secondary": "{ref.color.neutral.600}" },
      "interactive": { "primary": "{ref.color.brand-blue.500}" },
      "feedback": { "error": "{ref.color.red.500}", "success": "{ref.color.green.500}" }
    },
    "typography": {
      "heading": { "family": "{ref.font.family.display}" },
      "body": { "family": "{ref.font.family.body}" }
    }
  }
}

  4. Define Component Tokens

    30 min

    1. Scope tokens to specific components

      {
  "component": {
    "button": {
      "primary": {
        "background": "{semantic.color.interactive.primary}",
        "text": "{semantic.color.surface.primary}",
        "padding-horizontal": "{ref.spacing.scale.4}",
        "border-radius": "{ref.radius.medium}"
      }
    }
  }
}

  5. Create a Dark Theme

    30 min

    1. Create an alternate semantic token set that remaps the same reference tokens for dark mode

    2. Key changes: surfaces become dark, text becomes light, brand colors may need desaturation

    3. Component tokens remain unchanged — they reference semantic tokens, which resolve differently

  6. Document the Mapping

    30 min

    1. Create a visual diagram or table showing: brand guideline source → reference token → semantic token → component token

    2. Show the full resolution chain for 3 example properties (button background, text color, heading font)

03 / Review

Look at what
you’ve made.

Gather your deliverables, then use the criteria to find what worked and what you would change. They also give a peer something specific to respond to.

What to bring together

  • Brand asset audit (every value extracted from the guidelines)
  • Reference tokens (JSON)
  • Semantic tokens (JSON, aliasing reference tokens)
  • Component tokens for 2–3 components (JSON)
  • Dark theme semantic token override
  • Mapping diagram showing the resolution chain

How to assess your work

Completeness
All brand colors, fonts, and spacing values captured as reference tokens
Semantic layer
Token names communicate intent, not just visual description
Aliasing
Semantic and component tokens reference other tokens, not raw values
Theming
Dark theme works by remapping semantic tokens only
Documentation
Resolution chain is clear — someone could trace any component value back to the brand

Choose your
next exercise.

Browse all exercises