From Design Tokens to Brand.md and MCP: The AI Brand Stack

Machine-readable brand systems are not a single format. They are a stack of three complementary layers, each serving a different purpose in the AI toolchain. At the core is the semantic layer—the structured data that gives AI the context it needs to execute on your brand, not just reference it.

Understanding the stack matters because each layer answers a different question. And the order matters: brand identity flows downstream into design execution and AI delivery.

Learn what a semantic layer is and why it matters ->

Layer 1: Design Tokens (W3C-DTCG Compliant)

Design tokens are the foundation. They are key-value pairs that define design decisions: colors, typography, spacing, shadows, animations.

A W3C-DTCG compliant design token looks like this:

{
  "color": {
    "primary": {
      "$value": "#FF6B35",
      "$type": "color",
      "$description": "Primary action color"
    }
  },
  "typography": {
    "heading": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "32px",
        "fontWeight": "bold"
      },
      "$type": "typography"
    }
  }
}

{
  "color": {
    "primary": {
      "$value": "#FF6B35",
      "$type": "color",
      "$description": "Primary action color"
    }
  },
  "typography": {
    "heading": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "32px",
        "fontWeight": "bold"
      },
      "$type": "typography"
    }
  }
}

{
  "color": {
    "primary": {
      "$value": "#FF6B35",
      "$type": "color",
      "$description": "Primary action color"
    }
  },
  "typography": {
    "heading": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "32px",
        "fontWeight": "bold"
      },
      "$type": "typography"
    }
  }
}

The W3C Design Token Community Group standard ensures that tokens are structured consistently and can be consumed by any tool that supports the spec.

What design tokens do:

• Pass technical values between design and development tools

• Maintain consistency across product design systems

• Integrate with Figma, code repositories, and design systems platforms

• Scale across product teams

What design tokens don't do:

• Store semantic meaning or context

• Define when and where to use each element

• Provide AI with enough information to make intelligent decisions

• Scale beyond product design to brand-wide consistency

Design tokens are necessary. They are the foundation. But they are not sufficient for AI-native brand systems.

Layer 2: Brand.md (Brand Identity + Semantic Layer)

Brand.md is the core layer. It captures brand identity, strategic positioning, voice, and the semantic layer that allows AI to execute on brand guidelines.

(Note: Design.md is a complementary format for UI execution, but it is product design centric. Brand.md is brand centric and is the upstream layer that defines identity.)

A brand.md file includes:

# Brand Identity

## Brand Positioning
- Core positioning: [strategic statement]
- Brand personality: [traits]
- Brand values: [values]

# Brand Identity

## Brand Positioning
- Core positioning: [strategic statement]
- Brand personality: [traits]
- Brand values: [values]

# Brand Identity

## Brand Positioning
- Core positioning: [strategic statement]
- Brand personality: [traits]
- Brand values: [values]

What brand.md does:

• Captures brand identity and strategic positioning

• Includes the comprehension layer (semantic names, mood, behavioral rules, scored examples)

• Provides AI with context to make intelligent decisions

• Answers: "What is this brand and how does it think, speak, and look?"

What brand.md doesn't do:

• Document UI component patterns (that's design.md)

• Pass technical tokens between tools (that's design tokens)

Brand.md is brand centric. It is built for AI systems that need to generate content, select colors, compose imagery, and write copy that is authentically on-brand.

How They Stack Together

Brand.md is the core. It contains everything: technical values (colors, fonts, spacing), semantic context (mood, personality, usage rules), and behavioral rules (tone, voice, negative constraints).

Design tokens are optional. If you are also managing product design (web apps, component libraries), you can extract design tokens from brand.md for your design system. But if you are only executing brand (packaging, marketing, brand assets), you don't need a separate token layer. Brand.md is sufficient.

MCP is the delivery mechanism. It takes brand.md and makes it queryable by AI tools in real-time. When an AI tool needs to know "what color should I use?" or "how should I write this?", it queries the MCP endpoint. Brand.md responds.

The stack looks like this:

For brand-only execution:

For product + brand execution:

In both cases, brand.md is the source of truth. Design tokens are optional. MCP is the delivery mechanism.

The Stack Question

When you build a machine-readable brand system, you need all three layers:

Design tokens for product design consistency (Figma, code repositories, design systems platforms).

Brand.md for AI execution (content generation, image generation, brand-wide consistency).

MCP for real-time delivery of brand.md to AI tools at scale.

Without design tokens, product design teams have no consistency. Without brand.md, AI tools have no semantic context. Without MCP, brand.md cannot scale to hundreds of AI calls per day.

Most brands today have only design tokens. Almost none have brand.md. That is the gap Sameness Cloud fills.

Learn more about how Sameness works ->