aios-core
Version:
Synkra AIOS: AI-Orchestrated System for Full Stack Development - Core Framework
306 lines (299 loc) • 8 kB
YAML
---
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