---
template_name: "Design Tokens Schema"
template_version: "1.0.0"
output_format: "yaml"
destination: "tokens/tokens.yaml"
description: "Source of truth for all design tokens - generated by Brad from consolidated patterns"
---

# Design Tokens
# Generated by Brad (Design System Architect)
# Source: Pattern consolidation and extraction
# All design decisions codified as reusable tokens

metadata:
  version: "1.0.0"
  generated_by: "Brad"
  generated_at: "{{timestamp}}"
  dtcg_spec: "2025.10"
  color_space: "oklch"
  coverage: "{{coverage_percentage}}%"
  reduction: "{{patterns_before}} → {{patterns_after}}"

layers:
  core:
    color:
      "$type": "color"
      neutral-50:
        "$value": "{{color_neutral_50}}"
        "$description": "Lightest neutral"
      neutral-100:
        "$value": "{{color_neutral_100}}"
      neutral-200:
        "$value": "{{color_neutral_200}}"
      neutral-300:
        "$value": "{{color_neutral_300}}"
      neutral-400:
        "$value": "{{color_neutral_400}}"
      neutral-500:
        "$value": "{{color_neutral_500}}"
      neutral-600:
        "$value": "{{color_neutral_600}}"
      neutral-700:
        "$value": "{{color_neutral_700}}"
      neutral-800:
        "$value": "{{color_neutral_800}}"
      neutral-900:
        "$value": "{{color_neutral_900}}"
      accent-primary:
        "$value": "{{color_primary}}"
        "$description": "Primary brand hue"
      accent-secondary:
        "$value": "{{color_secondary}}"
      accent-success:
        "$value": "{{color_success}}"
      accent-warning:
        "$value": "{{color_warning}}"
      accent-error:
        "$value": "{{color_error}}"
      accent-info:
        "$value": "{{color_info}}"
    spacing:
      "$type": "dimension"
      base-unit:
        "$value": "{{spacing_base_unit}}"
      xs:
        "$value": "{{spacing_xs}}"
      sm:
        "$value": "{{spacing_sm}}"
      md:
        "$value": "{{spacing_md}}"
      lg:
        "$value": "{{spacing_lg}}"
      xl:
        "$value": "{{spacing_xl}}"
      2xl:
        "$value": "{{spacing_2xl}}"
      3xl:
        "$value": "{{spacing_3xl}}"
    typography:
      "$type": "typography"
      font-base:
        "$value":
          family: "{{font_family_base}}"
      font-heading:
        "$value":
          family: "{{font_family_heading}}"
      font-mono:
        "$value":
          family: "{{font_family_mono}}"
      sizes:
        "$type": "dimension"
        xs:
          "$value": "{{font_size_xs}}"
        sm:
          "$value": "{{font_size_sm}}"
        base:
          "$value": "{{font_size_base}}"
        lg:
          "$value": "{{font_size_lg}}"
        xl:
          "$value": "{{font_size_xl}}"
        2xl:
          "$value": "{{font_size_2xl}}"
        3xl:
          "$value": "{{font_size_3xl}}"
      weights:
        "$type": "number"
        light:
          "$value": {{font_weight_light}}
        normal:
          "$value": {{font_weight_normal}}
        medium:
          "$value": {{font_weight_medium}}
        semibold:
          "$value": {{font_weight_semibold}}
        bold:
          "$value": {{font_weight_bold}}
      line-height:
        "$type": "number"
        tight:
          "$value": {{line_height_tight}}
        normal:
          "$value": {{line_height_normal}}
        relaxed:
          "$value": {{line_height_relaxed}}
    radius:
      "$type": "dimension"
      none:
        "$value": "0"
      sm:
        "$value": "{{radius_sm}}"
      base:
        "$value": "{{radius_base}}"
      lg:
        "$value": "{{radius_lg}}"
      xl:
        "$value": "{{radius_xl}}"
      full:
        "$value": "9999px"
    shadow:
      "$type": "shadow"
      sm:
        "$value": "{{shadow_sm}}"
      base:
        "$value": "{{shadow_base}}"
      md:
        "$value": "{{shadow_md}}"
      lg:
        "$value": "{{shadow_lg}}"
      xl:
        "$value": "{{shadow_xl}}"
    transition:
      "$type": "duration"
      fast:
        "$value": "{{transition_fast}}"
      base:
        "$value": "{{transition_base}}"
      slow:
        "$value": "{{transition_slow}}"
      easing:
        "$type": "cubic-bezier"
        "$value": "{{transition_easing}}"
    elevation:
      "$type": "number"
      dropdown:
        "$value": {{z_index_dropdown}}
      sticky:
        "$value": {{z_index_sticky}}
      modal:
        "$value": {{z_index_modal}}
      popover:
        "$value": {{z_index_popover}}
      tooltip:
        "$value": {{z_index_tooltip}}
    breakpoint:
      "$type": "dimension"
      mobile:
        "$value": "{{breakpoint_mobile}}"
      tablet:
        "$value": "{{breakpoint_tablet}}"
      desktop:
        "$value": "{{breakpoint_desktop}}"
      wide:
        "$value": "{{breakpoint_wide}}"

  semantic:
    color:
      "$type": "color"
      foreground:
        "$value": "{{color_text}}"
      background:
        "$value": "{{color_background}}"
      primary:
        "$value": "{{color_primary}}"
      primary-hover:
        "$value": "{{color_primary_dark}}"
      primary-disabled:
        "$value": "{{color_primary_light}}"
      secondary:
        "$value": "{{color_secondary}}"
      secondary-hover:
        "$value": "{{color_secondary_dark}}"
      success:
        "$value": "{{color_success}}"
      success-light:
        "$value": "{{color_success_light}}"
      warning:
        "$value": "{{color_warning}}"
      warning-light:
        "$value": "{{color_warning_light}}"
      error:
        "$value": "{{color_error}}"
      error-light:
        "$value": "{{color_error_light}}"
      info:
        "$value": "{{color_info}}"
      info-light:
        "$value": "{{color_info_light}}"
    spacing:
      "$type": "dimension"
      inset-xs:
        "$value": "{{spacing_xs}}"
      inset-sm:
        "$value": "{{spacing_sm}}"
      inset-md:
        "$value": "{{spacing_md}}"
      inset-lg:
        "$value": "{{spacing_lg}}"
      inset-xl:
        "$value": "{{spacing_xl}}"
    typography:
      "$type": "typography"
      body:
        "$value":
          family: "{{font_family_base}}"
          size: "{{font_size_base}}"
          lineHeight: {{line_height_normal}}
          weight: {{font_weight_normal}}
      heading:
        "$value":
          family: "{{font_family_heading}}"
          size: "{{font_size_2xl}}"
          lineHeight: {{line_height_tight}}
          weight: {{font_weight_semibold}}
      code:
        "$value":
          family: "{{font_family_mono}}"
          size: "{{font_size_sm}}"
          lineHeight: {{line_height_normal}}
          weight: {{font_weight_medium}}

  component:
    button:
      "$type": "object"
      primary:
        background:
          "$type": "color"
          "$value": "{{color_primary}}"
        background-hover:
          "$value": "{{color_primary_dark}}"
        text:
          "$value": "{{color_neutral_50}}"
        border-radius:
          "$value": "{{radius_base}}"
        padding-inline:
          "$value": "{{spacing_md}}"
        padding-block:
          "$value": "{{spacing_sm}}"
      secondary:
        background:
          "$value": "{{color_secondary}}"
        background-hover:
          "$value": "{{color_secondary_dark}}"
        text:
          "$value": "{{color_neutral_900}}"
    card:
      "$type": "object"
      background:
        "$value": "{{color_background}}"
      border:
        "$value": "{{color_neutral_200}}"
      radius:
        "$value": "{{radius_lg}}"
      padding:
        "$value": "{{spacing_lg}}"
    input:
      "$type": "object"
      background:
        "$value": "{{color_background}}"
      border:
        "$value": "{{color_neutral_300}}"
      border-focus:
        "$value": "{{color_primary}}"
      text:
        "$value": "{{color_text}}"
      placeholder:
        "$value": "{{color_neutral_500}}"

exports:
  yaml: tokens.yaml
  json: tokens.json
  css: tokens.css
  tailwind: tokens.tailwind.js
  scss: tokens.scss
  dtcg: tokens.dtcg.json