open-ds 0.0.0-stage → 0.1.1

package/assets/schemes/multi-brand.json

@@ -0,0 +1,4359 @@
+{
+  "$schema": "../schema/scheme.schema.json",
+  "id": "multi-brand",
+  "name": "Multi-brand",
+  "version": "0.1.0",
+  "status": "draft",
+  "summary": "One shared system with three brands as themes. Components never change; brand primitives do.",
+  "description": "Multi-brand is an Open DS scheme: a full set of answers to the Open DS grammar, with the reasons behind each, usage rules, voice and tone, and the tokens that follow. One shared system with three brands as themes. Components never change; brand primitives do.",
+  "ai": {
+    "use_when": "Companies with several brands or white-label products on one component library.",
+    "avoid_when": "A single product with one brand: the brand layer is cost with no user.",
+    "example_products": [
+      "Brand family of apps",
+      "White-label platform",
+      "Agency client portfolio"
+    ]
+  },
+  "scenarios": [
+    {
+      "text": "A customer signs up for a plan on the Birch site, then manages it in the shared account area.",
+      "follows": [
+        "scenarios.q1",
+        "scenarios.q2",
+        "business.q2"
+      ]
+    },
+    {
+      "text": "A product team launches a fourth brand by adding brand primitives, without touching components.",
+      "follows": [
+        "business.q2",
+        "team.q2"
+      ]
+    }
+  ],
+  "voice": {
+    "summary": {
+      "text": "A plain shared voice. Each brand adds its own tone on top, never its own structure.",
+      "follows": [
+        "voice.definition",
+        "voice.count"
+      ]
+    },
+    "principles": [
+      {
+        "text": "Shared structure: object, state, next step.",
+        "follows": [
+          "voice.definition"
+        ]
+      },
+      {
+        "text": "Brand tone lives in headlines and marketing copy, not in errors.",
+        "follows": [
+          "voice.lands",
+          "voice.count"
+        ]
+      },
+      {
+        "text": "Errors and confirmations read the same in every brand.",
+        "follows": [
+          "voice.definition"
+        ]
+      }
+    ],
+    "words": {
+      "use": [
+        "Get started",
+        "Plan",
+        "Order"
+      ],
+      "avoid": [
+        "Brand-specific words in errors",
+        "Jargon"
+      ],
+      "follows": [
+        "voice.definition"
+      ]
+    },
+    "brands": {
+      "aster": {
+        "text": "Calm and precise.",
+        "follows": [
+          "voice.count",
+          "theming.definition"
+        ]
+      },
+      "birch": {
+        "text": "Friendly and helpful.",
+        "follows": [
+          "voice.count",
+          "theming.definition"
+        ]
+      },
+      "coral": {
+        "text": "Upbeat and energetic.",
+        "follows": [
+          "voice.count",
+          "theming.definition"
+        ]
+      }
+    }
+  },
+  "inventory": {
+    "description": "The components this system carries, picked from the grammar catalogue by the components answers. Anything not listed is out.",
+    "follows": [
+      "components.roles",
+      "components.count",
+      "components.definition"
+    ],
+    "in": [
+      {
+        "id": "button",
+        "why": "Every action."
+      },
+      {
+        "id": "toggle-group",
+        "why": "Monthly or yearly prices."
+      },
+      {
+        "id": "input",
+        "why": "Sign-up and account fields."
+      },
+      {
+        "id": "input-otp",
+        "why": "The code that verifies an email or phone."
+      },
+      {
+        "id": "select",
+        "why": "Country and plan options."
+      },
+      {
+        "id": "checkbox",
+        "why": "Terms and preferences."
+      },
+      {
+        "id": "radio-group",
+        "why": "Picks a plan."
+      },
+      {
+        "id": "switch",
+        "why": "Account settings."
+      },
+      {
+        "id": "label",
+        "why": "Names every control."
+      },
+      {
+        "id": "field",
+        "why": "Lays out every form the same way in every brand."
+      },
+      {
+        "id": "textarea",
+        "why": "Messages to support."
+      },
+      {
+        "id": "form",
+        "why": "Validation shared by every product team."
+      },
+      {
+        "id": "badge",
+        "why": "Plan and status labels."
+      },
+      {
+        "id": "avatar",
+        "why": "The customer in the account menu."
+      },
+      {
+        "id": "navigation-menu",
+        "why": "Brand site navigation."
+      },
+      {
+        "id": "breadcrumb",
+        "why": "Where a page sits in the account area."
+      },
+      {
+        "id": "tabs",
+        "why": "Sections of the account."
+      },
+      {
+        "id": "dropdown-menu",
+        "why": "The account menu."
+      },
+      {
+        "id": "sidebar",
+        "why": "Account area navigation."
+      },
+      {
+        "id": "alert",
+        "why": "Billing problems."
+      },
+      {
+        "id": "toast",
+        "why": "Confirms a saved change."
+      },
+      {
+        "id": "skeleton",
+        "why": "Plans and orders while they load."
+      },
+      {
+        "id": "spinner",
+        "why": "A payment in progress."
+      },
+      {
+        "id": "empty",
+        "why": "No orders yet."
+      },
+      {
+        "id": "dialog",
+        "why": "Change a plan."
+      },
+      {
+        "id": "alert-dialog",
+        "why": "Cancel a plan."
+      },
+      {
+        "id": "sheet",
+        "why": "The menu on a phone."
+      },
+      {
+        "id": "popover",
+        "why": "Plan details and fee explanations, opened by tap on any device."
+      },
+      {
+        "id": "card",
+        "why": "Plans and products."
+      },
+      {
+        "id": "separator",
+        "why": "Groups of settings."
+      },
+      {
+        "id": "accordion",
+        "why": "Frequent questions."
+      }
+    ],
+    "out": [
+      {
+        "id": "chart",
+        "why": "Customers manage plans; they do not analyse data."
+      },
+      {
+        "id": "command",
+        "why": "Customers browse; keyboard command menus suit experts."
+      },
+      {
+        "id": "tooltip",
+        "why": "Customers use any device, and on touch screens hover hints never show; a popover explains a fee instead."
+      }
+    ]
+  },
+  "samples": {
+    "description": "Sample content for showing this system: written from its use scenarios, in its voice, with every status mapped to a meaning. Storybook, the site and the docs read it; it is never shared between schemes.",
+    "follows": [
+      "scenarios.q1",
+      "scenarios.q2",
+      "content.q1",
+      "voice.definition"
+    ],
+    "screen": "Your plan",
+    "actions": {
+      "primary": "Get started",
+      "secondary": "Compare plans"
+    },
+    "statuses": [
+      {
+        "label": "Trial",
+        "meaning": "neutral",
+        "why": "The plan works; billing has not started."
+      },
+      {
+        "label": "Active",
+        "meaning": "success",
+        "why": "The plan is paid and running."
+      },
+      {
+        "label": "Renews in 3 days",
+        "meaning": "info",
+        "why": "A payment is coming: news, nothing has gone wrong."
+      },
+      {
+        "label": "Card declined",
+        "meaning": "danger",
+        "why": "The payment failed, so the plan will stop."
+      }
+    ],
+    "metrics": [
+      {
+        "label": "Plan",
+        "value": "Standard"
+      },
+      {
+        "label": "Next payment",
+        "value": "12.00"
+      },
+      {
+        "label": "Orders this year",
+        "value": "9"
+      },
+      {
+        "label": "Member since",
+        "value": "2024"
+      }
+    ],
+    "field": {
+      "label": "Card number",
+      "placeholder": "1234 5678 9012 3456",
+      "hint": "We never store the full number.",
+      "error": "Your card was declined. Try another card or contact your bank.",
+      "invalid": "1234"
+    },
+    "checkbox": [
+      "Email me about my orders",
+      "Send me offers",
+      "Remember this device"
+    ],
+    "select": {
+      "label": "Plan",
+      "options": [
+        "Basic",
+        "Standard",
+        "Plus"
+      ],
+      "value": "Standard"
+    },
+    "switches": [
+      "Renew automatically",
+      "Paperless invoices"
+    ],
+    "messages": {
+      "success": "Your plan is active.",
+      "error": {
+        "title": "Your card was declined.",
+        "description": "Try another card or contact your bank."
+      },
+      "neutral": "No orders yet. Your first order will appear here."
+    },
+    "confirm": {
+      "trigger": "Cancel plan",
+      "title": "Cancel your plan?",
+      "body": "It stays active until the end of the month.",
+      "confirm": "Cancel plan",
+      "cancel": "Keep my plan"
+    },
+    "card": {
+      "title": "Standard plan",
+      "description": "12.00 a month · renews on the 14th",
+      "status": "Active",
+      "primary": "Change plan",
+      "secondary": "View invoices"
+    },
+    "tabs": [
+      {
+        "label": "Plan",
+        "content": "Standard, renews on the 14th."
+      },
+      {
+        "label": "Orders",
+        "content": "9 orders this year."
+      },
+      {
+        "label": "Payment",
+        "content": "Card ending 4242."
+      }
+    ],
+    "menu": {
+      "trigger": "Plan actions",
+      "items": [
+        "Change plan",
+        "Download invoice"
+      ],
+      "destructive": "Cancel plan"
+    }
+  },
+  "themes": [
+    {
+      "id": "aster-light",
+      "brand": "aster",
+      "mode": "light"
+    },
+    {
+      "id": "aster-dark",
+      "brand": "aster",
+      "mode": "dark"
+    },
+    {
+      "id": "birch-light",
+      "brand": "birch",
+      "mode": "light"
+    },
+    {
+      "id": "birch-dark",
+      "brand": "birch",
+      "mode": "dark"
+    },
+    {
+      "id": "coral-light",
+      "brand": "coral",
+      "mode": "light"
+    },
+    {
+      "id": "coral-dark",
+      "brand": "coral",
+      "mode": "dark"
+    }
+  ],
+  "answers": [
+    {
+      "question": "business.q1",
+      "option": "convert",
+      "why": "A company sells several products under several brands.",
+      "because": []
+    },
+    {
+      "question": "business.q2",
+      "option": "many",
+      "why": "Three brands share one system today, more tomorrow.",
+      "because": [
+        "business.q1"
+      ]
+    },
+    {
+      "question": "people.q1",
+      "option": "customers",
+      "why": "Customers who chose one of our brands.",
+      "because": [
+        "business.q1"
+      ]
+    },
+    {
+      "question": "people.q2",
+      "option": "aa",
+      "why": "AA in every brand.",
+      "because": [
+        "people.q1"
+      ]
+    },
+    {
+      "question": "content.q1",
+      "option": "forms",
+      "why": "Product pages, sign-up and account forms.",
+      "because": [
+        "business.q1"
+      ]
+    },
+    {
+      "question": "content.q2",
+      "option": "moderate",
+      "why": "A moderate amount per screen.",
+      "because": [
+        "content.q1"
+      ]
+    },
+    {
+      "question": "tasks.q1",
+      "option": "complete",
+      "why": "Customers sign up and buy.",
+      "because": [
+        "business.q1"
+      ]
+    },
+    {
+      "question": "tasks.q2",
+      "option": "sometimes",
+      "why": "Customers return now and then.",
+      "because": [
+        "people.q1"
+      ]
+    },
+    {
+      "question": "human.q1",
+      "option": "effort",
+      "why": "Low effort, whichever brand they see.",
+      "because": [
+        "people.q1"
+      ]
+    },
+    {
+      "question": "human.q2",
+      "option": "fresh",
+      "why": "Customers see it fresh each time.",
+      "because": [
+        "tasks.q2"
+      ]
+    },
+    {
+      "question": "outcomes.q1",
+      "option": "completion",
+      "why": "Finished sign-ups and orders.",
+      "because": [
+        "tasks.q1"
+      ]
+    },
+    {
+      "question": "outcomes.q2",
+      "option": "off-brand",
+      "why": "A page that looks like the wrong brand loses trust.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "brand.q1",
+      "option": "neutral",
+      "why": "A neutral base each brand can colour.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "brand.q2",
+      "option": "present",
+      "why": "Each brand is clearly present.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "scenarios.q1",
+      "option": "anywhere",
+      "why": "Customers sign up on phones and manage plans on laptops.",
+      "because": [
+        "people.q1"
+      ]
+    },
+    {
+      "question": "scenarios.q2",
+      "option": "short",
+      "why": "Most visits are a few minutes: sign up, check, change.",
+      "because": [
+        "tasks.q1"
+      ]
+    },
+    {
+      "question": "team.q1",
+      "option": "platform",
+      "why": "A platform team serves three product teams.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "team.q2",
+      "option": "monthly",
+      "why": "Brands ship every month.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "typography.roles",
+      "option": "core",
+      "why": "One set of roles across brands.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "typography.count",
+      "option": "some",
+      "why": "One size per kind of text suits every brand font.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "typography.definition",
+      "option": "ratio-proportional",
+      "why": "Ratios work with every brand font.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "typography.values",
+      "option": "regular",
+      "why": "Regular body size suits all brands.",
+      "because": [
+        "brand.q1"
+      ]
+    },
+    {
+      "question": "typography.lands",
+      "option": "forms",
+      "why": "Sign-up and account forms carry most text.",
+      "because": [
+        "tasks.q1"
+      ]
+    },
+    {
+      "question": "color.roles",
+      "option": "core-brand",
+      "why": "Each brand brings its own accent ramp.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "color.count",
+      "option": "three",
+      "why": "Primary, secondary and ghost in every brand.",
+      "because": [
+        "tasks.q1"
+      ]
+    },
+    {
+      "question": "color.definition",
+      "option": "ramp-per-brand",
+      "why": "Shared neutrals; each brand sets its own ramp.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "color.values",
+      "option": "balanced",
+      "why": "Balanced, so any brand hue works.",
+      "because": [
+        "brand.q1"
+      ]
+    },
+    {
+      "question": "color.lands",
+      "option": "brand-moments",
+      "why": "Brand color shows on actions and headlines.",
+      "because": [
+        "brand.q2"
+      ]
+    },
+    {
+      "question": "spacing.roles",
+      "option": "gap-inset-row",
+      "why": "Account tables need a row height.",
+      "because": [
+        "content.q1"
+      ]
+    },
+    {
+      "question": "spacing.count",
+      "option": "one",
+      "why": "One density across brands.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "spacing.definition",
+      "option": "fine",
+      "why": "A fine base unit fits every brand.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "spacing.values",
+      "option": "comfortable",
+      "why": "Comfortable spacing in every brand.",
+      "because": [
+        "content.q2"
+      ]
+    },
+    {
+      "question": "spacing.lands",
+      "option": "fields",
+      "why": "Space matters most between form fields.",
+      "because": [
+        "tasks.q1"
+      ]
+    },
+    {
+      "question": "shape.roles",
+      "option": "control-badge-container",
+      "why": "Each brand sets three corners.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "shape.count",
+      "option": "three",
+      "why": "Control, badge and container.",
+      "because": [
+        "shape.roles"
+      ]
+    },
+    {
+      "question": "shape.definition",
+      "option": "per-brand",
+      "why": "Each brand sets its own corners.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "shape.values",
+      "option": "rounded",
+      "why": "Rounded by default; each brand sets its own corner.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "shape.lands",
+      "option": "buttons-badges",
+      "why": "Corners are the most visible brand difference.",
+      "because": [
+        "brand.q2"
+      ]
+    },
+    {
+      "question": "elevation.roles",
+      "option": "cards-too",
+      "why": "Cards lift slightly to group offers.",
+      "because": [
+        "elevation.definition"
+      ]
+    },
+    {
+      "question": "elevation.count",
+      "option": "two",
+      "why": "One shadow for cards, one for overlays.",
+      "because": [
+        "elevation.roles"
+      ]
+    },
+    {
+      "question": "elevation.definition",
+      "option": "cards",
+      "why": "Cards group plans and offers.",
+      "because": [
+        "content.q1"
+      ]
+    },
+    {
+      "question": "elevation.values",
+      "option": "soft",
+      "why": "Soft shadows fit every brand.",
+      "because": [
+        "brand.q1"
+      ]
+    },
+    {
+      "question": "elevation.lands",
+      "option": "cards-menus",
+      "why": "Cards, menus and dialogs rise.",
+      "because": [
+        "elevation.roles"
+      ]
+    },
+    {
+      "question": "motion.roles",
+      "option": "feedback-guidance",
+      "why": "Feedback and guidance through sign-up.",
+      "because": [
+        "tasks.q1"
+      ]
+    },
+    {
+      "question": "motion.count",
+      "option": "two",
+      "why": "One speed for feedback, one for panels.",
+      "because": [
+        "motion.roles"
+      ]
+    },
+    {
+      "question": "motion.definition",
+      "option": "standard",
+      "why": "A standard ease-out across brands.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "motion.values",
+      "option": "moderate",
+      "why": "Moderate speed across brands.",
+      "because": [
+        "brand.q1"
+      ]
+    },
+    {
+      "question": "motion.lands",
+      "option": "state-panels",
+      "why": "State changes and panels move.",
+      "because": [
+        "motion.roles"
+      ]
+    },
+    {
+      "question": "iconography.roles",
+      "option": "actions-status-nav",
+      "why": "Icons for actions, status and navigation.",
+      "because": [
+        "people.q1"
+      ]
+    },
+    {
+      "question": "iconography.count",
+      "option": "one",
+      "why": "One size next to text.",
+      "because": [
+        "iconography.values"
+      ]
+    },
+    {
+      "question": "iconography.definition",
+      "option": "outline",
+      "why": "One outline set for every brand.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "iconography.values",
+      "option": "match-text",
+      "why": "Icons match the text.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "iconography.lands",
+      "option": "navigation",
+      "why": "Icons help most in navigation.",
+      "because": [
+        "people.q1"
+      ]
+    },
+    {
+      "question": "theming.roles",
+      "option": "mode-brand",
+      "why": "Brand and mode both change.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "theming.count",
+      "option": "several",
+      "why": "Three brands in light and dark: six themes.",
+      "because": [
+        "business.q2",
+        "theming.values"
+      ]
+    },
+    {
+      "question": "theming.definition",
+      "option": "brand-modes",
+      "why": "Brands are theme modes over shared semantics.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "theming.values",
+      "option": "light-dark",
+      "why": "Light and dark ship for every brand.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "theming.lands",
+      "option": "colors-type-shape",
+      "why": "A brand switch changes colors, fonts and corners.",
+      "because": [
+        "theming.roles"
+      ]
+    },
+    {
+      "question": "accessibility.roles",
+      "option": "plus-pressed",
+      "why": "Pressed for touch.",
+      "because": [
+        "accessibility.values"
+      ]
+    },
+    {
+      "question": "accessibility.count",
+      "option": "color-word",
+      "why": "Brand colors vary, so meaning needs a word.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "accessibility.definition",
+      "option": "aa",
+      "why": "AA in every brand and mode.",
+      "because": [
+        "people.q2"
+      ]
+    },
+    {
+      "question": "accessibility.values",
+      "option": "touch",
+      "why": "Customers sign up on phones.",
+      "because": [
+        "scenarios.q1"
+      ]
+    },
+    {
+      "question": "accessibility.lands",
+      "option": "brand-color",
+      "why": "Brand colors must pass in every mode.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "naming.roles",
+      "option": "tokens-keys",
+      "why": "Components get their own keys, shared by every brand.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "naming.count",
+      "option": "three",
+      "why": "Primitives, semantics and component keys.",
+      "because": [
+        "team.q2"
+      ]
+    },
+    {
+      "question": "naming.definition",
+      "option": "by-role",
+      "why": "Role names stay the same in every brand.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "naming.values",
+      "option": "kebab-paths",
+      "why": "Lowercase paths read the same everywhere.",
+      "because": [
+        "team.q1"
+      ]
+    },
+    {
+      "question": "naming.lands",
+      "option": "keys",
+      "why": "Components never change; brand primitives do.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "voice.roles",
+      "option": "ui-marketing",
+      "why": "Each brand has headlines on top of shared UI copy.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "voice.count",
+      "option": "per-brand",
+      "why": "A shared core, with a tone per brand.",
+      "because": [
+        "business.q2"
+      ]
+    },
+    {
+      "question": "voice.definition",
+      "option": "shared-core",
+      "why": "Errors and confirmations are shared; brand tone sits on top.",
+      "because": [
+        "business.q2",
+        "team.q1"
+      ]
+    },
+    {
+      "question": "voice.values",
+      "option": "plain",
+      "why": "The shared core is plain and direct.",
+      "because": [
+        "brand.q1"
+      ]
+    },
+    {
+      "question": "voice.lands",
+      "option": "headlines",
+      "why": "Brand tone shows in headlines and buttons.",
+      "because": [
+        "brand.q2"
+      ]
+    },
+    {
+      "question": "components.roles",
+      "option": "core-content",
+      "why": "Product teams build sign-up and account forms, plus product pages with questions and faces.",
+      "because": [
+        "content.q1",
+        "team.q1"
+      ]
+    },
+    {
+      "question": "components.count",
+      "option": "some",
+      "why": "Three product teams find their next parts ready, kept by one platform team.",
+      "because": [
+        "team.q1",
+        "team.q2"
+      ]
+    },
+    {
+      "question": "components.definition",
+      "option": "family",
+      "why": "Product teams find a whole family ready instead of asking one by one.",
+      "because": [
+        "team.q1",
+        "team.q2"
+      ]
+    },
+    {
+      "question": "components.values",
+      "option": "some",
+      "why": "Variants for emphasis and size let each brand feel present without new components.",
+      "because": [
+        "brand.q2",
+        "outcomes.q2"
+      ]
+    },
+    {
+      "question": "components.lands",
+      "option": "sign-up-account",
+      "why": "Most components sit in sign-up and account pages.",
+      "because": [
+        "content.q1",
+        "tasks.q1"
+      ]
+    }
+  ],
+  "usage": [
+    {
+      "situation": "page-title",
+      "use": "type.title in the brand font",
+      "not": "A brand-specific style",
+      "why": "Roles stay shared; only the brand font changes.",
+      "because": [
+        "typography.roles",
+        "theming.definition"
+      ]
+    },
+    {
+      "situation": "number-in-table",
+      "use": "type.body",
+      "not": "A mono font",
+      "why": "Numbers read like text in every brand.",
+      "because": [
+        "content.q1"
+      ]
+    },
+    {
+      "situation": "paragraph",
+      "use": "type.body",
+      "not": "type.caption",
+      "why": "Regular body size suits every brand.",
+      "because": [
+        "typography.values"
+      ]
+    },
+    {
+      "situation": "field-label",
+      "use": "type.label",
+      "not": "type.caption",
+      "why": "Labels stay readable in every brand.",
+      "because": [
+        "people.q2"
+      ]
+    },
+    {
+      "situation": "selected-row",
+      "use": "color.surface.selected (from the brand)",
+      "not": "A fixed blue",
+      "why": "Selection follows the brand color.",
+      "because": [
+        "theming.definition"
+      ]
+    },
+    {
+      "situation": "error-message",
+      "use": "color.status.danger and a sentence",
+      "not": "The brand color",
+      "why": "Status colors are shared, never branded.",
+      "because": [
+        "accessibility.count",
+        "outcomes.q2"
+      ]
+    },
+    {
+      "situation": "link",
+      "use": "color.text.link (from the brand)",
+      "not": "A fixed blue",
+      "why": "Links follow the brand.",
+      "because": [
+        "theming.definition"
+      ]
+    },
+    {
+      "situation": "status-label",
+      "use": "Badge with a word",
+      "not": "A brand color as status",
+      "why": "Brand hues vary, so meaning needs a word.",
+      "because": [
+        "accessibility.count"
+      ]
+    },
+    {
+      "situation": "related-items",
+      "use": "space.gap.default",
+      "not": "Brand-specific spacing",
+      "why": "Spacing is shared across brands.",
+      "because": [
+        "spacing.count"
+      ]
+    },
+    {
+      "situation": "between-sections",
+      "use": "space.gap.section and cards",
+      "not": "Lines",
+      "why": "Cards group offers in every brand.",
+      "because": [
+        "elevation.definition"
+      ]
+    },
+    {
+      "situation": "table-row",
+      "use": "size.row (comfortable)",
+      "not": "A compact row",
+      "why": "Comfortable rows in every brand.",
+      "because": [
+        "spacing.values"
+      ]
+    },
+    {
+      "situation": "control-corner",
+      "use": "radius.control (set by the brand)",
+      "not": "A hard-coded radius",
+      "why": "Each brand sets its own corner through the theme.",
+      "because": [
+        "shape.values",
+        "theming.definition"
+      ]
+    },
+    {
+      "situation": "status-shape",
+      "use": "radius.badge (set by the brand)",
+      "not": "A hard-coded shape",
+      "why": "The brand sets the badge shape.",
+      "because": [
+        "theming.definition"
+      ]
+    },
+    {
+      "situation": "card",
+      "use": "elevation.card",
+      "not": "A border only",
+      "why": "Cards lift slightly to group offers.",
+      "because": [
+        "elevation.roles"
+      ]
+    },
+    {
+      "situation": "menu-or-dialog",
+      "use": "elevation.overlay and a dimmed page",
+      "not": "No shadow",
+      "why": "Same overlay in every brand.",
+      "because": [
+        "elevation.lands"
+      ]
+    },
+    {
+      "situation": "hover-feedback",
+      "use": "motion.duration.feedback (moderate)",
+      "not": "Brand-specific motion",
+      "why": "Motion is shared across brands.",
+      "because": [
+        "motion.values"
+      ]
+    },
+    {
+      "situation": "reduced-motion",
+      "use": "Reduced motion",
+      "not": "Full motion",
+      "why": "Motion is reduced, not removed.",
+      "because": [
+        "motion.roles"
+      ]
+    },
+    {
+      "situation": "icon-alone",
+      "use": "Icon button with a tooltip, rarely",
+      "not": "A bare icon",
+      "why": "Customers need a hint.",
+      "because": [
+        "iconography.roles"
+      ]
+    },
+    {
+      "situation": "dark-mode",
+      "use": "The dark mode of the active brand",
+      "not": "One dark theme for all brands",
+      "why": "Every brand ships light and dark.",
+      "because": [
+        "theming.values",
+        "theming.definition"
+      ]
+    },
+    {
+      "situation": "keyboard-focus",
+      "use": "button/focus-ring (from the brand)",
+      "not": "Removing the outline",
+      "why": "Focus follows the brand but always shows.",
+      "because": [
+        "people.q2"
+      ]
+    },
+    {
+      "situation": "smallest-target",
+      "use": "size.control.default (touch)",
+      "not": "A compact control",
+      "why": "Customers are often on phones.",
+      "because": [
+        "accessibility.values"
+      ]
+    },
+    {
+      "situation": "commit-action",
+      "use": "Button primary, one per view",
+      "not": "Two primaries",
+      "why": "One clear action per view.",
+      "because": [
+        "outcomes.q1"
+      ]
+    },
+    {
+      "situation": "alternative-action",
+      "use": "Button secondary",
+      "not": "A second primary",
+      "why": "The alternative steps back.",
+      "because": [
+        "color.count"
+      ]
+    },
+    {
+      "situation": "destructive-action",
+      "use": "Button secondary, then confirm",
+      "not": "Button primary",
+      "why": "Confirm before destroying data.",
+      "because": [
+        "outcomes.q2"
+      ]
+    },
+    {
+      "situation": "row-action",
+      "use": "Button ghost with a word",
+      "not": "An icon alone",
+      "why": "A word says what will happen.",
+      "because": [
+        "human.q2"
+      ]
+    },
+    {
+      "situation": "missing-token",
+      "use": "The closest semantic token, then ask for a new one",
+      "not": "A raw value or a brand primitive in the component",
+      "why": "A raw value shows the same in every brand, so it breaks the theme.",
+      "because": [
+        "naming.lands",
+        "theming.definition"
+      ]
+    },
+    {
+      "situation": "button-label",
+      "use": "A shared verb; the brand may choose the headline verb",
+      "not": "Brand slang on account actions",
+      "why": "Shared labels keep the account area the same in every brand.",
+      "because": [
+        "voice.definition"
+      ],
+      "example": "Get started"
+    },
+    {
+      "situation": "error-words",
+      "use": "Shared across brands: plain and specific",
+      "not": "Brand tone in errors",
+      "why": "Errors read the same in every brand, so support can help anyone.",
+      "because": [
+        "voice.definition",
+        "voice.values"
+      ],
+      "example": "Your card was declined. Try another card or contact your bank."
+    },
+    {
+      "situation": "success-words",
+      "use": "Brand tone allowed: Aster calm, Birch friendly, Coral upbeat",
+      "not": "The same flat line in every brand",
+      "why": "Success is a safe moment for brand tone.",
+      "because": [
+        "voice.count"
+      ],
+      "example": "Aster: Your plan is active. · Birch: You're all set! · Coral: Let's go, your plan is live."
+    },
+    {
+      "situation": "empty-words",
+      "use": "Shared structure, brand words",
+      "not": "A different structure per brand",
+      "why": "The structure is the shared core; words carry the brand.",
+      "because": [
+        "voice.definition"
+      ],
+      "example": "No orders yet. Your first order will appear here."
+    },
+    {
+      "situation": "confirm-words",
+      "use": "Shared across brands: plain and specific",
+      "not": "Brand tone when something is lost",
+      "why": "Loss is never the moment for personality.",
+      "because": [
+        "voice.definition"
+      ],
+      "example": "Cancel your plan? It stays active until the end of the month."
+    },
+    {
+      "situation": "first-visit",
+      "use": "Brand tone in the first headline only",
+      "not": "Brand tone in every line",
+      "why": "One headline carries the brand; the rest stays shared.",
+      "because": [
+        "voice.lands"
+      ],
+      "example": "Birch: Hi! Let's set up your plan."
+    },
+    {
+      "situation": "missing-component",
+      "use": "a component from the inventory with brand tokens",
+      "not": "a component made for one brand",
+      "why": "Brands change primitives, never components; one brand-only part breaks the shared library.",
+      "because": [
+        "brand.q1",
+        "outcomes.q2"
+      ]
+    }
+  ],
+  "tokens": {
+    "primitive": {
+      "color": {
+        "$description": "Colour options: raw hue ramps. Each hue has a light ramp and a dark ramp (the same steps tuned for dark backgrounds). Steps only: each theme decides its own base (@). Themes pick from these; components never read them.",
+        "slate": {
+          "$type": "color",
+          "$description": "The slate hue: a light ramp, a dark ramp and its base value.",
+          "light": {
+            "0": {
+              "$value": "#FFFFFF"
+            },
+            "50": {
+              "$value": "#F8FAFC"
+            },
+            "100": {
+              "$value": "#F1F5F9"
+            },
+            "200": {
+              "$value": "#E2E8F0"
+            },
+            "300": {
+              "$value": "#CBD5E1"
+            },
+            "400": {
+              "$value": "#96A3B5",
+              "$description": "Derived: the OKLab midpoint of 300 and 500. Added so muted text can pass 4.5:1 and stay quieter than secondary."
+            },
+            "500": {
+              "$value": "#64748B"
+            },
+            "600": {
+              "$value": "#4B5A6F",
+              "$description": "Derived: the OKLab midpoint of 500 and 700. Added so muted text can pass 4.5:1 and stay quieter than secondary."
+            },
+            "700": {
+              "$value": "#334155"
+            },
+            "800": {
+              "$value": "#1E293B"
+            },
+            "900": {
+              "$value": "#0F172A"
+            },
+            "950": {
+              "$value": "#020617"
+            }
+          },
+          "dark": {
+            "0": {
+              "$value": "#020617"
+            },
+            "50": {
+              "$value": "#0F172A"
+            },
+            "100": {
+              "$value": "#1E293B"
+            },
+            "200": {
+              "$value": "#334155"
+            },
+            "300": {
+              "$value": "#64748B"
+            },
+            "400": {
+              "$value": "#96A3B5",
+              "$description": "Derived: the OKLab midpoint of 300 and 500. Added so muted text can pass 4.5:1 and stay quieter than secondary."
+            },
+            "500": {
+              "$value": "#CBD5E1"
+            },
+            "600": {
+              "$value": "#D6DEE8",
+              "$description": "Derived: the OKLab midpoint of 500 and 700. Added so muted text can pass 4.5:1 and stay quieter than secondary."
+            },
+            "700": {
+              "$value": "#E2E8F0"
+            },
+            "800": {
+              "$value": "#F1F5F9"
+            },
+            "900": {
+              "$value": "#F8FAFC"
+            },
+            "950": {
+              "$value": "#FFFFFF"
+            }
+          }
+        },
+        "teal": {
+          "$type": "color",
+          "$description": "The teal hue: a light ramp, a dark ramp and its base value.",
+          "light": {
+            "100": {
+              "$value": "#E0F2F1"
+            },
+            "300": {
+              "$value": "#7FCFC6"
+            },
+            "500": {
+              "$value": "#14918A"
+            },
+            "600": {
+              "$value": "#0F766E"
+            },
+            "700": {
+              "$value": "#0B5B55"
+            },
+            "800": {
+              "$value": "#08423E"
+            }
+          },
+          "dark": {
+            "100": {
+              "$value": "#08423E"
+            },
+            "300": {
+              "$value": "#0B5B55"
+            },
+            "500": {
+              "$value": "#0F766E"
+            },
+            "600": {
+              "$value": "#14918A"
+            },
+            "700": {
+              "$value": "#7FCFC6"
+            },
+            "800": {
+              "$value": "#E0F2F1"
+            }
+          }
+        },
+        "purple": {
+          "$type": "color",
+          "$description": "The purple hue: a light ramp, a dark ramp and its base value.",
+          "light": {
+            "100": {
+              "$value": "#EDE7FE"
+            },
+            "300": {
+              "$value": "#B79DF7"
+            },
+            "500": {
+              "$value": "#7C4DEB"
+            },
+            "600": {
+              "$value": "#6D28D9"
+            },
+            "700": {
+              "$value": "#5520AA"
+            },
+            "800": {
+              "$value": "#3E177D"
+            }
+          },
+          "dark": {
+            "100": {
+              "$value": "#3E177D"
+            },
+            "300": {
+              "$value": "#5520AA"
+            },
+            "500": {
+              "$value": "#6D28D9"
+            },
+            "600": {
+              "$value": "#7C4DEB"
+            },
+            "700": {
+              "$value": "#B79DF7"
+            },
+            "800": {
+              "$value": "#EDE7FE"
+            }
+          }
+        },
+        "orange": {
+          "$type": "color",
+          "$description": "The orange hue: a light ramp, a dark ramp and its base value.",
+          "light": {
+            "100": {
+              "$value": "#FFEDE5"
+            },
+            "300": {
+              "$value": "#F7A67F"
+            },
+            "500": {
+              "$value": "#E2571D"
+            },
+            "600": {
+              "$value": "#C2410C"
+            },
+            "700": {
+              "$value": "#9A330A"
+            },
+            "800": {
+              "$value": "#732607"
+            }
+          },
+          "dark": {
+            "100": {
+              "$value": "#732607"
+            },
+            "300": {
+              "$value": "#9A330A"
+            },
+            "500": {
+              "$value": "#C2410C"
+            },
+            "600": {
+              "$value": "#E2571D"
+            },
+            "700": {
+              "$value": "#F7A67F"
+            },
+            "800": {
+              "$value": "#FFEDE5"
+            }
+          }
+        },
+        "green": {
+          "$type": "color",
+          "$description": "The green hue: a light ramp, a dark ramp and its base value.",
+          "light": {
+            "100": {
+              "$value": "#E3F4EA"
+            },
+            "300": {
+              "$value": "#5CC283"
+            },
+            "700": {
+              "$value": "#1F7A3A"
+            },
+            "900": {
+              "$value": "#123322"
+            }
+          },
+          "dark": {
+            "100": {
+              "$value": "#123322"
+            },
+            "300": {
+              "$value": "#1F7A3A"
+            },
+            "700": {
+              "$value": "#5CC283"
+            },
+            "900": {
+              "$value": "#E3F4EA"
+            }
+          }
+        },
+        "amber": {
+          "$type": "color",
+          "$description": "The amber hue: a light ramp, a dark ramp and its base value.",
+          "light": {
+            "100": {
+              "$value": "#FFF3D6"
+            },
+            "300": {
+              "$value": "#F2B84B"
+            },
+            "700": {
+              "$value": "#8A5600"
+            },
+            "900": {
+              "$value": "#3A2A05"
+            }
+          },
+          "dark": {
+            "100": {
+              "$value": "#3A2A05"
+            },
+            "300": {
+              "$value": "#8A5600"
+            },
+            "700": {
+              "$value": "#F2B84B"
+            },
+            "900": {
+              "$value": "#FFF3D6"
+            }
+          }
+        },
+        "red": {
+          "$type": "color",
+          "$description": "The red hue: a light ramp, a dark ramp and its base value.",
+          "light": {
+            "100": {
+              "$value": "#FDE7E7"
+            },
+            "300": {
+              "$value": "#F28B8B"
+            },
+            "700": {
+              "$value": "#C42B2B"
+            },
+            "900": {
+              "$value": "#3D1414"
+            }
+          },
+          "dark": {
+            "100": {
+              "$value": "#3D1414"
+            },
+            "300": {
+              "$value": "#C42B2B"
+            },
+            "700": {
+              "$value": "#F28B8B"
+            },
+            "900": {
+              "$value": "#FDE7E7"
+            }
+          }
+        },
+        "black": {
+          "$type": "color",
+          "$description": "See-through black for scrims behind dialogs, light and dark.",
+          "light": {
+            "scrim": {
+              "$value": "#0000008C"
+            }
+          },
+          "dark": {
+            "scrim": {
+              "$value": "#000000B3"
+            }
+          }
+        },
+        "blue": {
+          "$type": "color",
+          "$description": "Blue ramp for the info status and categories. Same values as the accessible-first blue ramp: borrowed, not invented.",
+          "light": {
+            "100": {
+              "$value": "#E1ECFF"
+            },
+            "300": {
+              "$value": "#8AB4F8"
+            },
+            "500": {
+              "$value": "#1A5DD0"
+            },
+            "600": {
+              "$value": "#0B4FC0"
+            },
+            "700": {
+              "$value": "#083C93"
+            },
+            "800": {
+              "$value": "#062C6E"
+            }
+          },
+          "dark": {
+            "100": {
+              "$value": "#062C6E"
+            },
+            "300": {
+              "$value": "#083C93"
+            },
+            "500": {
+              "$value": "#0B4FC0"
+            },
+            "600": {
+              "$value": "#1A5DD0"
+            },
+            "700": {
+              "$value": "#8AB4F8"
+            },
+            "800": {
+              "$value": "#E1ECFF"
+            }
+          }
+        }
+      },
+      "space": {
+        "8": {
+          "$type": "dimension",
+          "$value": "0.5rem"
+        },
+        "12": {
+          "$type": "dimension",
+          "$value": "0.75rem"
+        },
+        "16": {
+          "$type": "dimension",
+          "$value": "1rem"
+        },
+        "24": {
+          "$type": "dimension",
+          "$value": "1.5rem"
+        },
+        "48": {
+          "$type": "dimension",
+          "$value": "3rem"
+        },
+        "$description": "Space options. Names give the size in pixels at the default text size; values are rem."
+      },
+      "size": {
+        "16": {
+          "$type": "dimension",
+          "$value": "1rem"
+        },
+        "20": {
+          "$type": "dimension",
+          "$value": "1.25rem"
+        },
+        "24": {
+          "$type": "dimension",
+          "$value": "1.5rem"
+        },
+        "36": {
+          "$type": "dimension",
+          "$value": "2.25rem"
+        },
+        "44": {
+          "$type": "dimension",
+          "$value": "2.75rem"
+        },
+        "48": {
+          "$type": "dimension",
+          "$value": "3rem"
+        },
+        "$description": "Size options for controls, rows and icons."
+      },
+      "radius": {
+        "0": {
+          "$type": "dimension",
+          "$value": "0rem"
+        },
+        "4": {
+          "$type": "dimension",
+          "$value": "0.25rem"
+        },
+        "8": {
+          "$type": "dimension",
+          "$value": "0.5rem"
+        },
+        "12": {
+          "$type": "dimension",
+          "$value": "0.75rem"
+        },
+        "16": {
+          "$type": "dimension",
+          "$value": "1rem"
+        },
+        "20": {
+          "$type": "dimension",
+          "$value": "1.25rem"
+        },
+        "999": {
+          "$type": "dimension",
+          "$value": "9999px"
+        },
+        "$description": "Corner options.",
+        "full": {
+          "$type": "dimension",
+          "$value": "9999px",
+          "$description": "Fully round."
+        }
+      },
+      "border-width": {
+        "1": {
+          "$type": "dimension",
+          "$value": "1px"
+        },
+        "2": {
+          "$type": "dimension",
+          "$value": "2px"
+        },
+        "$description": "Border width options."
+      },
+      "font": {
+        "size": {
+          "13": {
+            "$type": "dimension",
+            "$value": "0.8125rem"
+          },
+          "14": {
+            "$type": "dimension",
+            "$value": "0.875rem"
+          },
+          "16": {
+            "$type": "dimension",
+            "$value": "1rem"
+          },
+          "20": {
+            "$type": "dimension",
+            "$value": "1.25rem"
+          },
+          "24": {
+            "$type": "dimension",
+            "$value": "1.5rem"
+          },
+          "32": {
+            "$type": "dimension",
+            "$value": "2rem"
+          },
+          "$description": "Type size options. Names are pixels at the default text size; values are rem, so text grows with the user's setting."
+        },
+        "weight": {
+          "400": {
+            "$type": "fontWeight",
+            "$value": 400
+          },
+          "600": {
+            "$type": "fontWeight",
+            "$value": 600
+          },
+          "700": {
+            "$type": "fontWeight",
+            "$value": 700
+          }
+        },
+        "line-height": {
+          "1_2": {
+            "$type": "number",
+            "$value": 1.2,
+            "$description": "A ratio of the text size."
+          },
+          "1_25": {
+            "$type": "number",
+            "$value": 1.25,
+            "$description": "A ratio of the text size."
+          },
+          "1_3": {
+            "$type": "number",
+            "$value": 1.3,
+            "$description": "A ratio of the text size."
+          },
+          "1_4": {
+            "$type": "number",
+            "$value": 1.4,
+            "$description": "A ratio of the text size."
+          },
+          "1_5": {
+            "$type": "number",
+            "$value": 1.5,
+            "$description": "A ratio of the text size."
+          }
+        },
+        "family": {
+          "$description": "Font family options. Each brand's theme picks its display, body, interface and data fonts from these.",
+          "inter": {
+            "$type": "fontFamily",
+            "$value": "Inter, system-ui, sans-serif"
+          },
+          "ibm-plex-mono": {
+            "$type": "fontFamily",
+            "$value": "\"IBM Plex Mono\", ui-monospace, monospace"
+          },
+          "plus-jakarta-sans": {
+            "$type": "fontFamily",
+            "$value": "\"Plus Jakarta Sans\", system-ui, sans-serif"
+          },
+          "poppins": {
+            "$type": "fontFamily",
+            "$value": "Poppins, system-ui, sans-serif"
+          }
+        }
+      },
+      "duration": {
+        "fast": {
+          "$type": "duration",
+          "$value": "120ms",
+          "$description": "Fast: the usual convention for feedback, about 120ms."
+        },
+        "moderate": {
+          "$type": "duration",
+          "$value": "200ms",
+          "$description": "Moderate: a calm, easy-to-follow speed, about 200ms."
+        },
+        "relaxed": {
+          "$type": "duration",
+          "$value": "320ms",
+          "$description": "Relaxed: a slower, springy speed for expressive motion, about 320ms."
+        }
+      },
+      "easing": {
+        "standard": {
+          "$type": "cubicBezier",
+          "$value": [
+            0.2,
+            0,
+            0,
+            1
+          ],
+          "$description": "The easing for feedback transitions."
+        }
+      },
+      "opacity": {
+        "40": {
+          "$type": "number",
+          "$value": 0.4,
+          "$description": "An opacity option."
+        }
+      },
+      "shadow": {
+        "$description": "Raw shadows. Elevation semantics point at these.",
+        "card": {
+          "$type": "shadow",
+          "$value": {
+            "color": "#0F172A14",
+            "offsetX": "0px",
+            "offsetY": "2px",
+            "blur": "8px",
+            "spread": "0px"
+          },
+          "$description": "Raw shadow for card in light mode."
+        },
+        "overlay": {
+          "$type": "shadow",
+          "$value": {
+            "color": "#0F172A29",
+            "offsetX": "0px",
+            "offsetY": "12px",
+            "blur": "32px",
+            "spread": "0px"
+          },
+          "$description": "Raw shadow for overlay in light mode."
+        },
+        "card-dark": {
+          "$type": "shadow",
+          "$value": {
+            "color": "#00000066",
+            "offsetX": "0px",
+            "offsetY": "2px",
+            "blur": "8px",
+            "spread": "0px"
+          },
+          "$description": "Raw shadow for card in dark mode."
+        },
+        "overlay-dark": {
+          "$type": "shadow",
+          "$value": {
+            "color": "#00000080",
+            "offsetX": "0px",
+            "offsetY": "12px",
+            "blur": "32px",
+            "spread": "0px"
+          },
+          "$description": "Raw shadow for overlay in dark mode."
+        }
+      }
+    },
+    "brands": {
+      "aster": {
+        "label": "Aster",
+        "description": "Calm and precise: teal, Inter, small corners.",
+        "theme": {
+          "$description": "The Aster theme: what each brand-dependent semantic key picks, in light and dark, plus mode-free picks (fonts, corners) in base. Info uses blue, kept apart from the brand colour so it never reads as an action. Categories 1 to 5 are teal, purple, orange, blue, green: distinct hues for tags and chart series, with no meaning. Disabled uses the neutral slate.",
+          "base": {
+            "radius": {
+              "control": {
+                "$type": "dimension",
+                "$value": "{radius.4}"
+              },
+              "badge": {
+                "$type": "dimension",
+                "$value": "{radius.4}"
+              },
+              "container": {
+                "$type": "dimension",
+                "$value": "{radius.8}"
+              }
+            },
+            "type": {
+              "display": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.inter}"
+                }
+              },
+              "title": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.inter}"
+                }
+              },
+              "heading": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.inter}"
+                }
+              },
+              "body": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.inter}"
+                }
+              },
+              "label": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.inter}"
+                }
+              },
+              "caption": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.inter}"
+                }
+              },
+              "data": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.inter}"
+                }
+              }
+            }
+          },
+          "light": {
+            "color": {
+              "surface": {
+                "canvas": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.50}"
+                },
+                "default": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.0}"
+                },
+                "raised": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.0}"
+                },
+                "sunken": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.100}"
+                },
+                "selected": {
+                  "$type": "color",
+                  "$value": "{color.teal.light.100}"
+                },
+                "inverse": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.900}"
+                },
+                "scrim": {
+                  "$type": "color",
+                  "$value": "{color.black.light.scrim}"
+                }
+              },
+              "text": {
+                "primary": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.900}"
+                },
+                "secondary": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.700}"
+                },
+                "muted": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.600}"
+                },
+                "inverse": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.0}"
+                },
+                "on-action": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.0}"
+                },
+                "link": {
+                  "$type": "color",
+                  "$value": "{color.teal.light.700}"
+                }
+              },
+              "border": {
+                "default": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.200}"
+                },
+                "strong": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.500}"
+                },
+                "focus": {
+                  "$type": "color",
+                  "$value": "{color.teal.light.600}"
+                }
+              },
+              "action": {
+                "primary": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.teal.light.600}"
+                  },
+                  "hover": {
+                    "$type": "color",
+                    "$value": "{color.teal.light.700}"
+                  }
+                },
+                "secondary": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.slate.light.0}"
+                  },
+                  "hover": {
+                    "$type": "color",
+                    "$value": "{color.slate.light.100}"
+                  }
+                }
+              },
+              "status": {
+                "info": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.blue.light.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.blue.light.100}"
+                  }
+                },
+                "success": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.green.light.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.green.light.100}"
+                  }
+                },
+                "warning": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.amber.light.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.amber.light.100}"
+                  }
+                },
+                "danger": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.red.light.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.red.light.100}"
+                  }
+                }
+              },
+              "category": {
+                "1": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.teal.light.600}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.teal.light.100}"
+                  }
+                },
+                "2": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.purple.light.600}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.purple.light.100}"
+                  }
+                },
+                "3": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.orange.light.600}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.orange.light.100}"
+                  }
+                },
+                "4": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.blue.light.600}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.blue.light.100}"
+                  }
+                },
+                "5": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.green.light.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.green.light.100}"
+                  }
+                }
+              },
+              "disabled": {
+                "text": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.500}"
+                },
+                "surface": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.100}"
+                },
+                "border": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.200}"
+                }
+              }
+            },
+            "elevation": {
+              "card": {
+                "$type": "shadow",
+                "$value": "{shadow.card}"
+              },
+              "overlay": {
+                "$type": "shadow",
+                "$value": "{shadow.overlay}"
+              }
+            }
+          },
+          "dark": {
+            "color": {
+              "surface": {
+                "canvas": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.0}"
+                },
+                "default": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.50}"
+                },
+                "raised": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.100}"
+                },
+                "sunken": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.100}"
+                },
+                "selected": {
+                  "$type": "color",
+                  "$value": "{color.teal.dark.100}"
+                },
+                "inverse": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.900}"
+                },
+                "scrim": {
+                  "$type": "color",
+                  "$value": "{color.black.dark.scrim}"
+                }
+              },
+              "text": {
+                "primary": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.900}"
+                },
+                "secondary": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.500}"
+                },
+                "muted": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.400}"
+                },
+                "inverse": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.50}"
+                },
+                "on-action": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.0}"
+                },
+                "link": {
+                  "$type": "color",
+                  "$value": "{color.teal.dark.700}"
+                }
+              },
+              "border": {
+                "default": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.100}"
+                },
+                "strong": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.300}"
+                },
+                "focus": {
+                  "$type": "color",
+                  "$value": "{color.teal.dark.700}"
+                }
+              },
+              "action": {
+                "primary": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.teal.dark.700}"
+                  },
+                  "hover": {
+                    "$type": "color",
+                    "$value": "{color.teal.dark.800}"
+                  }
+                },
+                "secondary": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.slate.dark.50}"
+                  },
+                  "hover": {
+                    "$type": "color",
+                    "$value": "{color.slate.dark.100}"
+                  }
+                }
+              },
+              "status": {
+                "info": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.blue.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.blue.dark.100}"
+                  }
+                },
+                "success": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.green.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.green.dark.100}"
+                  }
+                },
+                "warning": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.amber.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.amber.dark.100}"
+                  }
+                },
+                "danger": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.red.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.red.dark.100}"
+                  }
+                }
+              },
+              "category": {
+                "1": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.teal.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.teal.dark.100}"
+                  }
+                },
+                "2": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.purple.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.purple.dark.100}"
+                  }
+                },
+                "3": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.orange.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.orange.dark.100}"
+                  }
+                },
+                "4": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.blue.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.blue.dark.100}"
+                  }
+                },
+                "5": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.green.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.green.dark.100}"
+                  }
+                }
+              },
+              "disabled": {
+                "text": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.500}"
+                },
+                "surface": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.100}"
+                },
+                "border": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.200}"
+                }
+              }
+            },
+            "elevation": {
+              "card": {
+                "$type": "shadow",
+                "$value": "{shadow.card-dark}"
+              },
+              "overlay": {
+                "$type": "shadow",
+                "$value": "{shadow.overlay-dark}"
+              }
+            }
+          }
+        }
+      },
+      "birch": {
+        "label": "Birch",
+        "description": "Friendly and helpful: violet, Plus Jakarta Sans, soft corners.",
+        "theme": {
+          "$description": "The Birch theme: what each brand-dependent semantic key picks, in light and dark, plus mode-free picks (fonts, corners) in base. Info uses blue, kept apart from the brand colour so it never reads as an action. Categories 1 to 5 are teal, purple, orange, blue, green: distinct hues for tags and chart series, with no meaning. Disabled uses the neutral slate.",
+          "base": {
+            "radius": {
+              "control": {
+                "$type": "dimension",
+                "$value": "{radius.12}"
+              },
+              "badge": {
+                "$type": "dimension",
+                "$value": "{radius.999}"
+              },
+              "container": {
+                "$type": "dimension",
+                "$value": "{radius.16}"
+              }
+            },
+            "type": {
+              "display": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.plus-jakarta-sans}"
+                }
+              },
+              "title": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.plus-jakarta-sans}"
+                }
+              },
+              "heading": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.plus-jakarta-sans}"
+                }
+              },
+              "body": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.plus-jakarta-sans}"
+                }
+              },
+              "label": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.plus-jakarta-sans}"
+                }
+              },
+              "caption": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.plus-jakarta-sans}"
+                }
+              },
+              "data": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.plus-jakarta-sans}"
+                }
+              }
+            }
+          },
+          "light": {
+            "color": {
+              "surface": {
+                "canvas": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.50}"
+                },
+                "default": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.0}"
+                },
+                "raised": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.0}"
+                },
+                "sunken": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.100}"
+                },
+                "selected": {
+                  "$type": "color",
+                  "$value": "{color.purple.light.100}"
+                },
+                "inverse": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.900}"
+                },
+                "scrim": {
+                  "$type": "color",
+                  "$value": "{color.black.light.scrim}"
+                }
+              },
+              "text": {
+                "primary": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.900}"
+                },
+                "secondary": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.700}"
+                },
+                "muted": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.600}"
+                },
+                "inverse": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.0}"
+                },
+                "on-action": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.0}"
+                },
+                "link": {
+                  "$type": "color",
+                  "$value": "{color.purple.light.700}"
+                }
+              },
+              "border": {
+                "default": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.200}"
+                },
+                "strong": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.500}"
+                },
+                "focus": {
+                  "$type": "color",
+                  "$value": "{color.purple.light.600}"
+                }
+              },
+              "action": {
+                "primary": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.purple.light.600}"
+                  },
+                  "hover": {
+                    "$type": "color",
+                    "$value": "{color.purple.light.700}"
+                  }
+                },
+                "secondary": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.slate.light.0}"
+                  },
+                  "hover": {
+                    "$type": "color",
+                    "$value": "{color.slate.light.100}"
+                  }
+                }
+              },
+              "status": {
+                "info": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.blue.light.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.blue.light.100}"
+                  }
+                },
+                "success": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.green.light.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.green.light.100}"
+                  }
+                },
+                "warning": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.amber.light.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.amber.light.100}"
+                  }
+                },
+                "danger": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.red.light.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.red.light.100}"
+                  }
+                }
+              },
+              "category": {
+                "1": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.teal.light.600}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.teal.light.100}"
+                  }
+                },
+                "2": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.purple.light.600}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.purple.light.100}"
+                  }
+                },
+                "3": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.orange.light.600}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.orange.light.100}"
+                  }
+                },
+                "4": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.blue.light.600}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.blue.light.100}"
+                  }
+                },
+                "5": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.green.light.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.green.light.100}"
+                  }
+                }
+              },
+              "disabled": {
+                "text": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.500}"
+                },
+                "surface": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.100}"
+                },
+                "border": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.200}"
+                }
+              }
+            },
+            "elevation": {
+              "card": {
+                "$type": "shadow",
+                "$value": "{shadow.card}"
+              },
+              "overlay": {
+                "$type": "shadow",
+                "$value": "{shadow.overlay}"
+              }
+            }
+          },
+          "dark": {
+            "color": {
+              "surface": {
+                "canvas": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.0}"
+                },
+                "default": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.50}"
+                },
+                "raised": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.100}"
+                },
+                "sunken": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.100}"
+                },
+                "selected": {
+                  "$type": "color",
+                  "$value": "{color.purple.dark.100}"
+                },
+                "inverse": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.900}"
+                },
+                "scrim": {
+                  "$type": "color",
+                  "$value": "{color.black.dark.scrim}"
+                }
+              },
+              "text": {
+                "primary": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.900}"
+                },
+                "secondary": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.500}"
+                },
+                "muted": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.400}"
+                },
+                "inverse": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.50}"
+                },
+                "on-action": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.0}"
+                },
+                "link": {
+                  "$type": "color",
+                  "$value": "{color.purple.dark.700}"
+                }
+              },
+              "border": {
+                "default": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.100}"
+                },
+                "strong": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.300}"
+                },
+                "focus": {
+                  "$type": "color",
+                  "$value": "{color.purple.dark.700}"
+                }
+              },
+              "action": {
+                "primary": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.purple.dark.700}"
+                  },
+                  "hover": {
+                    "$type": "color",
+                    "$value": "{color.purple.dark.800}"
+                  }
+                },
+                "secondary": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.slate.dark.50}"
+                  },
+                  "hover": {
+                    "$type": "color",
+                    "$value": "{color.slate.dark.100}"
+                  }
+                }
+              },
+              "status": {
+                "info": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.blue.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.blue.dark.100}"
+                  }
+                },
+                "success": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.green.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.green.dark.100}"
+                  }
+                },
+                "warning": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.amber.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.amber.dark.100}"
+                  }
+                },
+                "danger": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.red.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.red.dark.100}"
+                  }
+                }
+              },
+              "category": {
+                "1": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.teal.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.teal.dark.100}"
+                  }
+                },
+                "2": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.purple.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.purple.dark.100}"
+                  }
+                },
+                "3": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.orange.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.orange.dark.100}"
+                  }
+                },
+                "4": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.blue.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.blue.dark.100}"
+                  }
+                },
+                "5": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.green.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.green.dark.100}"
+                  }
+                }
+              },
+              "disabled": {
+                "text": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.500}"
+                },
+                "surface": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.100}"
+                },
+                "border": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.200}"
+                }
+              }
+            },
+            "elevation": {
+              "card": {
+                "$type": "shadow",
+                "$value": "{shadow.card-dark}"
+              },
+              "overlay": {
+                "$type": "shadow",
+                "$value": "{shadow.overlay-dark}"
+              }
+            }
+          }
+        }
+      },
+      "coral": {
+        "label": "Coral",
+        "description": "Upbeat and energetic: coral orange, Poppins, pill controls.",
+        "theme": {
+          "$description": "The Coral theme: what each brand-dependent semantic key picks, in light and dark, plus mode-free picks (fonts, corners) in base. Info uses blue, kept apart from the brand colour so it never reads as an action. Categories 1 to 5 are teal, purple, orange, blue, green: distinct hues for tags and chart series, with no meaning. Disabled uses the neutral slate.",
+          "base": {
+            "radius": {
+              "control": {
+                "$type": "dimension",
+                "$value": "{radius.999}"
+              },
+              "badge": {
+                "$type": "dimension",
+                "$value": "{radius.999}"
+              },
+              "container": {
+                "$type": "dimension",
+                "$value": "{radius.20}"
+              }
+            },
+            "type": {
+              "display": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.poppins}"
+                }
+              },
+              "title": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.poppins}"
+                }
+              },
+              "heading": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.poppins}"
+                }
+              },
+              "body": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.poppins}"
+                }
+              },
+              "label": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.poppins}"
+                }
+              },
+              "caption": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.poppins}"
+                }
+              },
+              "data": {
+                "font-family": {
+                  "$type": "fontFamily",
+                  "$value": "{font.family.poppins}"
+                }
+              }
+            }
+          },
+          "light": {
+            "color": {
+              "surface": {
+                "canvas": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.50}"
+                },
+                "default": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.0}"
+                },
+                "raised": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.0}"
+                },
+                "sunken": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.100}"
+                },
+                "selected": {
+                  "$type": "color",
+                  "$value": "{color.orange.light.100}"
+                },
+                "inverse": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.900}"
+                },
+                "scrim": {
+                  "$type": "color",
+                  "$value": "{color.black.light.scrim}"
+                }
+              },
+              "text": {
+                "primary": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.900}"
+                },
+                "secondary": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.700}"
+                },
+                "muted": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.600}"
+                },
+                "inverse": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.0}"
+                },
+                "on-action": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.0}"
+                },
+                "link": {
+                  "$type": "color",
+                  "$value": "{color.orange.light.700}"
+                }
+              },
+              "border": {
+                "default": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.200}"
+                },
+                "strong": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.500}"
+                },
+                "focus": {
+                  "$type": "color",
+                  "$value": "{color.orange.light.600}"
+                }
+              },
+              "action": {
+                "primary": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.orange.light.600}"
+                  },
+                  "hover": {
+                    "$type": "color",
+                    "$value": "{color.orange.light.700}"
+                  }
+                },
+                "secondary": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.slate.light.0}"
+                  },
+                  "hover": {
+                    "$type": "color",
+                    "$value": "{color.slate.light.100}"
+                  }
+                }
+              },
+              "status": {
+                "info": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.blue.light.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.blue.light.100}"
+                  }
+                },
+                "success": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.green.light.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.green.light.100}"
+                  }
+                },
+                "warning": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.amber.light.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.amber.light.100}"
+                  }
+                },
+                "danger": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.red.light.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.red.light.100}"
+                  }
+                }
+              },
+              "category": {
+                "1": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.teal.light.600}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.teal.light.100}"
+                  }
+                },
+                "2": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.purple.light.600}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.purple.light.100}"
+                  }
+                },
+                "3": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.orange.light.600}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.orange.light.100}"
+                  }
+                },
+                "4": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.blue.light.600}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.blue.light.100}"
+                  }
+                },
+                "5": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.green.light.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.green.light.100}"
+                  }
+                }
+              },
+              "disabled": {
+                "text": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.500}"
+                },
+                "surface": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.100}"
+                },
+                "border": {
+                  "$type": "color",
+                  "$value": "{color.slate.light.200}"
+                }
+              }
+            },
+            "elevation": {
+              "card": {
+                "$type": "shadow",
+                "$value": "{shadow.card}"
+              },
+              "overlay": {
+                "$type": "shadow",
+                "$value": "{shadow.overlay}"
+              }
+            }
+          },
+          "dark": {
+            "color": {
+              "surface": {
+                "canvas": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.0}"
+                },
+                "default": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.50}"
+                },
+                "raised": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.100}"
+                },
+                "sunken": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.100}"
+                },
+                "selected": {
+                  "$type": "color",
+                  "$value": "{color.orange.dark.100}"
+                },
+                "inverse": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.900}"
+                },
+                "scrim": {
+                  "$type": "color",
+                  "$value": "{color.black.dark.scrim}"
+                }
+              },
+              "text": {
+                "primary": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.900}"
+                },
+                "secondary": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.500}"
+                },
+                "muted": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.400}"
+                },
+                "inverse": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.50}"
+                },
+                "on-action": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.0}"
+                },
+                "link": {
+                  "$type": "color",
+                  "$value": "{color.orange.dark.700}"
+                }
+              },
+              "border": {
+                "default": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.100}"
+                },
+                "strong": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.300}"
+                },
+                "focus": {
+                  "$type": "color",
+                  "$value": "{color.orange.dark.700}"
+                }
+              },
+              "action": {
+                "primary": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.orange.dark.700}"
+                  },
+                  "hover": {
+                    "$type": "color",
+                    "$value": "{color.orange.dark.800}"
+                  }
+                },
+                "secondary": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.slate.dark.50}"
+                  },
+                  "hover": {
+                    "$type": "color",
+                    "$value": "{color.slate.dark.100}"
+                  }
+                }
+              },
+              "status": {
+                "info": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.blue.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.blue.dark.100}"
+                  }
+                },
+                "success": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.green.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.green.dark.100}"
+                  }
+                },
+                "warning": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.amber.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.amber.dark.100}"
+                  }
+                },
+                "danger": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.red.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.red.dark.100}"
+                  }
+                }
+              },
+              "category": {
+                "1": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.teal.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.teal.dark.100}"
+                  }
+                },
+                "2": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.purple.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.purple.dark.100}"
+                  }
+                },
+                "3": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.orange.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.orange.dark.100}"
+                  }
+                },
+                "4": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.blue.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.blue.dark.100}"
+                  }
+                },
+                "5": {
+                  "@": {
+                    "$type": "color",
+                    "$value": "{color.green.dark.700}"
+                  },
+                  "subtle": {
+                    "$type": "color",
+                    "$value": "{color.green.dark.100}"
+                  }
+                }
+              },
+              "disabled": {
+                "text": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.500}"
+                },
+                "surface": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.100}"
+                },
+                "border": {
+                  "$type": "color",
+                  "$value": "{color.slate.dark.200}"
+                }
+              }
+            },
+            "elevation": {
+              "card": {
+                "$type": "shadow",
+                "$value": "{shadow.card-dark}"
+              },
+              "overlay": {
+                "$type": "shadow",
+                "$value": "{shadow.overlay-dark}"
+              }
+            }
+          }
+        }
+      }
+    },
+    "semantic": {
+      "space": {
+        "gap": {
+          "tight": {
+            "$type": "dimension",
+            "$value": "{space.8}",
+            "$description": "Between things that belong together."
+          },
+          "default": {
+            "$type": "dimension",
+            "$value": "{space.12}",
+            "$description": "Between items in one group."
+          },
+          "group": {
+            "$type": "dimension",
+            "$value": "{space.24}",
+            "$description": "Between groups."
+          },
+          "section": {
+            "$type": "dimension",
+            "$value": "{space.48}",
+            "$description": "Between page sections."
+          }
+        },
+        "inset": {
+          "control-x": {
+            "$type": "dimension",
+            "$value": "{space.16}",
+            "$description": "Horizontal padding inside controls."
+          },
+          "container": {
+            "$type": "dimension",
+            "$value": "{space.24}",
+            "$description": "Padding inside cards and dialogs."
+          },
+          "cell-x": {
+            "$type": "dimension",
+            "$value": "{space.16}",
+            "$description": "Horizontal padding inside table cells."
+          }
+        }
+      },
+      "size": {
+        "control": {
+          "default": {
+            "$type": "dimension",
+            "$value": "{size.44}",
+            "$description": "Height of buttons and inputs, and the smallest target."
+          },
+          "compact": {
+            "$type": "dimension",
+            "$value": "{size.36}",
+            "$description": "Height of compact controls."
+          }
+        },
+        "row": {
+          "$type": "dimension",
+          "$value": "{size.48}",
+          "$description": "Height of one table row."
+        },
+        "icon": {
+          "$type": "dimension",
+          "$value": "{size.16}",
+          "$description": "Icon size next to text."
+        }
+      },
+      "radius": {
+        "control": {
+          "$type": "dimension",
+          "$value": "{theme.radius.control}",
+          "$description": "Corner of buttons and inputs."
+        },
+        "badge": {
+          "$type": "dimension",
+          "$value": "{theme.radius.badge}",
+          "$description": "Corner of badges and checkboxes."
+        },
+        "container": {
+          "$type": "dimension",
+          "$value": "{theme.radius.container}",
+          "$description": "Corner of cards, menus and dialogs."
+        },
+        "round": {
+          "$type": "dimension",
+          "$value": "{radius.full}",
+          "$description": "Fully round: avatars and dots."
+        }
+      },
+      "border-width": {
+        "default": {
+          "$type": "dimension",
+          "$value": "{border-width.1}",
+          "$description": "Every border."
+        },
+        "focus": {
+          "$type": "dimension",
+          "$value": "{border-width.2}",
+          "$description": "The focus ring."
+        }
+      },
+      "type": {
+        "display": {
+          "font-family": {
+            "$type": "fontFamily",
+            "$value": "{theme.type.display.font-family}"
+          },
+          "font-size": {
+            "$type": "dimension",
+            "$value": "{font.size.32}"
+          },
+          "line-height": {
+            "$type": "number",
+            "$value": "{font.line-height.1_2}"
+          },
+          "font-weight": {
+            "$type": "fontWeight",
+            "$value": "{font.weight.700}"
+          },
+          "$description": "The display text role."
+        },
+        "title": {
+          "font-family": {
+            "$type": "fontFamily",
+            "$value": "{theme.type.title.font-family}"
+          },
+          "font-size": {
+            "$type": "dimension",
+            "$value": "{font.size.24}"
+          },
+          "line-height": {
+            "$type": "number",
+            "$value": "{font.line-height.1_25}"
+          },
+          "font-weight": {
+            "$type": "fontWeight",
+            "$value": "{font.weight.600}"
+          },
+          "$description": "The title text role."
+        },
+        "heading": {
+          "font-family": {
+            "$type": "fontFamily",
+            "$value": "{theme.type.heading.font-family}"
+          },
+          "font-size": {
+            "$type": "dimension",
+            "$value": "{font.size.20}"
+          },
+          "line-height": {
+            "$type": "number",
+            "$value": "{font.line-height.1_3}"
+          },
+          "font-weight": {
+            "$type": "fontWeight",
+            "$value": "{font.weight.600}"
+          },
+          "$description": "The heading text role."
+        },
+        "body": {
+          "font-family": {
+            "$type": "fontFamily",
+            "$value": "{theme.type.body.font-family}"
+          },
+          "font-size": {
+            "$type": "dimension",
+            "$value": "{font.size.16}"
+          },
+          "line-height": {
+            "$type": "number",
+            "$value": "{font.line-height.1_5}"
+          },
+          "font-weight": {
+            "$type": "fontWeight",
+            "$value": "{font.weight.400}"
+          },
+          "$description": "The body text role."
+        },
+        "label": {
+          "font-family": {
+            "$type": "fontFamily",
+            "$value": "{theme.type.label.font-family}"
+          },
+          "font-size": {
+            "$type": "dimension",
+            "$value": "{font.size.14}"
+          },
+          "line-height": {
+            "$type": "number",
+            "$value": "{font.line-height.1_4}"
+          },
+          "font-weight": {
+            "$type": "fontWeight",
+            "$value": "{font.weight.600}"
+          },
+          "$description": "The label text role."
+        },
+        "caption": {
+          "font-family": {
+            "$type": "fontFamily",
+            "$value": "{theme.type.caption.font-family}"
+          },
+          "font-size": {
+            "$type": "dimension",
+            "$value": "{font.size.13}"
+          },
+          "line-height": {
+            "$type": "number",
+            "$value": "{font.line-height.1_4}"
+          },
+          "font-weight": {
+            "$type": "fontWeight",
+            "$value": "{font.weight.400}"
+          },
+          "$description": "The caption text role."
+        },
+        "data": {
+          "font-family": {
+            "$type": "fontFamily",
+            "$value": "{theme.type.data.font-family}"
+          },
+          "font-size": {
+            "$type": "dimension",
+            "$value": "{font.size.16}"
+          },
+          "line-height": {
+            "$type": "number",
+            "$value": "{font.line-height.1_5}"
+          },
+          "font-weight": {
+            "$type": "fontWeight",
+            "$value": "{font.weight.400}"
+          },
+          "$description": "The data text role."
+        }
+      },
+      "motion": {
+        "duration": {
+          "feedback": {
+            "$type": "duration",
+            "$value": "{duration.moderate}",
+            "$description": "Feedback speed: moderate."
+          }
+        },
+        "easing": {
+          "standard": {
+            "$type": "cubicBezier",
+            "$value": "{easing.standard}",
+            "$description": "Feedback easing."
+          }
+        }
+      },
+      "opacity": {
+        "disabled": {
+          "$type": "number",
+          "$value": "{opacity.40}",
+          "$description": "Disabled controls."
+        }
+      },
+      "color": {
+        "surface": {
+          "canvas": {
+            "$type": "color",
+            "$description": "The page background.",
+            "$value": "{theme.color.surface.canvas}"
+          },
+          "default": {
+            "$type": "color",
+            "$description": "Cards, inputs and tables.",
+            "$value": "{theme.color.surface.default}"
+          },
+          "raised": {
+            "$type": "color",
+            "$description": "Menus, dialogs, toasts.",
+            "$value": "{theme.color.surface.raised}"
+          },
+          "sunken": {
+            "$type": "color",
+            "$description": "Table headers and wells.",
+            "$value": "{theme.color.surface.sunken}"
+          },
+          "selected": {
+            "$type": "color",
+            "$description": "A selected row or item.",
+            "$value": "{theme.color.surface.selected}"
+          },
+          "inverse": {
+            "$type": "color",
+            "$description": "Tooltips.",
+            "$value": "{theme.color.surface.inverse}"
+          },
+          "scrim": {
+            "$type": "color",
+            "$description": "Dims the page behind a dialog.",
+            "$value": "{theme.color.surface.scrim}"
+          }
+        },
+        "text": {
+          "primary": {
+            "$type": "color",
+            "$description": "Main text.",
+            "$value": "{theme.color.text.primary}"
+          },
+          "secondary": {
+            "$type": "color",
+            "$description": "Supporting text; passes AA.",
+            "$value": "{theme.color.text.secondary}"
+          },
+          "muted": {
+            "$type": "color",
+            "$description": "Hints and placeholders.",
+            "$value": "{theme.color.text.muted}"
+          },
+          "inverse": {
+            "$type": "color",
+            "$description": "Text on inverse surfaces.",
+            "$value": "{theme.color.text.inverse}"
+          },
+          "on-action": {
+            "$type": "color",
+            "$description": "Text on the primary action.",
+            "$value": "{theme.color.text.on-action}"
+          },
+          "link": {
+            "$type": "color",
+            "$description": "Links.",
+            "$value": "{theme.color.text.link}"
+          }
+        },
+        "border": {
+          "default": {
+            "$type": "color",
+            "$description": "Row lines and card borders.",
+            "$value": "{theme.color.border.default}"
+          },
+          "strong": {
+            "$type": "color",
+            "$description": "Input and secondary button borders.",
+            "$value": "{theme.color.border.strong}"
+          },
+          "focus": {
+            "$type": "color",
+            "$description": "The keyboard focus ring.",
+            "$value": "{theme.color.border.focus}"
+          }
+        },
+        "action": {
+          "primary": {
+            "@": {
+              "$type": "color",
+              "$description": "The primary action.",
+              "$value": "{theme.color.action.primary.@}"
+            },
+            "hover": {
+              "$type": "color",
+              "$description": "Primary action on hover.",
+              "$value": "{theme.color.action.primary.hover}"
+            }
+          },
+          "secondary": {
+            "@": {
+              "$type": "color",
+              "$description": "Secondary action fill.",
+              "$value": "{theme.color.action.secondary.@}"
+            },
+            "hover": {
+              "$type": "color",
+              "$description": "Secondary action on hover.",
+              "$value": "{theme.color.action.secondary.hover}"
+            }
+          }
+        },
+        "status": {
+          "info": {
+            "@": {
+              "$type": "color",
+              "$description": "Info text and icons: neutral news, no action needed.",
+              "$value": "{theme.color.status.info.@}"
+            },
+            "subtle": {
+              "$type": "color",
+              "$description": "Info badge and banner fill.",
+              "$value": "{theme.color.status.info.subtle}"
+            }
+          },
+          "success": {
+            "@": {
+              "$type": "color",
+              "$description": "Success text and icons.",
+              "$value": "{theme.color.status.success.@}"
+            },
+            "subtle": {
+              "$type": "color",
+              "$description": "Success badge fill.",
+              "$value": "{theme.color.status.success.subtle}"
+            }
+          },
+          "warning": {
+            "@": {
+              "$type": "color",
+              "$description": "Warning text and icons.",
+              "$value": "{theme.color.status.warning.@}"
+            },
+            "subtle": {
+              "$type": "color",
+              "$description": "Warning badge fill.",
+              "$value": "{theme.color.status.warning.subtle}"
+            }
+          },
+          "danger": {
+            "@": {
+              "$type": "color",
+              "$description": "Danger text and icons.",
+              "$value": "{theme.color.status.danger.@}"
+            },
+            "subtle": {
+              "$type": "color",
+              "$description": "Danger badge fill.",
+              "$value": "{theme.color.status.danger.subtle}"
+            }
+          }
+        },
+        "category": {
+          "$description": "Identity colours for tags, labels and chart series. They tell items apart and carry no meaning.",
+          "1": {
+            "@": {
+              "$type": "color",
+              "$description": "Category 1: chart series, tag dots and icons. Tag text uses color.text.primary.",
+              "$value": "{theme.color.category.1.@}"
+            },
+            "subtle": {
+              "$type": "color",
+              "$description": "Category 1: tag fill.",
+              "$value": "{theme.color.category.1.subtle}"
+            }
+          },
+          "2": {
+            "@": {
+              "$type": "color",
+              "$description": "Category 2: chart series, tag dots and icons. Tag text uses color.text.primary.",
+              "$value": "{theme.color.category.2.@}"
+            },
+            "subtle": {
+              "$type": "color",
+              "$description": "Category 2: tag fill.",
+              "$value": "{theme.color.category.2.subtle}"
+            }
+          },
+          "3": {
+            "@": {
+              "$type": "color",
+              "$description": "Category 3: chart series, tag dots and icons. Tag text uses color.text.primary.",
+              "$value": "{theme.color.category.3.@}"
+            },
+            "subtle": {
+              "$type": "color",
+              "$description": "Category 3: tag fill.",
+              "$value": "{theme.color.category.3.subtle}"
+            }
+          },
+          "4": {
+            "@": {
+              "$type": "color",
+              "$description": "Category 4: chart series, tag dots and icons. Tag text uses color.text.primary.",
+              "$value": "{theme.color.category.4.@}"
+            },
+            "subtle": {
+              "$type": "color",
+              "$description": "Category 4: tag fill.",
+              "$value": "{theme.color.category.4.subtle}"
+            }
+          },
+          "5": {
+            "@": {
+              "$type": "color",
+              "$description": "Category 5: chart series, tag dots and icons. Tag text uses color.text.primary.",
+              "$value": "{theme.color.category.5.@}"
+            },
+            "subtle": {
+              "$type": "color",
+              "$description": "Category 5: tag fill.",
+              "$value": "{theme.color.category.5.subtle}"
+            }
+          }
+        },
+        "disabled": {
+          "$description": "The shared look of controls that cannot be used right now.",
+          "text": {
+            "$type": "color",
+            "$description": "Text and icons of a disabled control.",
+            "$value": "{theme.color.disabled.text}"
+          },
+          "surface": {
+            "$type": "color",
+            "$description": "Fill of a disabled control.",
+            "$value": "{theme.color.disabled.surface}"
+          },
+          "border": {
+            "$type": "color",
+            "$description": "Border of a disabled control.",
+            "$value": "{theme.color.disabled.border}"
+          }
+        }
+      },
+      "elevation": {
+        "card": {
+          "$type": "shadow",
+          "$value": "{theme.elevation.card}"
+        },
+        "overlay": {
+          "$type": "shadow",
+          "$value": "{theme.elevation.overlay}"
+        }
+      }
+    },
+    "component": {
+      "button": {
+        "primary": {
+          "background": {
+            "@": {
+              "$value": "{color.action.primary.@}",
+              "$description": "Primary button fill."
+            },
+            "hover": {
+              "$value": "{color.action.primary.hover}",
+              "$description": "Primary button fill on hover."
+            }
+          },
+          "label": {
+            "$value": "{color.text.on-action}",
+            "$description": "Primary button label color."
+          }
+        },
+        "secondary": {
+          "background": {
+            "@": {
+              "$value": "{color.action.secondary.@}",
+              "$description": "Secondary button fill."
+            },
+            "hover": {
+              "$value": "{color.action.secondary.hover}",
+              "$description": "Secondary button fill on hover."
+            }
+          },
+          "label": {
+            "$value": "{color.text.primary}",
+            "$description": "Secondary button label color."
+          },
+          "border": {
+            "$value": "{color.border.strong}",
+            "$description": "Secondary button border."
+          }
+        },
+        "ghost": {
+          "background-hover": {
+            "$value": "{color.surface.sunken}",
+            "$description": "Ghost button fill on hover."
+          },
+          "label": {
+            "$value": "{color.text.link}",
+            "$description": "Ghost button label color."
+          }
+        },
+        "height": {
+          "$value": "{size.control.default}",
+          "$description": "Button height."
+        },
+        "padding-x": {
+          "$value": "{space.inset.control-x}",
+          "$description": "Horizontal padding inside a button."
+        },
+        "radius": {
+          "$value": "{radius.control}",
+          "$description": "Button corner radius."
+        },
+        "font-size": {
+          "$value": "{type.label.font-size}",
+          "$description": "Button label size."
+        },
+        "font-weight": {
+          "$value": "{type.label.font-weight}",
+          "$description": "Button label weight."
+        },
+        "focus-ring": {
+          "$value": "{color.border.focus}",
+          "$description": "Focus ring color on any button."
+        },
+        "icon-size": {
+          "$value": "{size.icon}",
+          "$description": "Size of an icon inside a button."
+        },
+        "disabled": {
+          "background": {
+            "$value": "{color.disabled.surface}",
+            "$description": "Fill of a disabled button."
+          },
+          "label": {
+            "$value": "{color.disabled.text}",
+            "$description": "Label of a disabled button."
+          },
+          "border": {
+            "$value": "{color.disabled.border}",
+            "$description": "Border of a disabled secondary button."
+          }
+        }
+      },
+      "input": {
+        "background": {
+          "$value": "{color.surface.default}",
+          "$description": "Input fill."
+        },
+        "border": {
+          "@": {
+            "$value": "{color.border.strong}",
+            "$description": "Input border at rest."
+          },
+          "focus": {
+            "$value": "{color.border.focus}",
+            "$description": "Input border when focused."
+          }
+        },
+        "text": {
+          "$value": "{color.text.primary}",
+          "$description": "Typed text color."
+        },
+        "placeholder": {
+          "$value": "{color.text.muted}",
+          "$description": "Placeholder text color."
+        },
+        "height": {
+          "$value": "{size.control.default}",
+          "$description": "Input height."
+        },
+        "padding-x": {
+          "$value": "{space.inset.control-x}",
+          "$description": "Horizontal padding inside an input."
+        },
+        "radius": {
+          "$value": "{radius.control}",
+          "$description": "Input corner radius."
+        },
+        "font-size": {
+          "$value": "{type.body.font-size}",
+          "$description": "Typed text size."
+        },
+        "disabled": {
+          "background": {
+            "$value": "{color.disabled.surface}",
+            "$description": "Fill of a disabled input."
+          },
+          "border": {
+            "$value": "{color.disabled.border}",
+            "$description": "Border of a disabled input."
+          },
+          "text": {
+            "$value": "{color.disabled.text}",
+            "$description": "Text in a disabled input."
+          }
+        }
+      },
+      "control": {
+        "checked": {
+          "$value": "{color.action.primary.@}",
+          "$description": "Fill of a checked checkbox or an on switch."
+        },
+        "track": {
+          "$value": "{color.border.strong}",
+          "$description": "Track of an off switch."
+        },
+        "thumb": {
+          "$value": "{color.surface.default}",
+          "$description": "Switch thumb and checkmark color."
+        },
+        "radius": {
+          "$value": "{radius.badge}",
+          "$description": "Checkbox corner radius."
+        }
+      },
+      "badge": {
+        "radius": {
+          "$value": "{radius.badge}",
+          "$description": "Badge corner radius."
+        },
+        "padding-x": {
+          "$value": "{space.gap.tight}",
+          "$description": "Horizontal padding inside a badge."
+        },
+        "font-size": {
+          "$value": "{type.caption.font-size}",
+          "$description": "Badge label size."
+        },
+        "neutral": {
+          "background": {
+            "$value": "{color.surface.sunken}",
+            "$description": "Neutral badge fill."
+          },
+          "label": {
+            "$value": "{color.text.secondary}",
+            "$description": "Neutral badge label."
+          }
+        },
+        "success": {
+          "background": {
+            "$value": "{color.status.success.subtle}",
+            "$description": "Success badge fill."
+          },
+          "label": {
+            "$value": "{color.status.success.@}",
+            "$description": "Success badge label."
+          }
+        },
+        "warning": {
+          "background": {
+            "$value": "{color.status.warning.subtle}",
+            "$description": "Warning badge fill."
+          },
+          "label": {
+            "$value": "{color.status.warning.@}",
+            "$description": "Warning badge label."
+          }
+        },
+        "danger": {
+          "background": {
+            "$value": "{color.status.danger.subtle}",
+            "$description": "Danger badge fill."
+          },
+          "label": {
+            "$value": "{color.status.danger.@}",
+            "$description": "Danger badge label."
+          }
+        },
+        "info": {
+          "background": {
+            "$value": "{color.status.info.subtle}",
+            "$description": "Info badge fill."
+          },
+          "label": {
+            "$value": "{color.status.info.@}",
+            "$description": "Info badge label."
+          }
+        }
+      },
+      "card": {
+        "background": {
+          "$value": "{color.surface.default}",
+          "$description": "Card fill."
+        },
+        "border": {
+          "$value": "{color.border.default}",
+          "$description": "Card border."
+        },
+        "radius": {
+          "$value": "{radius.container}",
+          "$description": "Card corner radius."
+        },
+        "padding": {
+          "$value": "{space.inset.container}",
+          "$description": "Padding inside a card."
+        },
+        "shadow": {
+          "$value": "{elevation.card}",
+          "$description": "Card shadow."
+        }
+      },
+      "table": {
+        "header-background": {
+          "$value": "{color.surface.sunken}",
+          "$description": "Header row fill."
+        },
+        "row-height": {
+          "$value": "{size.row}",
+          "$description": "Height of one data row."
+        },
+        "cell-padding-x": {
+          "$value": "{space.inset.cell-x}",
+          "$description": "Horizontal padding inside a cell."
+        },
+        "row-border": {
+          "$value": "{color.border.default}",
+          "$description": "Line between rows."
+        },
+        "row-selected": {
+          "$value": "{color.surface.selected}",
+          "$description": "Fill of a selected row."
+        },
+        "font-size": {
+          "$value": "{type.data.font-size}",
+          "$description": "Cell text size."
+        }
+      },
+      "tabs": {
+        "indicator": {
+          "$value": "{color.action.primary.@}",
+          "$description": "Active tab indicator."
+        },
+        "label": {
+          "@": {
+            "$value": "{color.text.secondary}",
+            "$description": "Inactive tab label."
+          },
+          "active": {
+            "$value": "{color.text.primary}",
+            "$description": "Active tab label."
+          }
+        }
+      },
+      "overlay": {
+        "background": {
+          "$value": "{color.surface.raised}",
+          "$description": "Fill of a dialog, menu or toast."
+        },
+        "radius": {
+          "$value": "{radius.container}",
+          "$description": "Corner radius of overlays."
+        },
+        "shadow": {
+          "$value": "{elevation.overlay}",
+          "$description": "Shadow of overlays."
+        },
+        "scrim": {
+          "$value": "{color.surface.scrim}",
+          "$description": "Color that dims the page behind a dialog."
+        },
+        "item-height": {
+          "$value": "{size.control.default}",
+          "$description": "Height of a menu item."
+        }
+      },
+      "tooltip": {
+        "background": {
+          "$value": "{color.surface.inverse}",
+          "$description": "Tooltip fill."
+        },
+        "label": {
+          "$value": "{color.text.inverse}",
+          "$description": "Tooltip text."
+        }
+      },
+      "transition": {
+        "duration": {
+          "$value": "{motion.duration.feedback}",
+          "$description": "Duration of feedback transitions."
+        },
+        "easing": {
+          "$value": "{motion.easing.standard}",
+          "$description": "Easing of feedback transitions."
+        }
+      }
+    },
+    "content": {
+      "$description": "Voice tokens: the words components use for common actions. Text, not CSS.",
+      "action": {
+        "commit": {
+          "$type": "string",
+          "$value": "Save",
+          "$description": "The label of the action that completes a task."
+        },
+        "cancel": {
+          "$type": "string",
+          "$value": "Cancel",
+          "$description": "The label of the way out next to the main action."
+        },
+        "destroy": {
+          "$type": "string",
+          "$value": "Remove",
+          "$description": "The label of an action that deletes data."
+        },
+        "retry": {
+          "$type": "string",
+          "$value": "Try again",
+          "$description": "The label that repeats a failed action."
+        },
+        "empty-action": {
+          "$type": "string",
+          "$value": "Get started",
+          "$description": "The label of the action in an empty state."
+        }
+      }
+    }
+  }
+}