diff --git a/.changeset/fair-rules-heal.md b/.changeset/fair-rules-heal.md
new file mode 100644
index 000000000..99b7ed805
--- /dev/null
+++ b/.changeset/fair-rules-heal.md
@@ -0,0 +1,8 @@
+---
+'@tiny-design/tokens': minor
+'@tiny-design/mcp': patch
+---
+
+Add seed-driven token foundations to `@tiny-design/tokens` with an internal `primitive -> semantic -> component` model, a shared `compile-brand-theme` runtime export, stricter build validation, and richer registry metadata including resolved token values for downstream tooling.
+
+Fix `@tiny-design/mcp` token extraction so MCP clients receive concrete resolved token values instead of unresolved token references.
diff --git a/apps/docs/src/containers/theme-studio/defaults.ts b/apps/docs/src/containers/theme-studio/defaults.ts
index 3d24bb0fa..29a89217e 100644
--- a/apps/docs/src/containers/theme-studio/defaults.ts
+++ b/apps/docs/src/containers/theme-studio/defaults.ts
@@ -1,75 +1,7 @@
+import { DEFAULT_BRAND_SEED_FIELDS } from '@tiny-design/tokens/compile-brand-theme';
 import type { ThemeEditorDraft, ThemeEditorFields, ThemeMode } from './types';
 
-const DEFAULT_FONT_SANS = '"Instrument Sans", "Inter", system-ui, sans-serif';
-const DEFAULT_FONT_MONO = '"JetBrains Mono", "SFMono-Regular", monospace';
-
-export const DEFAULT_FIELDS: ThemeEditorFields = {
-  primary: '#6e41bf',
-  primaryForeground: '#ffffff',
-  secondary: '#f5f5f7',
-  secondaryForeground: '#16181d',
-  accent: '#f3eefa',
-  accentForeground: '#6e41bf',
-  success: '#52c41a',
-  successForeground: '#ffffff',
-  info: '#1890ff',
-  infoForeground: '#ffffff',
-  warning: '#fa8c16',
-  warningForeground: '#ffffff',
-  danger: '#dc2626',
-  dangerForeground: '#ffffff',
-  base: '#ffffff',
-  baseForeground: 'rgba(0, 0, 0, 0.85)',
-  card: '#ffffff',
-  cardForeground: '#111827',
-  popover: '#ffffff',
-  popoverForeground: '#111827',
-  muted: '#f5f5f5',
-  mutedForeground: 'rgba(0, 0, 0, 0.55)',
-  border: '#d9d9d9',
-  input: '#d9d9d9',
-  ring: '#6e41bf',
-  chart1: '#6e41bf',
-  chart2: '#1890ff',
-  chart3: '#52c41a',
-  chart4: '#fa8c16',
-  chart5: '#eb2f96',
-  sidebar: '#12131a',
-  sidebarForeground: '#f8fafc',
-  sidebarPrimary: '#6e41bf',
-  sidebarPrimaryForeground: '#ffffff',
-  sidebarAccent: '#23173f',
-  sidebarAccentForeground: '#efe8ff',
-  sidebarBorder: '#2a2d36',
-  sidebarRing: '#8b62d0',
-  fontSans: DEFAULT_FONT_SANS,
-  fontMono: DEFAULT_FONT_MONO,
-  fontSizeBase: '14px',
-  lineHeightBase: '1.5',
-  h1Size: '40px',
-  h2Size: '32px',
-  letterSpacing: '-0.02em',
-  radius: '0.3rem',
-  shadowControl: 'none',
-  shadowCard: '0 20px 55px rgba(17, 24, 39, 0.08)',
-  shadowFocus: '0 0 0 3px rgba(110, 65, 191, 0.22)',
-  buttonRadius: '0.3rem',
-  inputRadius: '0.3rem',
-  cardRadius: '0.3rem',
-  fieldPaddingSm: '8px',
-  fieldPaddingMd: '8px',
-  fieldPaddingLg: '8px',
-  buttonPaddingSm: '8px',
-  buttonPaddingMd: '15px',
-  buttonPaddingLg: '20px',
-  fieldHeightSm: '24px',
-  fieldHeightMd: '35px',
-  fieldHeightLg: '44px',
-  buttonHeightSm: '24px',
-  buttonHeightMd: '35px',
-  buttonHeightLg: '44px',
-  cardPadding: '18px',
-};
+export const DEFAULT_FIELDS: ThemeEditorFields = { ...DEFAULT_BRAND_SEED_FIELDS };
 
 export function createDraft(
   id: string,
diff --git a/apps/docs/src/containers/theme-studio/editor-config.ts b/apps/docs/src/containers/theme-studio/editor-config.ts
index e35e579da..2114a7334 100644
--- a/apps/docs/src/containers/theme-studio/editor-config.ts
+++ b/apps/docs/src/containers/theme-studio/editor-config.ts
@@ -1,70 +1,53 @@
-import type { FieldKey, ThemeEditorColorGroup } from './types';
+import type { ThemeEditorSeedGroup } from './types';
 
-export const COLOR_GROUPS: ThemeEditorColorGroup[] = [
+export const SEED_COLOR_GROUPS: ThemeEditorSeedGroup[] = [
   {
-    title: 'Primary',
+    title: 'Brand Core',
+    description: 'Primary, accent, and supporting brand surfaces.',
+    tier: 'core',
     fields: [
-      { key: 'primary', label: 'Background' },
-      { key: 'primaryForeground', label: 'Foreground' },
+      { key: 'primary', label: 'Primary' },
+      { key: 'primaryForeground', label: 'On Primary' },
+      { key: 'secondary', label: 'Secondary' },
+      { key: 'secondaryForeground', label: 'On Secondary' },
+      { key: 'accent', label: 'Accent' },
+      { key: 'accentForeground', label: 'On Accent' },
     ],
   },
   {
-    title: 'Secondary',
-    fields: [
-      { key: 'secondary', label: 'Background' },
-      { key: 'secondaryForeground', label: 'Foreground' },
-    ],
-  },
-  {
-    title: 'Accent',
-    fields: [
-      { key: 'accent', label: 'Background' },
-      { key: 'accentForeground', label: 'Foreground' },
-    ],
-  },
-  {
-    title: 'Status',
+    title: 'Feedback States',
+    description: 'Semantic status hues that propagate through alerts, tags, and feedback UI.',
+    tier: 'core',
     fields: [
       { key: 'success', label: 'Success' },
-      { key: 'successForeground', label: 'Success FG' },
+      { key: 'successForeground', label: 'On Success' },
       { key: 'info', label: 'Info' },
-      { key: 'infoForeground', label: 'Info FG' },
+      { key: 'infoForeground', label: 'On Info' },
       { key: 'warning', label: 'Warning' },
-      { key: 'warningForeground', label: 'Warning FG' },
+      { key: 'warningForeground', label: 'On Warning' },
       { key: 'danger', label: 'Danger' },
-      { key: 'dangerForeground', label: 'Danger FG' },
+      { key: 'dangerForeground', label: 'On Danger' },
     ],
   },
   {
-    title: 'Base',
+    title: 'Surfaces & Text',
+    description: 'Page, card, popover, and muted surfaces plus their text companions.',
+    tier: 'core',
     fields: [
-      { key: 'base', label: 'Background' },
-      { key: 'baseForeground', label: 'Foreground' },
+      { key: 'base', label: 'Page' },
+      { key: 'baseForeground', label: 'On Page' },
+      { key: 'card', label: 'Card' },
+      { key: 'cardForeground', label: 'On Card' },
+      { key: 'popover', label: 'Popover' },
+      { key: 'popoverForeground', label: 'On Popover' },
+      { key: 'muted', label: 'Muted' },
+      { key: 'mutedForeground', label: 'On Muted' },
     ],
   },
   {
-    title: 'Card',
-    fields: [
-      { key: 'card', label: 'Background' },
-      { key: 'cardForeground', label: 'Foreground' },
-    ],
-  },
-  {
-    title: 'Popover',
-    fields: [
-      { key: 'popover', label: 'Background' },
-      { key: 'popoverForeground', label: 'Foreground' },
-    ],
-  },
-  {
-    title: 'Muted',
-    fields: [
-      { key: 'muted', label: 'Background' },
-      { key: 'mutedForeground', label: 'Foreground' },
-    ],
-  },
-  {
-    title: 'Border & Input',
+    title: 'Lines & Focus',
+    description: 'Borders, field chrome, and the interaction ring seed.',
+    tier: 'core',
     fields: [
       { key: 'border', label: 'Border' },
       { key: 'input', label: 'Input' },
@@ -72,40 +55,34 @@ export const COLOR_GROUPS: ThemeEditorColorGroup[] = [
     ],
   },
   {
-    title: 'Chart',
+    title: 'Data Visualization',
+    description: 'Chart palette seeds for data-heavy views.',
+    tier: 'advanced',
     fields: [
-      { key: 'chart1', label: 'Chart 1' },
-      { key: 'chart2', label: 'Chart 2' },
-      { key: 'chart3', label: 'Chart 3' },
-      { key: 'chart4', label: 'Chart 4' },
-      { key: 'chart5', label: 'Chart 5' },
+      { key: 'chart1', label: 'Series 1' },
+      { key: 'chart2', label: 'Series 2' },
+      { key: 'chart3', label: 'Series 3' },
+      { key: 'chart4', label: 'Series 4' },
+      { key: 'chart5', label: 'Series 5' },
     ],
   },
   {
-    title: 'Sidebar',
+    title: 'Sidebar Shell',
+    description: 'Dedicated app-shell seeds for navigation-heavy layouts.',
+    tier: 'advanced',
     fields: [
-      { key: 'sidebar', label: 'Background' },
-      { key: 'sidebarForeground', label: 'Foreground' },
-      { key: 'sidebarPrimary', label: 'Primary' },
-      { key: 'sidebarPrimaryForeground', label: 'Primary FG' },
-      { key: 'sidebarAccent', label: 'Accent' },
-      { key: 'sidebarAccentForeground', label: 'Accent FG' },
-      { key: 'sidebarBorder', label: 'Border' },
-      { key: 'sidebarRing', label: 'Ring' },
+      { key: 'sidebar', label: 'Sidebar' },
+      { key: 'sidebarForeground', label: 'On Sidebar' },
+      { key: 'sidebarPrimary', label: 'Sidebar Primary' },
+      { key: 'sidebarPrimaryForeground', label: 'On Sidebar Primary' },
+      { key: 'sidebarAccent', label: 'Sidebar Accent' },
+      { key: 'sidebarAccentForeground', label: 'On Sidebar Accent' },
+      { key: 'sidebarBorder', label: 'Sidebar Border' },
+      { key: 'sidebarRing', label: 'Sidebar Ring' },
     ],
   },
 ];
 
-export const CORE_COLOR_GROUP_TITLES = new Set([
-  'Primary',
-  'Secondary',
-  'Accent',
-  'Status',
-  'Base',
-  'Muted',
-  'Border & Input',
-]);
-
 export const FONT_OPTIONS = [
   'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
   '"Instrument Sans", "Inter", system-ui, sans-serif',
diff --git a/apps/docs/src/containers/theme-studio/index.tsx b/apps/docs/src/containers/theme-studio/index.tsx
index 93f72541a..f35b1b349 100644
--- a/apps/docs/src/containers/theme-studio/index.tsx
+++ b/apps/docs/src/containers/theme-studio/index.tsx
@@ -46,7 +46,7 @@ const ThemeStudioPage = (): React.ReactElement => {
   const [codeVisible, setCodeVisible] = useState(false);
   const [importText, setImportText] = useState('');
   const [importError, setImportError] = useState<string | null>(null);
-  const [status, setStatus] = useState<string>('Editing local draft');
+  const [status, setStatus] = useState<string>('Editing local seed draft');
   const globalMode: ThemeMode = resolvedTheme === 'dark' ? 'dark' : 'light';
 
   useEffect(() => {
@@ -54,6 +54,20 @@ const ThemeStudioPage = (): React.ReactElement => {
   }, [draft]);
 
   const themeDocument = useMemo(() => buildThemeDocumentFromDraft(draft), [draft]);
+  const seedJson = useMemo(
+    () =>
+      JSON.stringify(
+        {
+          meta: draft.meta,
+          mode: draft.mode,
+          presetId: draft.presetId,
+          fields: draft.fields,
+        },
+        null,
+        2
+      ),
+    [draft]
+  );
   const themeJson = useMemo(() => generateThemeDocumentJSON(themeDocument), [themeDocument]);
   const cssVars = useMemo(() => generateThemeCssVariables(themeDocument), [themeDocument]);
   const changedTokens = useMemo(() => compareThemeAgainstBase(themeDocument), [themeDocument]);
@@ -105,13 +119,13 @@ const ThemeStudioPage = (): React.ReactElement => {
 
   const resetToPreset = () => {
     setDraft((current) => applyPresetToDraft(current.presetId, current));
-    setStatus('Reset to preset defaults');
+    setStatus('Reset seed draft to preset defaults');
   };
 
   const handlePresetChange = (presetId: string) => {
     setDraft((current) => applyPresetToDraft(presetId, current));
     setStatus(
-      `Applied ${THEME_EDITOR_PRESETS.find((preset) => preset.id === presetId)?.name ?? 'preset'}`
+      `Applied ${THEME_EDITOR_PRESETS.find((preset) => preset.id === presetId)?.name ?? 'preset'} seed preset`
     );
   };
 
@@ -129,8 +143,8 @@ const ThemeStudioPage = (): React.ReactElement => {
       setImportError(null);
       setStatus(
         validation.warnings.length > 0
-          ? 'Imported theme document with validation warnings'
-          : 'Imported theme document'
+          ? 'Imported theme document and remapped it into seed groups with validation warnings'
+          : 'Imported theme document and remapped it into seed groups'
       );
     } catch {
       setImportError('Invalid theme document JSON');
@@ -253,7 +267,8 @@ const ThemeStudioPage = (): React.ReactElement => {
               Paste a Tiny theme document JSON export to replace the current global theme.
             </Paragraph>
             <Text type="secondary">
-              Preset selection and all editor controls will sync to the imported values.
+              The studio will map semantic and component token overrides back into the seed groups
+              shown in the editor.
             </Text>
           </div>
           <Textarea
@@ -275,7 +290,9 @@ const ThemeStudioPage = (): React.ReactElement => {
           bodyStyle={{ maxHeight: 'min(74vh, 760px)', overflow: 'auto' }}
           cancelText="Close"
           confirmText={
-            draft.activeCodeView === 'json'
+            draft.activeCodeView === 'seeds'
+              ? 'Copy Seed JSON'
+              : draft.activeCodeView === 'json'
               ? 'Copy JSON'
               : draft.activeCodeView === 'css'
                 ? 'Copy CSS'
@@ -285,7 +302,9 @@ const ThemeStudioPage = (): React.ReactElement => {
             draft.activeCodeView === 'tokens' ? { style: { display: 'none' } } : undefined
           }
           onConfirm={
-            draft.activeCodeView === 'json'
+            draft.activeCodeView === 'seeds'
+              ? () => handleCopy(seedJson, 'Seed JSON')
+              : draft.activeCodeView === 'json'
               ? () => handleCopy(themeJson, 'Theme JSON')
               : draft.activeCodeView === 'css'
                 ? () => handleCopy(cssVars, 'CSS variables')
@@ -296,7 +315,7 @@ const ThemeStudioPage = (): React.ReactElement => {
             <div>
               <Text strong>Output</Text>
               <Text type="secondary">
-                {activePreset.name} · {status}
+                {activePreset.name} · {status} · seed draft compiles to theme JSON and CSS vars
               </Text>
             </div>
             <Segmented
@@ -307,6 +326,9 @@ const ThemeStudioPage = (): React.ReactElement => {
               }
             />
           </div>
+          {draft.activeCodeView === 'seeds' ? (
+            <pre className="theme-studio__code-block">{seedJson}</pre>
+          ) : null}
           {draft.activeCodeView === 'json' ? (
             <pre className="theme-studio__code-block">{themeJson}</pre>
           ) : null}
diff --git a/apps/docs/src/containers/theme-studio/sidebar-content.tsx b/apps/docs/src/containers/theme-studio/sidebar-content.tsx
index 7637789f9..eef1ce4bd 100644
--- a/apps/docs/src/containers/theme-studio/sidebar-content.tsx
+++ b/apps/docs/src/containers/theme-studio/sidebar-content.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Collapse, Select, Text } from '@tiny-design/react';
-import { COLOR_GROUPS, CORE_COLOR_GROUP_TITLES, FONT_OPTIONS, MONO_OPTIONS } from './editor-config';
+import { FONT_OPTIONS, MONO_OPTIONS, SEED_COLOR_GROUPS } from './editor-config';
 import { ColorField, ShadowField, SliderField, TextField } from './editor-fields';
 import type {
   FieldKey,
   ThemeEditorDraft,
   ThemeEditorSection,
-  ThemeEditorColorGroup,
+  ThemeEditorSeedGroup,
 } from './types';
 
 const CONTROL_SHADOW_FALLBACK = {
@@ -37,7 +37,7 @@ const FOCUS_SHADOW_FALLBACK = {
 };
 
 function renderColorGroups(
-  groups: ThemeEditorColorGroup[],
+  groups: ThemeEditorSeedGroup[],
   draft: ThemeEditorDraft,
   updateField: (key: FieldKey, value: string) => void
 ): React.ReactElement[] {
@@ -45,6 +45,7 @@ function renderColorGroups(
     <div key={group.title} className="theme-studio__group-card">
       <div className="theme-studio__group-header">
         <Text strong>{group.title}</Text>
+        {group.description ? <Text type="secondary">{group.description}</Text> : null}
       </div>
       <div className="theme-studio__group-fields">
         {group.fields.map((field) => (
@@ -69,18 +70,43 @@ export function ThemeStudioSidebarContent({
   draft: ThemeEditorDraft;
   updateField: (key: FieldKey, value: string) => void;
 }): React.ReactElement | null {
-  const coreColorGroups = COLOR_GROUPS.filter((group) => CORE_COLOR_GROUP_TITLES.has(group.title));
-  const advancedColorGroups = COLOR_GROUPS.filter(
-    (group) => !CORE_COLOR_GROUP_TITLES.has(group.title)
-  );
+  const coreColorGroups = SEED_COLOR_GROUPS.filter((group) => group.tier !== 'advanced');
+  const advancedColorGroups = SEED_COLOR_GROUPS.filter((group) => group.tier === 'advanced');
 
   if (section === 'colors') {
     return (
       <div className="theme-studio__panel-stack">
+        <div className="theme-studio__group-card theme-studio__group-card_toolbar">
+          <div className="theme-studio__group-toolbar theme-studio__group-toolbar_start">
+            <div>
+              <Text strong>Primitive Color Seeds</Text>
+              <Text type="secondary">
+                Edit the brand seed layer directly. These values compile into semantic and
+                component color tokens.
+              </Text>
+            </div>
+          </div>
+          <div className="theme-studio__summary-grid theme-studio__summary-grid_compact">
+            <div className="theme-studio__summary-card">
+              <span>Layer 1</span>
+              <strong>Seeds</strong>
+            </div>
+            <div className="theme-studio__summary-card">
+              <span>Layer 2</span>
+              <strong>Semantic</strong>
+            </div>
+            <div className="theme-studio__summary-card">
+              <span>Layer 3</span>
+              <strong>Components</strong>
+            </div>
+          </div>
+        </div>
         <div className="theme-studio__group-section">
           <div className="theme-studio__section-header">
-            <Text strong>Core Colors</Text>
-            <Text type="secondary">Start with brand, surfaces, feedback, and focus.</Text>
+            <Text strong>Core Seed Groups</Text>
+            <Text type="secondary">
+              Start with brand, surfaces, feedback, and interaction primitives.
+            </Text>
           </div>
           {renderColorGroups(coreColorGroups, draft, updateField)}
         </div>
@@ -95,8 +121,8 @@ export function ThemeStudioSidebarContent({
                   key: 'advanced-colors',
                   label: (
                     <div className="theme-studio__section-header theme-studio__section-header_inline">
-                      <Text strong>Advanced Tokens</Text>
-                      <Text type="secondary">Card, popover, sidebar, chart.</Text>
+                      <Text strong>Advanced Seed Groups</Text>
+                      <Text type="secondary">Shell, charts, and specialized palettes.</Text>
                     </div>
                   ),
                   children: renderColorGroups(advancedColorGroups, draft, updateField),
@@ -115,8 +141,10 @@ export function ThemeStudioSidebarContent({
         <div className="theme-studio__group-card theme-studio__group-card_toolbar">
           <div className="theme-studio__group-toolbar theme-studio__group-toolbar_start">
             <div>
-              <Text strong>Typography System</Text>
-              <Text type="secondary">Font, scale, rhythm.</Text>
+              <Text strong>Primitive Type Seeds</Text>
+              <Text type="secondary">
+                Font families, scale, and rhythm compile into semantic typography tokens.
+              </Text>
             </div>
           </div>
           <div className="theme-studio__summary-grid theme-studio__summary-grid_compact">
@@ -241,8 +269,10 @@ export function ThemeStudioSidebarContent({
         <div className="theme-studio__group-card theme-studio__group-card_toolbar">
           <div className="theme-studio__group-toolbar theme-studio__group-toolbar_start">
             <div>
-              <Text strong>Surface & Shape</Text>
-              <Text type="secondary">Corners, density, elevation.</Text>
+              <Text strong>Primitive Scale & Effect Seeds</Text>
+              <Text type="secondary">
+                Shape, density, and elevation seeds compile into control and component tokens.
+              </Text>
             </div>
           </div>
           <div className="theme-studio__summary-grid theme-studio__summary-grid_compact">
diff --git a/apps/docs/src/containers/theme-studio/theme-document-adapter.ts b/apps/docs/src/containers/theme-studio/theme-document-adapter.ts
index d7a92cf5f..0378fbef8 100644
--- a/apps/docs/src/containers/theme-studio/theme-document-adapter.ts
+++ b/apps/docs/src/containers/theme-studio/theme-document-adapter.ts
@@ -1,9 +1,9 @@
 import type { ThemeDocument } from '@tiny-design/react';
+import { compileBrandTheme } from '@tiny-design/tokens/compile-brand-theme';
 import { validateThemeDocument } from '@tiny-design/tokens/validate-theme';
-import { toRgba, tintColor, softenSurface } from './color-utils';
-import { getPresetById, getPresetDraft } from './runtime-presets';
+import { toRgba } from './color-utils';
+import { getPresetDraft } from './runtime-presets';
 import type {
-  ThemeCodeView,
   ThemeEditorDraft,
   ThemeEditorSection,
   ThemeMode,
@@ -30,363 +30,16 @@ function normalizeImportedThemeDocument(theme: ThemeDocument): ThemeDocument {
   return validation.normalizedDocument as ThemeDocument;
 }
 
-function combineShadowValues(...values: Array<string | undefined>): string {
-  return (
-    values
-      .map((value) => value?.trim())
-      .filter((value): value is string => Boolean(value) && value !== 'none')
-      .join(', ') || 'none'
-  );
-}
-
 export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocument {
-  const { fields } = draft;
-  const primaryHover = tintColor(fields.primary, draft.mode === 'dark' ? 0.12 : 0.08);
-  const primaryActive = tintColor(fields.primary, draft.mode === 'dark' ? 0.2 : 0.16);
-  const primarySurface = toRgba(fields.primary, draft.mode === 'dark' ? 0.16 : 0.08);
-  const primarySurfaceActive = toRgba(fields.primary, draft.mode === 'dark' ? 0.28 : 0.18);
-  const defaultHover = softenSurface(fields.muted, draft.mode, draft.mode === 'dark' ? 0.1 : 0.06);
-  const defaultActive = softenSurface(
-    fields.muted,
-    draft.mode,
-    draft.mode === 'dark' ? 0.18 : 0.12
-  );
-  const defaultBorderHover = softenSurface(
-    fields.border,
-    draft.mode,
-    draft.mode === 'dark' ? 0.16 : 0.12
-  );
-  const defaultBorderActive = softenSurface(
-    fields.border,
-    draft.mode,
-    draft.mode === 'dark' ? 0.24 : 0.18
-  );
-  const infoHover = tintColor(fields.info, draft.mode === 'dark' ? 0.12 : 0.08);
-  const infoActive = tintColor(fields.info, draft.mode === 'dark' ? 0.2 : 0.16);
-  const successHover = tintColor(fields.success, draft.mode === 'dark' ? 0.12 : 0.08);
-  const successActive = tintColor(fields.success, draft.mode === 'dark' ? 0.2 : 0.16);
-  const warningHover = tintColor(fields.warning, draft.mode === 'dark' ? 0.12 : 0.08);
-  const warningActive = tintColor(fields.warning, draft.mode === 'dark' ? 0.2 : 0.16);
-  const dangerHover = tintColor(fields.danger, draft.mode === 'dark' ? 0.12 : 0.08);
-  const dangerActive = tintColor(fields.danger, draft.mode === 'dark' ? 0.2 : 0.16);
-  const controlFocusShadow = combineShadowValues(fields.shadowControl, fields.shadowFocus);
-
-  return {
+  return compileBrandTheme(draft.fields, {
+    mode: draft.mode,
+    presetId: draft.presetId,
     meta: {
-      id: `theme-editor-${draft.presetId}`,
       name: draft.meta.name,
       author: draft.meta.author,
       schemaVersion: 1,
     },
-    mode: draft.mode,
-    extends: draft.mode === 'dark' ? 'tiny-dark' : 'tiny-light',
-    tokens: {
-      semantic: {
-        'color-primary': fields.primary,
-        'color-primary-hover': primaryHover,
-        'color-primary-active': primaryActive,
-        'color-primary-bg': primarySurface,
-        'color-primary-bg-hover': primarySurfaceActive,
-        'color-primary-border': fields.primary,
-        'color-primary-text-hover': fields.primary,
-        'color-success': fields.success,
-        'color-success-hover': successHover,
-        'color-success-active': successActive,
-        'color-success-bg': toRgba(fields.success, draft.mode === 'dark' ? 0.18 : 0.12),
-        'color-success-border': toRgba(fields.success, draft.mode === 'dark' ? 0.4 : 0.24),
-        'color-info': fields.info,
-        'color-info-hover': infoHover,
-        'color-info-active': infoActive,
-        'color-info-bg': toRgba(fields.info, draft.mode === 'dark' ? 0.18 : 0.12),
-        'color-info-border': toRgba(fields.info, draft.mode === 'dark' ? 0.4 : 0.24),
-        'color-warning': fields.warning,
-        'color-warning-hover': warningHover,
-        'color-warning-active': warningActive,
-        'color-warning-bg': toRgba(fields.warning, draft.mode === 'dark' ? 0.18 : 0.12),
-        'color-warning-border': toRgba(fields.warning, draft.mode === 'dark' ? 0.4 : 0.24),
-        'color-danger-bg': toRgba(fields.danger, draft.mode === 'dark' ? 0.18 : 0.12),
-        'color-danger-border': toRgba(fields.danger, draft.mode === 'dark' ? 0.4 : 0.24),
-        'color-bg': fields.base,
-        'color-bg-container': fields.card,
-        'color-bg-elevated': fields.popover,
-        'color-bg-layout': fields.base,
-        'color-bg-spotlight': fields.muted,
-        'color-fill': fields.muted,
-        'color-fill-secondary': fields.accent,
-        'color-fill-tertiary': fields.border,
-        'color-bg-disabled': fields.muted,
-        'color-text': fields.baseForeground,
-        'color-text-heading': fields.cardForeground,
-        'color-text-secondary': toRgba(fields.baseForeground, draft.mode === 'dark' ? 0.72 : 0.68),
-        'color-text-tertiary': toRgba(fields.baseForeground, draft.mode === 'dark' ? 0.5 : 0.46),
-        'color-text-quaternary': toRgba(fields.baseForeground, draft.mode === 'dark' ? 0.36 : 0.32),
-        'color-border': fields.border,
-        'color-border-secondary': fields.border,
-        'color-border-light': fields.border,
-        'color-border-btn-default': fields.border,
-        'color-danger': fields.danger,
-        'color-danger-hover': dangerHover,
-        'color-danger-active': dangerActive,
-        'chart-1': fields.chart1,
-        'chart-2': fields.chart2,
-        'chart-3': fields.chart3,
-        'chart-4': fields.chart4,
-        'chart-5': fields.chart5,
-        'font-family': fields.fontSans,
-        'font-family-monospace': fields.fontMono,
-        'font-size-base': fields.fontSizeBase,
-        'line-height-base': fields.lineHeightBase,
-        'h1-font-size': fields.h1Size,
-        'h2-font-size': fields.h2Size,
-        'border-radius': fields.radius,
-        'shadow-control': fields.shadowControl,
-        'shadow-card': fields.shadowCard,
-        'shadow-focus': fields.shadowFocus,
-        'control.height.sm': fields.fieldHeightSm,
-        'control.height.md': fields.fieldHeightMd,
-        'control.height.lg': fields.fieldHeightLg,
-        'control.padding-inline.sm': fields.fieldPaddingSm,
-        'control.padding-inline.md': fields.fieldPaddingMd,
-        'control.padding-inline.lg': fields.fieldPaddingLg,
-      },
-      components: {
-        'button.solid.primary.bg': fields.primary,
-        'button.solid.primary.bg-hover': primaryHover,
-        'button.solid.primary.bg-active': primaryActive,
-        'button.solid.primary.border': fields.primary,
-        'button.solid.primary.border-hover': primaryHover,
-        'button.solid.primary.border-active': primaryActive,
-        'button.solid.primary.text': fields.primaryForeground,
-        'button.solid.primary.text-hover': fields.primaryForeground,
-        'button.solid.primary.text-active': fields.primaryForeground,
-        'button.solid.default.bg': fields.muted,
-        'button.solid.default.bg-hover': defaultHover,
-        'button.solid.default.bg-active': defaultActive,
-        'button.solid.default.border': fields.border,
-        'button.solid.default.border-hover': defaultBorderHover,
-        'button.solid.default.border-active': defaultBorderActive,
-        'button.solid.default.text': fields.baseForeground,
-        'button.solid.default.text-hover': fields.baseForeground,
-        'button.solid.default.text-active': fields.baseForeground,
-        'button.outline.default.bg': fields.base,
-        'button.outline.default.bg-hover': defaultHover,
-        'button.outline.default.bg-active': defaultActive,
-        'button.outline.default.border': fields.border,
-        'button.outline.default.border-hover': defaultBorderHover,
-        'button.outline.default.border-active': defaultBorderActive,
-        'button.outline.default.text': fields.baseForeground,
-        'button.outline.default.text-hover': fields.baseForeground,
-        'button.outline.default.text-active': fields.baseForeground,
-        'button.solid.default.shadow': fields.shadowControl,
-        'button.solid.default.shadow-hover': fields.shadowControl,
-        'button.solid.default.shadow-active': fields.shadowControl,
-        'button.outline.default.shadow': fields.shadowControl,
-        'button.outline.default.shadow-hover': fields.shadowControl,
-        'button.outline.default.shadow-active': fields.shadowControl,
-        'button.radius': fields.buttonRadius,
-        'button.height.sm': fields.buttonHeightSm,
-        'button.height.md': fields.buttonHeightMd,
-        'button.height.lg': fields.buttonHeightLg,
-        'button.padding-inline-sm': fields.buttonPaddingSm,
-        'button.padding-inline-md': fields.buttonPaddingMd,
-        'button.padding-inline-lg': fields.buttonPaddingLg,
-        'card.bg': fields.card,
-        'card.bg.filled': fields.secondary,
-        'card.border': fields.border,
-        'card.radius': fields.cardRadius,
-        'card.shadow': fields.shadowCard,
-        'card.shadow.hover': fields.shadowCard,
-        'card.header-color': fields.cardForeground,
-        'card.body-padding': fields.cardPadding,
-        'card.header-padding': fields.cardPadding,
-        'input.bg': fields.base,
-        'input.color': fields.baseForeground,
-        'input.border': fields.input,
-        'input.shadow': fields.shadowControl,
-        'input.border.hover': fields.ring,
-        'input.border.focus': fields.ring,
-        'input.shadow.focus': controlFocusShadow,
-        'input.radius': fields.inputRadius,
-        'input.height.sm': fields.fieldHeightSm,
-        'input.height.md': fields.fieldHeightMd,
-        'input.height.lg': fields.fieldHeightLg,
-        'input.padding-inline-sm': fields.fieldPaddingSm,
-        'input.padding-inline-md': fields.fieldPaddingMd,
-        'input.padding-inline-lg': fields.fieldPaddingLg,
-        'select.bg': fields.base,
-        'select.color': fields.baseForeground,
-        'select.border': fields.input,
-        'select.shadow': fields.shadowControl,
-        'select.border.hover': fields.ring,
-        'select.border.focus': fields.ring,
-        'select.shadow.focus': controlFocusShadow,
-        'select.radius': fields.inputRadius,
-        'select.height.sm': fields.fieldHeightSm,
-        'select.height.md': fields.fieldHeightMd,
-        'select.height.lg': fields.fieldHeightLg,
-        'select.padding-inline-start.sm': fields.fieldPaddingSm,
-        'select.padding-inline-start.md': fields.fieldPaddingMd,
-        'select.padding-inline-start.lg': fields.fieldPaddingLg,
-        'select.dropdown-bg': fields.popover,
-        'select.option.active-bg': fields.muted,
-        'select.option.selected-bg': fields.accent,
-        'table.radius': fields.radius,
-        'picker.input-bg': fields.base,
-        'picker.input-border': fields.input,
-        'picker.input-border-hover': fields.ring,
-        'picker.input-border-focus': fields.ring,
-        'picker.input-shadow-focus': controlFocusShadow,
-        'picker.input-color': fields.baseForeground,
-        'picker.input-color-placeholder': fields.mutedForeground,
-        'picker.input-color-muted': fields.mutedForeground,
-        'picker.input-radius': fields.inputRadius,
-        'picker.input-padding.sm': `0 ${fields.fieldPaddingSm}`,
-        'picker.input-padding.md': `0 ${fields.fieldPaddingMd}`,
-        'picker.input-padding.lg': `0 ${fields.fieldPaddingLg}`,
-        'picker.dropdown-bg': fields.popover,
-        'picker.dropdown-radius': fields.cardRadius,
-        'date-picker.header-border': fields.border,
-        'date-picker.header-button-color': fields.mutedForeground,
-        'date-picker.header-button-color-hover': fields.primary,
-        'date-picker.header-action-hover-bg': fields.muted,
-        'date-picker.header-action-focus-ring': fields.ring,
-        'date-picker.today-color': fields.primary,
-        'date-picker.today-color-hover': fields.primary,
-        'date-picker.today-hover-bg': fields.accent,
-        'date-picker.today-active-bg': fields.muted,
-        'date-picker.today-focus-ring': fields.ring,
-        'picker.cell-hover-bg': fields.muted,
-        'date-picker.cell-selected-bg': fields.primary,
-        'date-picker.cell-selected-color': fields.primaryForeground,
-        'date-picker.cell-selected-hover-bg': fields.primary,
-        'date-picker.cell-today-border': fields.primary,
-        'date-picker.cell-radius': fields.inputRadius,
-        'date-picker.panel-item-hover-bg': fields.muted,
-        'date-picker.panel-item-current-color': fields.primary,
-        'date-picker.panel-item-current-border': fields.primary,
-        'date-picker.panel-item-selected-bg': fields.accent,
-        'date-picker.panel-item-selected-color': fields.primary,
-        'date-picker.panel-item-selected-hover-bg': fields.muted,
-        'date-picker.range-bg': fields.accent,
-        'time-picker.column-border': fields.border,
-        'time-picker.cell-bg-selected': fields.primary,
-        'time-picker.cell-bg-selected-hover': fields.primary,
-        'time-picker.ok-button-bg': fields.primary,
-        'time-picker.ok-button-bg-hover': fields.primary,
-        'time-picker.ok-button-color': fields.primaryForeground,
-        'time-picker.ok-button-radius': fields.buttonRadius,
-        'calendar.bg': fields.card,
-        'calendar.border': fields.border,
-        'calendar.radius': fields.cardRadius,
-        'calendar.cell-hover-bg': fields.muted,
-        'calendar.header-action-color': fields.mutedForeground,
-        'calendar.header-action-color-hover': fields.primary,
-        'calendar.header-action-hover-bg': fields.muted,
-        'calendar.header-action-focus-ring': fields.ring,
-        'calendar.header-label-color': fields.cardForeground,
-        'calendar.header-label-color-hover': fields.primary,
-        'calendar.header-label-hover-bg': fields.muted,
-        'calendar.header-label-focus-ring': fields.ring,
-        'calendar.cell-header-color': fields.mutedForeground,
-        'calendar.week-number-color': fields.mutedForeground,
-        'calendar.cell-color': fields.cardForeground,
-        'calendar.cell-color-muted': fields.mutedForeground,
-        'calendar.cell-disabled-bg': fields.muted,
-        'calendar.cell-today-border': fields.primary,
-        'calendar.cell-selected-bg': fields.primary,
-        'calendar.cell-selected-color': fields.primaryForeground,
-        'calendar.range-bg': fields.accent,
-        'calendar.cell-focus-outline': fields.shadowFocus,
-        'calendar.cell-dot-color': fields.primary,
-        'calendar.panel-item-radius': fields.inputRadius,
-        'calendar.panel-item-hover-bg': fields.muted,
-        'calendar.panel-item-selected-color': fields.primaryForeground,
-        'calendar.panel-item-selected-bg': fields.primary,
-        'calendar.panel-item-selected-hover-bg': fields.primary,
-        'calendar.today-color': fields.primary,
-        'calendar.today-color-hover': fields.primary,
-        'calendar.today-hover-bg': fields.accent,
-        'calendar.today-active-bg': fields.muted,
-        'calendar.today-focus-ring': fields.ring,
-        'cascader.height.sm': fields.fieldHeightSm,
-        'cascader.height.md': fields.fieldHeightMd,
-        'cascader.height.lg': fields.fieldHeightLg,
-        'cascader.bg': fields.base,
-        'cascader.border': fields.input,
-        'cascader.border-hover': fields.ring,
-        'cascader.border-focus': fields.ring,
-        'cascader.shadow-focus': controlFocusShadow,
-        'cascader.radius': fields.inputRadius,
-        'cascader.padding.sm': `0 calc(${fields.fieldPaddingSm} + 20px) 0 ${fields.fieldPaddingSm}`,
-        'cascader.padding.md': `0 calc(${fields.fieldPaddingMd} + 20px) 0 ${fields.fieldPaddingMd}`,
-        'cascader.padding.lg': `0 calc(${fields.fieldPaddingLg} + 20px) 0 ${fields.fieldPaddingLg}`,
-        'native-select.bg': fields.base,
-        'native-select.border': fields.input,
-        'native-select.border-hover': fields.ring,
-        'native-select.border-focus': fields.ring,
-        'native-select.shadow-focus': controlFocusShadow,
-        'native-select.radius': fields.inputRadius,
-        'checkbox.bg': fields.base,
-        'checkbox.border': fields.input,
-        'checkbox.shadow': fields.shadowControl,
-        'checkbox.border.hover': fields.ring,
-        'checkbox.radius': fields.radius,
-        'checkbox.bg.checked': fields.primary,
-        'checkbox.border.checked': fields.primary,
-        'checkbox.indicator-color': fields.primaryForeground,
-        'radio.bg': fields.base,
-        'radio.border': fields.input,
-        'radio.shadow': fields.shadowControl,
-        'radio.border.checked': fields.primary,
-        'radio.dot-bg': fields.primary,
-        'switch.bg': fields.mutedForeground,
-        'switch.bg.checked': fields.primary,
-        'switch.thumb-border': fields.mutedForeground,
-        'switch.thumb-border.checked': fields.primary,
-        'input-number.height.sm': fields.fieldHeightSm,
-        'input-number.height.md': fields.fieldHeightMd,
-        'input-number.height.lg': fields.fieldHeightLg,
-        'segmented.bg': fields.muted,
-        'segmented.item-bg-hover': fields.secondary,
-        'segmented.item-bg-selected': fields.card,
-        'segmented.item-color': fields.mutedForeground,
-        'segmented.item-color-selected': fields.baseForeground,
-        'segmented.item-shadow-focus': fields.shadowFocus,
-        'segmented.radius': fields.radius,
-        'tag.bg': fields.secondary,
-        'tag.color': fields.secondaryForeground,
-        'tag.border': fields.border,
-        'tag.link-color': fields.mutedForeground,
-        'tag.checkable-bg': fields.card,
-        'tag.checkable-color': fields.primary,
-        'tag.checkable-border': fields.border,
-        'tag.checkable-bg.checked': fields.primary,
-        'tag.checkable-color.checked': fields.primaryForeground,
-        'tag.checkable-border.checked': fields.primary,
-        'progress.stroke-color.primary': fields.primary,
-        'progress.stroke-color.success': fields.success,
-        'progress.stroke-color.info': fields.info,
-        'progress.stroke-color.warning': fields.warning,
-        'progress.stroke-color.danger': fields.danger,
-        'progress.text-color': fields.baseForeground,
-        'progress.trail-bg': fields.muted,
-        'progress.circle-trail': fields.muted,
-        'table.color': fields.baseForeground,
-        'table.border': fields.border,
-        'table.header-bg': fields.secondary,
-        'table.row-hover-bg': fields.muted,
-        'table.cell-sortable-hover-bg': fields.muted,
-        'table.row-selected-bg': toRgba(fields.primary, draft.mode === 'dark' ? 0.22 : 0.08),
-        'table.sorter-icon-color': fields.mutedForeground,
-        'table.sorter-icon-color.active': fields.primary,
-        'table.empty-color': fields.mutedForeground,
-        'layout.sidebar-bg': fields.sidebar,
-        'layout.sidebar-color': fields.sidebarForeground,
-        'layout.sidebar-light-bg': fields.sidebar,
-        'layout.sidebar-light-color': fields.sidebarForeground,
-      },
-    },
-  };
+  });
 }
 
 function readToken(
@@ -591,9 +244,9 @@ export function applyPresetToDraft(
 }
 
 export const THEME_SECTION_LABELS: ThemeStudioSectionLabels = {
-  colors: 'Colors',
-  typography: 'Typography',
-  other: 'Other',
+  colors: 'Color Seeds',
+  typography: 'Type Seeds',
+  other: 'Scale Seeds',
 };
 
 export const TEMPLATE_OPTIONS: ThemeStudioTemplateOption[] = [
@@ -604,7 +257,8 @@ export const TEMPLATE_OPTIONS: ThemeStudioTemplateOption[] = [
 ];
 
 export const CODE_VIEW_OPTIONS: ThemeStudioCodeViewOption[] = [
+  { label: 'Seed JSON', value: 'seeds' },
   { label: 'Theme JSON', value: 'json' },
   { label: 'CSS Vars', value: 'css' },
-  { label: 'Changed Tokens', value: 'tokens' },
+  { label: 'Compiled Tokens', value: 'tokens' },
 ];
diff --git a/apps/docs/src/containers/theme-studio/theme-studio.scss b/apps/docs/src/containers/theme-studio/theme-studio.scss
index 0876ddd67..137144d61 100644
--- a/apps/docs/src/containers/theme-studio/theme-studio.scss
+++ b/apps/docs/src/containers/theme-studio/theme-studio.scss
@@ -213,6 +213,13 @@
   margin-bottom: 6px;
 }
 
+.theme-studio__group-header .ty-typography-text-secondary {
+  display: block;
+  margin-top: 2px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
 .theme-studio__group-fields {
   gap: 8px;
 }
diff --git a/apps/docs/src/containers/theme-studio/types.ts b/apps/docs/src/containers/theme-studio/types.ts
index 0c8f3ada5..5f42b4bd5 100644
--- a/apps/docs/src/containers/theme-studio/types.ts
+++ b/apps/docs/src/containers/theme-studio/types.ts
@@ -1,77 +1,12 @@
 import type { ThemeDocument } from '@tiny-design/react';
+import type { BrandSeedFields } from '@tiny-design/tokens/compile-brand-theme';
 
 export type ThemeEditorSection = 'colors' | 'typography' | 'other';
 export type ThemePreviewTemplate = 'cards' | 'dashboard' | 'mail' | 'pricing';
-export type ThemeCodeView = 'json' | 'css' | 'tokens';
+export type ThemeCodeView = 'seeds' | 'json' | 'css' | 'tokens';
 export type ThemeMode = 'light' | 'dark';
 
-export interface ThemeEditorFields {
-  primary: string;
-  primaryForeground: string;
-  secondary: string;
-  secondaryForeground: string;
-  accent: string;
-  accentForeground: string;
-  success: string;
-  successForeground: string;
-  info: string;
-  infoForeground: string;
-  warning: string;
-  warningForeground: string;
-  danger: string;
-  dangerForeground: string;
-  base: string;
-  baseForeground: string;
-  card: string;
-  cardForeground: string;
-  popover: string;
-  popoverForeground: string;
-  muted: string;
-  mutedForeground: string;
-  border: string;
-  input: string;
-  ring: string;
-  chart1: string;
-  chart2: string;
-  chart3: string;
-  chart4: string;
-  chart5: string;
-  sidebar: string;
-  sidebarForeground: string;
-  sidebarPrimary: string;
-  sidebarPrimaryForeground: string;
-  sidebarAccent: string;
-  sidebarAccentForeground: string;
-  sidebarBorder: string;
-  sidebarRing: string;
-  fontSans: string;
-  fontMono: string;
-  fontSizeBase: string;
-  lineHeightBase: string;
-  h1Size: string;
-  h2Size: string;
-  letterSpacing: string;
-  radius: string;
-  shadowControl: string;
-  shadowCard: string;
-  shadowFocus: string;
-  buttonRadius: string;
-  inputRadius: string;
-  cardRadius: string;
-  fieldPaddingSm: string;
-  fieldPaddingMd: string;
-  fieldPaddingLg: string;
-  buttonPaddingSm: string;
-  buttonPaddingMd: string;
-  buttonPaddingLg: string;
-  fieldHeightSm: string;
-  fieldHeightMd: string;
-  fieldHeightLg: string;
-  buttonHeightSm: string;
-  buttonHeightMd: string;
-  buttonHeightLg: string;
-  cardPadding: string;
-}
+export type ThemeEditorFields = BrandSeedFields;
 
 export interface ThemeEditorDraft {
   meta: {
@@ -102,8 +37,10 @@ export type SliderFieldConfig = {
   unit?: 'px' | 'em' | 'rem';
 };
 
-export type ThemeEditorColorGroup = {
+export type ThemeEditorSeedGroup = {
   title: string;
+  description?: string;
+  tier?: 'core' | 'advanced';
   fields: Array<{ key: FieldKey; label: string }>;
 };
 
diff --git a/apps/docs/src/containers/token-explorer/token-explorer.scss b/apps/docs/src/containers/token-explorer/token-explorer.scss
index b2aeda669..7a8629e88 100644
--- a/apps/docs/src/containers/token-explorer/token-explorer.scss
+++ b/apps/docs/src/containers/token-explorer/token-explorer.scss
@@ -62,7 +62,7 @@
     padding: 12px 14px;
     border: 1px solid var(--ty-color-border-light);
     border-radius: 12px;
-    background: linear-gradient(180deg, var(--ty-color-bg-container) 0%, var(--ty-color-fill-quaternary) 100%);
+    background: linear-gradient(180deg, var(--ty-color-bg-container) 0%, var(--ty-color-fill-tertiary) 100%);
   }
 
   &__summary-item span {
@@ -128,7 +128,7 @@
   }
 
   &__token-key {
-    font-family: var(--ty-font-mono);
+    font-family: var(--ty-font-family-monospace);
     font-size: 14px;
     font-weight: 600;
     color: var(--ty-color-text);
@@ -137,7 +137,7 @@
 
   &__token-var {
     margin-top: 4px;
-    font-family: var(--ty-font-mono);
+    font-family: var(--ty-font-family-monospace);
     font-size: 12px;
     color: var(--ty-color-text-secondary);
     word-break: break-word;
@@ -194,7 +194,7 @@
 
   &__token-meta dd {
     margin: 0;
-    font-family: var(--ty-font-mono);
+    font-family: var(--ty-font-family-monospace);
     font-size: 12px;
     color: var(--ty-color-text);
     word-break: break-word;
diff --git a/packages/extract/src/extract-tokens.ts b/packages/extract/src/extract-tokens.ts
index c6c5fad0f..a4d65e71f 100644
--- a/packages/extract/src/extract-tokens.ts
+++ b/packages/extract/src/extract-tokens.ts
@@ -34,7 +34,13 @@ export function extractTokens(options: ExtractTokensOptions): TokenData {
 
   if (options.registryPath) {
     const registry = JSON.parse(fs.readFileSync(options.registryPath, 'utf-8')) as {
-      tokens?: Array<{ key: string; cssVar: string; type: string; defaultValue: string | number }>;
+      tokens?: Array<{
+        key: string;
+        cssVar: string;
+        type: string;
+        defaultValue: string | number;
+        resolvedValue?: string | number;
+      }>;
     };
 
     for (const token of registry.tokens ?? []) {
@@ -43,7 +49,7 @@ export function extractTokens(options: ExtractTokensOptions): TokenData {
       if (category) {
         result[category][token.key] = {
           variable: token.cssVar,
-          value: String(token.defaultValue),
+          value: String(token.resolvedValue ?? token.defaultValue),
         };
       }
     }
diff --git a/packages/mcp/__tests__/extract-tokens.test.ts b/packages/mcp/__tests__/extract-tokens.test.ts
index 67cad2f77..1e0ba96c1 100644
--- a/packages/mcp/__tests__/extract-tokens.test.ts
+++ b/packages/mcp/__tests__/extract-tokens.test.ts
@@ -30,6 +30,15 @@ describe('extractTokens', () => {
     });
   });
 
+  it('extracts resolved semantic color values from the token registry', () => {
+    const result = extractTokens({ registryPath: TOKEN_REGISTRY_PATH, variablesPath: VARIABLES_PATH });
+
+    expect(result.colors['color-bg']).toEqual({
+      variable: '--ty-color-bg',
+      value: '#ffffff',
+    });
+  });
+
   it('extracts typography tokens', () => {
     const result = extractTokens({ registryPath: TOKEN_REGISTRY_PATH, variablesPath: VARIABLES_PATH });
 
diff --git a/packages/mcp/src/data/components.json b/packages/mcp/src/data/components.json
index 2f2c94dd3..68e36e300 100644
--- a/packages/mcp/src/data/components.json
+++ b/packages/mcp/src/data/components.json
@@ -1061,7 +1061,7 @@
       },
       {
         "name": "CardMode",
-        "code": "import React from 'react';\nimport { Calendar } from '@tiny-design/react';\n\nexport default function CardModeDemo() {\n  const [value, setValue] = React.useState(new Date());\n\n  return (\n    <div>\n      <style>{`.weekend-cell.ty-calendar__cell_in-view { color: var(--ty-color-error, #e5484d); }`}</style>\n      <p style={{ marginBottom: 8, fontSize: 13, color: '#666' }}>\n        Use arrow keys to navigate, Enter to select, Escape to reset focus.\n      </p>\n      <Calendar\n        value={value}\n        onChange={(date) => setValue(date)}\n        fullscreen={false}\n        cellClassName={(date) =>\n          date.getDay() === 0 || date.getDay() === 6 ? 'weekend-cell' : undefined\n        }\n      />\n    </div>\n  );\n}\n"
+        "code": "import React from 'react';\nimport { Calendar } from '@tiny-design/react';\n\nexport default function CardModeDemo() {\n  const [value, setValue] = React.useState(new Date());\n\n  return (\n    <div>\n      <style>{`.weekend-cell.ty-calendar__cell_in-view { color: var(--ty-color-danger, #e5484d); }`}</style>\n      <p style={{ marginBottom: 8, fontSize: 13, color: '#666' }}>\n        Use arrow keys to navigate, Enter to select, Escape to reset focus.\n      </p>\n      <Calendar\n        value={value}\n        onChange={(date) => setValue(date)}\n        fullscreen={false}\n        cellClassName={(date) =>\n          date.getDay() === 0 || date.getDay() === 6 ? 'weekend-cell' : undefined\n        }\n      />\n    </div>\n  );\n}\n"
       },
       {
         "name": "DotIndicator",
@@ -1879,7 +1879,7 @@
       },
       {
         "name": "Oklch",
-        "code": "import React from 'react';\nimport ColorPicker from '../index';\nimport type { ColorChangeMeta, ColorFormat } from '../types';\n\nexport default function OklchDemo() {\n  const format: ColorFormat = 'oklch';\n  const [color, setColor] = React.useState('oklch(0.667 0.178 258.4)');\n  const [meta, setMeta] = React.useState<ColorChangeMeta | null>(null);\n\n  return (\n    <div style={{ display: 'grid', gap: 12 }}>\n      <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>\n        <ColorPicker\n          value={color}\n          format={format}\n          formats={['hex', 'rgb', 'oklch']}\n          onChange={(next: string, nextMeta: ColorChangeMeta) => {\n            setColor(next);\n            setMeta(nextMeta);\n          }}\n        />\n        <span>Value: {color}</span>\n      </div>\n      <pre style={{ margin: 0, padding: 12, fontSize: 12, borderRadius: 8, background: 'var(--ty-color-fill-2, rgba(0,0,0,0.04))' }}>\n        {JSON.stringify(meta, null, 2)}\n      </pre>\n    </div>\n  );\n}\n"
+        "code": "import React from 'react';\nimport ColorPicker from '../index';\nimport type { ColorChangeMeta, ColorFormat } from '../types';\n\nexport default function OklchDemo() {\n  const format: ColorFormat = 'oklch';\n  const [color, setColor] = React.useState('oklch(0.667 0.178 258.4)');\n  const [meta, setMeta] = React.useState<ColorChangeMeta | null>(null);\n\n  return (\n    <div style={{ display: 'grid', gap: 12 }}>\n      <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>\n        <ColorPicker\n          value={color}\n          format={format}\n          formats={['hex', 'rgb', 'oklch']}\n          onChange={(next: string, nextMeta: ColorChangeMeta) => {\n            setColor(next);\n            setMeta(nextMeta);\n          }}\n        />\n        <span>Value: {color}</span>\n      </div>\n      <pre style={{ margin: 0, padding: 12, fontSize: 12, borderRadius: 8, background: 'var(--ty-color-fill-secondary, rgba(0,0,0,0.04))' }}>\n        {JSON.stringify(meta, null, 2)}\n      </pre>\n    </div>\n  );\n}\n"
       },
       {
         "name": "Trigger",
@@ -2354,7 +2354,7 @@
     "demos": [
       {
         "name": "Basic",
-        "code": "import React from 'react';\nimport { Button, Descriptions, Tag } from '@tiny-design/react';\n\nexport default function BasicDemo() {\n  return (\n    <Descriptions\n      title=\"Workspace Profile\"\n      extra={<Button size=\"sm\" type=\"primary\">Edit</Button>}\n      columns={2}\n      footer={<span style={{ color: 'var(--ty-color-text-3)' }}>Last synced 2 minutes ago</span>}>\n      <Descriptions.Item label=\"Name\">Tiny Studio</Descriptions.Item>\n      <Descriptions.Item label=\"Region\">Australia Southeast</Descriptions.Item>\n      <Descriptions.Item label=\"Owner\" extra={<Tag size=\"sm\">Core</Tag>}>\n        Product Ops\n      </Descriptions.Item>\n      <Descriptions.Item label=\"Website\">tiny.design</Descriptions.Item>\n      <Descriptions.Item label=\"Summary\" span=\"fill\">\n        Shared component workspace for tokens, docs, charts, and platform-specific UI packages.\n      </Descriptions.Item>\n    </Descriptions>\n  );\n}\n"
+        "code": "import React from 'react';\nimport { Button, Descriptions, Tag } from '@tiny-design/react';\n\nexport default function BasicDemo() {\n  return (\n    <Descriptions\n      title=\"Workspace Profile\"\n      extra={<Button size=\"sm\" type=\"primary\">Edit</Button>}\n      columns={2}\n      footer={<span style={{ color: 'var(--ty-color-text-tertiary)' }}>Last synced 2 minutes ago</span>}>\n      <Descriptions.Item label=\"Name\">Tiny Studio</Descriptions.Item>\n      <Descriptions.Item label=\"Region\">Australia Southeast</Descriptions.Item>\n      <Descriptions.Item label=\"Owner\" extra={<Tag size=\"sm\">Core</Tag>}>\n        Product Ops\n      </Descriptions.Item>\n      <Descriptions.Item label=\"Website\">tiny.design</Descriptions.Item>\n      <Descriptions.Item label=\"Summary\" span=\"fill\">\n        Shared component workspace for tokens, docs, charts, and platform-specific UI packages.\n      </Descriptions.Item>\n    </Descriptions>\n  );\n}\n"
       },
       {
         "name": "Border",
@@ -4246,19 +4246,19 @@
     "demos": [
       {
         "name": "basic",
-        "code": "import React from 'react';\nimport { Marquee } from '@tiny-design/react';\n\nconst itemStyle: React.CSSProperties = {\n  flexShrink: 0,\n  padding: '12px 24px',\n  borderRadius: 8,\n  background: 'var(--ty-color-bg-component)',\n  border: '1px solid var(--ty-color-border-secondary)',\n  whiteSpace: 'nowrap',\n};\n\nexport default function BasicDemo() {\n  return (\n    <Marquee fade>\n      {Array.from({ length: 8 }, (_, i) => (\n        <div key={i} style={itemStyle}>\n          Item {i + 1}\n        </div>\n      ))}\n    </Marquee>\n  );\n}\n"
+        "code": "import React from 'react';\nimport { Marquee } from '@tiny-design/react';\n\nconst itemStyle: React.CSSProperties = {\n  flexShrink: 0,\n  padding: '12px 24px',\n  borderRadius: 8,\n  background: 'var(--ty-color-bg-container)',\n  border: '1px solid var(--ty-color-border-secondary)',\n  whiteSpace: 'nowrap',\n};\n\nexport default function BasicDemo() {\n  return (\n    <Marquee fade>\n      {Array.from({ length: 8 }, (_, i) => (\n        <div key={i} style={itemStyle}>\n          Item {i + 1}\n        </div>\n      ))}\n    </Marquee>\n  );\n}\n"
       },
       {
         "name": "cards",
-        "code": "import React from 'react';\nimport { Marquee } from '@tiny-design/react';\n\nconst cardStyle: React.CSSProperties = {\n  flexShrink: 0,\n  width: 200,\n  padding: 16,\n  borderRadius: 12,\n  background: 'var(--ty-color-bg-component)',\n  border: '1px solid var(--ty-color-border-secondary)',\n};\n\nconst avatarStyle: React.CSSProperties = {\n  width: 40,\n  height: 40,\n  borderRadius: '50%',\n  background: 'var(--ty-color-primary)',\n  opacity: 0.2,\n};\n\nconst nameStyle: React.CSSProperties = {\n  height: 12,\n  width: '60%',\n  borderRadius: 6,\n  background: 'var(--ty-color-text-secondary)',\n  opacity: 0.2,\n  marginTop: 12,\n};\n\nconst textStyle: React.CSSProperties = {\n  height: 8,\n  borderRadius: 4,\n  background: 'var(--ty-color-text-secondary)',\n  opacity: 0.1,\n  marginTop: 8,\n};\n\nexport default function CardsDemo() {\n  return (\n    <Marquee fade duration={40} gap={20}>\n      {Array.from({ length: 6 }, (_, i) => (\n        <div key={i} style={cardStyle}>\n          <div style={avatarStyle} />\n          <div style={nameStyle} />\n          <div style={textStyle} />\n          <div style={{ ...textStyle, width: '80%' }} />\n          <div style={{ ...textStyle, width: '45%' }} />\n        </div>\n      ))}\n    </Marquee>\n  );\n}\n"
+        "code": "import React from 'react';\nimport { Marquee } from '@tiny-design/react';\n\nconst cardStyle: React.CSSProperties = {\n  flexShrink: 0,\n  width: 200,\n  padding: 16,\n  borderRadius: 12,\n  background: 'var(--ty-color-bg-container)',\n  border: '1px solid var(--ty-color-border-secondary)',\n};\n\nconst avatarStyle: React.CSSProperties = {\n  width: 40,\n  height: 40,\n  borderRadius: '50%',\n  background: 'var(--ty-color-primary)',\n  opacity: 0.2,\n};\n\nconst nameStyle: React.CSSProperties = {\n  height: 12,\n  width: '60%',\n  borderRadius: 6,\n  background: 'var(--ty-color-text-secondary)',\n  opacity: 0.2,\n  marginTop: 12,\n};\n\nconst textStyle: React.CSSProperties = {\n  height: 8,\n  borderRadius: 4,\n  background: 'var(--ty-color-text-secondary)',\n  opacity: 0.1,\n  marginTop: 8,\n};\n\nexport default function CardsDemo() {\n  return (\n    <Marquee fade duration={40} gap={20}>\n      {Array.from({ length: 6 }, (_, i) => (\n        <div key={i} style={cardStyle}>\n          <div style={avatarStyle} />\n          <div style={nameStyle} />\n          <div style={textStyle} />\n          <div style={{ ...textStyle, width: '80%' }} />\n          <div style={{ ...textStyle, width: '45%' }} />\n        </div>\n      ))}\n    </Marquee>\n  );\n}\n"
       },
       {
         "name": "direction",
-        "code": "import React from 'react';\nimport { Marquee } from '@tiny-design/react';\n\nconst itemStyle: React.CSSProperties = {\n  flexShrink: 0,\n  padding: '12px 24px',\n  borderRadius: 8,\n  background: 'var(--ty-color-bg-component)',\n  border: '1px solid var(--ty-color-border-secondary)',\n  whiteSpace: 'nowrap',\n};\n\nexport default function DirectionDemo() {\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n      <Marquee fade duration={30}>\n        {Array.from({ length: 6 }, (_, i) => (\n          <div key={i} style={itemStyle}>\n            Left {i + 1}\n          </div>\n        ))}\n      </Marquee>\n      <Marquee fade duration={30} direction=\"right\">\n        {Array.from({ length: 6 }, (_, i) => (\n          <div key={i} style={itemStyle}>\n            Right {i + 1}\n          </div>\n        ))}\n      </Marquee>\n    </div>\n  );\n}\n"
+        "code": "import React from 'react';\nimport { Marquee } from '@tiny-design/react';\n\nconst itemStyle: React.CSSProperties = {\n  flexShrink: 0,\n  padding: '12px 24px',\n  borderRadius: 8,\n  background: 'var(--ty-color-bg-container)',\n  border: '1px solid var(--ty-color-border-secondary)',\n  whiteSpace: 'nowrap',\n};\n\nexport default function DirectionDemo() {\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n      <Marquee fade duration={30}>\n        {Array.from({ length: 6 }, (_, i) => (\n          <div key={i} style={itemStyle}>\n            Left {i + 1}\n          </div>\n        ))}\n      </Marquee>\n      <Marquee fade duration={30} direction=\"right\">\n        {Array.from({ length: 6 }, (_, i) => (\n          <div key={i} style={itemStyle}>\n            Right {i + 1}\n          </div>\n        ))}\n      </Marquee>\n    </div>\n  );\n}\n"
       },
       {
         "name": "speed",
-        "code": "import React from 'react';\nimport { Marquee } from '@tiny-design/react';\n\nconst itemStyle: React.CSSProperties = {\n  flexShrink: 0,\n  padding: '12px 24px',\n  borderRadius: 8,\n  background: 'var(--ty-color-bg-component)',\n  border: '1px solid var(--ty-color-border-secondary)',\n  whiteSpace: 'nowrap',\n};\n\nexport default function SpeedDemo() {\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n      <Marquee fade duration={10}>\n        {Array.from({ length: 6 }, (_, i) => (\n          <div key={i} style={itemStyle}>\n            Fast {i + 1}\n          </div>\n        ))}\n      </Marquee>\n      <Marquee fade duration={60}>\n        {Array.from({ length: 6 }, (_, i) => (\n          <div key={i} style={itemStyle}>\n            Slow {i + 1}\n          </div>\n        ))}\n      </Marquee>\n    </div>\n  );\n}\n"
+        "code": "import React from 'react';\nimport { Marquee } from '@tiny-design/react';\n\nconst itemStyle: React.CSSProperties = {\n  flexShrink: 0,\n  padding: '12px 24px',\n  borderRadius: 8,\n  background: 'var(--ty-color-bg-container)',\n  border: '1px solid var(--ty-color-border-secondary)',\n  whiteSpace: 'nowrap',\n};\n\nexport default function SpeedDemo() {\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>\n      <Marquee fade duration={10}>\n        {Array.from({ length: 6 }, (_, i) => (\n          <div key={i} style={itemStyle}>\n            Fast {i + 1}\n          </div>\n        ))}\n      </Marquee>\n      <Marquee fade duration={60}>\n        {Array.from({ length: 6 }, (_, i) => (\n          <div key={i} style={itemStyle}>\n            Slow {i + 1}\n          </div>\n        ))}\n      </Marquee>\n    </div>\n  );\n}\n"
       }
     ]
   },
@@ -5360,8 +5360,8 @@
     "name": "QuickActions",
     "dirName": "quick-actions",
     "category": "Navigation",
-    "description": "A compact action launcher that expands to reveal a set of quick actions.",
-    "descriptionZh": "悬浮按钮，展开后显示一组操作。",
+    "description": "A floating action launcher for a small set of high-priority tasks.",
+    "descriptionZh": "用于承载少量高优先级操作的浮动动作启动器。",
     "props": [
       {
         "name": "icon",
@@ -5375,6 +5375,12 @@
         "required": false,
         "description": ""
       },
+      {
+        "name": "label",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
       {
         "name": "direction",
         "type": "'up' | 'down' | 'left' | 'right'",
@@ -5382,26 +5388,26 @@
         "description": ""
       },
       {
-        "name": "open",
-        "type": "boolean",
+        "name": "trigger",
+        "type": "'click' | 'hover'",
         "required": false,
         "description": ""
       },
       {
-        "name": "trigger",
-        "type": "'hover' | 'click'",
+        "name": "open",
+        "type": "boolean",
         "required": false,
         "description": ""
       },
       {
-        "name": "onOpen",
-        "type": "() => void",
+        "name": "defaultOpen",
+        "type": "boolean",
         "required": false,
         "description": ""
       },
       {
-        "name": "onClose",
-        "type": "() => void",
+        "name": "closeOnActionClick",
+        "type": "boolean",
         "required": false,
         "description": ""
       },
@@ -5417,6 +5423,12 @@
         "required": false,
         "description": ""
       },
+      {
+        "name": "onOpenChange",
+        "type": "(open: boolean, context: QuickActionsOpenChangeContext) => void",
+        "required": false,
+        "description": ""
+      },
       {
         "name": "style",
         "type": "CSSProperties",
@@ -5437,21 +5449,25 @@
       }
     ],
     "demos": [
+      {
+        "name": "ActionBehavior",
+        "code": "import React from 'react';\nimport { QuickActions, Message } from '@tiny-design/react';\nimport { IconBookmark, IconShare, IconStar } from '@tiny-design/icons';\n\nexport default function ActionBehaviorDemo() {\n  return (\n    <div\n      style={{\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'flex-end',\n        gap: 32,\n        minHeight: 320,\n        padding: '0 16px 20px',\n        flexWrap: 'wrap',\n      }}>\n      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>\n        <div style={{ fontSize: 12, color: 'var(--ty-color-text-secondary)', textAlign: 'center' }}>\n          Keep the whole launcher open\n        </div>\n        <QuickActions label=\"Persistent actions\" closeOnActionClick={false}>\n          <QuickActions.Action\n            icon={<IconBookmark />}\n            label=\"Pin selection\"\n            description=\"Every action click keeps this stack visible.\"\n            onClick={() => Message.info('Pinned')}\n          />\n          <QuickActions.Action\n            icon={<IconStar />}\n            label=\"Mark priority\"\n            description=\"Useful when several quick actions happen in sequence.\"\n            onClick={() => Message.success('Priority updated')}\n          />\n          <QuickActions.Action\n            icon={<IconShare />}\n            label=\"Share update\"\n            description=\"Still stays open after sharing.\"\n            onClick={() => Message.info('Shared')}\n          />\n        </QuickActions>\n      </div>\n\n      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>\n        <div style={{ fontSize: 12, color: 'var(--ty-color-text-secondary)', textAlign: 'center' }}>\n          Keep only one action open\n        </div>\n        <QuickActions label=\"Selective persistence\">\n          <QuickActions.Action\n            icon={<IconBookmark />}\n            label=\"Save draft\"\n            description=\"Default action clicks close the launcher.\"\n            onClick={() => Message.success('Draft saved')}\n          />\n          <QuickActions.Action\n            icon={<IconStar />}\n            label=\"Adjust audience\"\n            description=\"This action opts into keeping the launcher open.\"\n            keepOpen\n            onClick={() => Message.info('Audience panel opened')}\n          />\n          <QuickActions.Action\n            icon={<IconShare />}\n            label=\"Send update\"\n            description=\"Closes again because keepOpen is not set.\"\n            onClick={() => Message.info('Update sent')}\n          />\n        </QuickActions>\n      </div>\n    </div>\n  );\n}\n"
+      },
       {
         "name": "Basic",
-        "code": "import React from 'react';\nimport { QuickActions, Message } from '@tiny-design/react';\n\nexport default function BasicDemo() {\n  return (\n    <div style={{ position: 'relative', height: 320 }}>\n      <div style={{ position: 'absolute', bottom: 16, right: 16 }}>\n        <QuickActions>\n          <QuickActions.Action icon=\"C\" tooltip=\"Copy\" onClick={() => Message.info('Copy')} />\n          <QuickActions.Action icon=\"P\" tooltip=\"Print\" onClick={() => Message.info('Print')} />\n          <QuickActions.Action icon=\"S\" tooltip=\"Share\" onClick={() => Message.info('Share')} />\n          <QuickActions.Action icon=\"D\" tooltip=\"Save\" onClick={() => Message.info('Save')} />\n        </QuickActions>\n      </div>\n    </div>\n  );\n}\n"
+        "code": "import React from 'react';\nimport { QuickActions, Message } from '@tiny-design/react';\nimport { IconBookmark, IconShare, IconStar, IconPlus, IconClose } from '@tiny-design/icons';\n\nexport default function BasicDemo() {\n  return (\n    <div style={{ position: 'relative', height: 320 }}>\n      <div style={{ position: 'absolute', bottom: 20, right: 20 }}>\n        <QuickActions label=\"Post actions\" icon={<IconPlus />} openIcon={<IconClose />}>\n          <QuickActions.Action\n            icon={<IconBookmark />}\n            label=\"Save draft\"\n            description=\"Keep this update in your private workspace.\"\n            onClick={() => Message.success('Draft saved')}\n          />\n          <QuickActions.Action\n            icon={<IconStar />}\n            label=\"Feature post\"\n            description=\"Pin it to the top of your campaign board.\"\n            onClick={() => Message.info('Marked as featured')}\n          />\n          <QuickActions.Action\n            icon={<IconShare />}\n            label=\"Share now\"\n            description=\"Send the latest version to collaborators.\"\n            onClick={() => Message.info('Share started')}\n          />\n        </QuickActions>\n      </div>\n    </div>\n  );\n}\n"
       },
       {
         "name": "Click",
-        "code": "import React from 'react';\nimport { QuickActions, Message } from '@tiny-design/react';\n\nexport default function ClickDemo() {\n  return (\n    <div style={{ position: 'relative', height: 320 }}>\n      <div style={{ position: 'absolute', bottom: 16, right: 16 }}>\n        <QuickActions trigger=\"click\">\n          <QuickActions.Action icon=\"C\" tooltip=\"Copy\" onClick={() => Message.info('Copy')} />\n          <QuickActions.Action icon=\"P\" tooltip=\"Print\" onClick={() => Message.info('Print')} />\n          <QuickActions.Action icon=\"S\" tooltip=\"Share\" onClick={() => Message.info('Share')} />\n        </QuickActions>\n      </div>\n    </div>\n  );\n}\n"
+        "code": "import React from 'react';\nimport { QuickActions, Message } from '@tiny-design/react';\nimport { IconBookmark, IconShare, IconStar } from '@tiny-design/icons';\n\nexport default function ClickDemo() {\n  return (\n    <div style={{ position: 'relative', height: 320 }}>\n      <div style={{ position: 'absolute', bottom: 20, right: 20 }}>\n        <QuickActions label=\"Project actions\" trigger=\"hover\">\n          <QuickActions.Action\n            icon={<IconBookmark />}\n            label=\"Save snapshot\"\n            description=\"Open on pointer hover and keyboard focus.\"\n            onClick={() => Message.success('Snapshot saved')}\n          />\n          <QuickActions.Action\n            icon={<IconStar />}\n            label=\"Keep panel open\"\n            description=\"Useful for multi-step quick operations.\"\n            keepOpen\n            onClick={() => Message.info('Panel kept open')}\n          />\n          <QuickActions.Action\n            icon={<IconShare />}\n            label=\"Share board\"\n            description=\"Invite teammates into the current workspace.\"\n            onClick={() => Message.info('Invite sent')}\n          />\n        </QuickActions>\n      </div>\n    </div>\n  );\n}\n"
       },
       {
         "name": "CustomIcon",
-        "code": "import React from 'react';\nimport { QuickActions } from '@tiny-design/react';\nimport { IconPlus, IconClose, IconBookmark, IconStar, IconShare } from '@tiny-design/icons';\n\nexport default function CustomIconDemo() {\n  return (\n    <div style={{ position: 'relative', height: 320 }}>\n      <div style={{ position: 'absolute', bottom: 16, right: 16 }}>\n        <QuickActions\n          icon={<IconPlus />}\n          openIcon={<IconClose />}\n        >\n          <QuickActions.Action icon={<IconBookmark />} tooltip=\"Save\" />\n          <QuickActions.Action icon={<IconStar />} tooltip=\"Favorite\" />\n          <QuickActions.Action icon={<IconShare />} tooltip=\"Share\" />\n        </QuickActions>\n      </div>\n    </div>\n  );\n}\n"
+        "code": "import React, { useState } from 'react';\nimport { QuickActions, Message } from '@tiny-design/react';\nimport { IconBookmark, IconClose, IconPlus, IconShare, IconStar } from '@tiny-design/icons';\n\nexport default function CustomIconDemo() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <div style={{ position: 'relative', height: 320 }}>\n      <div style={{ position: 'absolute', bottom: 20, right: 20 }}>\n        <QuickActions\n          open={open}\n          onOpenChange={(nextOpen) => setOpen(nextOpen)}\n          label=\"Campaign actions\"\n          icon={<IconPlus />}\n          openIcon={<IconClose />}>\n          <QuickActions.Action\n            icon={<IconBookmark />}\n            label=\"Save for later\"\n            description=\"Keep this campaign editable for the next sprint.\"\n            onClick={() => Message.success('Saved for later')}\n          />\n          <QuickActions.Action\n            icon={<IconStar />}\n            label=\"Featured slot\"\n            description=\"Reserve a premium slot on the landing page.\"\n            loading={open}\n          />\n          <QuickActions.Action\n            icon={<IconShare />}\n            label=\"Share campaign\"\n            description=\"Send the campaign link to stakeholders.\"\n            danger\n            onClick={() => Message.warning('Shared with external reviewers')}\n          />\n        </QuickActions>\n      </div>\n    </div>\n  );\n}\n"
       },
       {
         "name": "Direction",
-        "code": "import React from 'react';\nimport { QuickActions } from '@tiny-design/react';\n\nexport default function DirectionDemo() {\n  const actions = (\n    <>\n      <QuickActions.Action icon=\"A\" tooltip=\"Action 1\" />\n      <QuickActions.Action icon=\"B\" tooltip=\"Action 2\" />\n      <QuickActions.Action icon=\"C\" tooltip=\"Action 3\" />\n    </>\n  );\n\n  return (\n    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 300, gap: 80 }}>\n      <QuickActions direction=\"right\">\n        {actions}\n      </QuickActions>\n      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 120 }}>\n        <QuickActions direction=\"down\">\n          {actions}\n        </QuickActions>\n        <QuickActions direction=\"up\">\n          {actions}\n        </QuickActions>\n      </div>\n      <QuickActions direction=\"left\">\n        {actions}\n      </QuickActions>\n    </div>\n  );\n}\n"
+        "code": "import React from 'react';\nimport { QuickActions } from '@tiny-design/react';\n\nconst actions = (\n  <>\n    <QuickActions.Action icon=\"R\" label=\"Review\" description=\"Collect final approvals.\" />\n    <QuickActions.Action icon=\"S\" label=\"Schedule\" description=\"Set launch time and audience.\" />\n    <QuickActions.Action icon=\"P\" label=\"Publish\" description=\"Push this update live.\" danger />\n  </>\n);\n\nexport default function DirectionDemo() {\n  return (\n    <div\n      style={{\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        height: 320,\n        gap: 96,\n      }}>\n      <QuickActions direction=\"right\" label=\"Right actions\">\n        {actions}\n      </QuickActions>\n      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 140 }}>\n        <QuickActions direction=\"down\" label=\"Down actions\">\n          {actions}\n        </QuickActions>\n        <QuickActions direction=\"up\" label=\"Up actions\">\n          {actions}\n        </QuickActions>\n      </div>\n      <QuickActions direction=\"left\" label=\"Left actions\">\n        {actions}\n      </QuickActions>\n    </div>\n  );\n}\n"
       }
     ]
   },
diff --git a/packages/mcp/src/data/tokens.json b/packages/mcp/src/data/tokens.json
index 57ad8a825..eb0db4933 100644
--- a/packages/mcp/src/data/tokens.json
+++ b/packages/mcp/src/data/tokens.json
@@ -6,15 +6,15 @@
     },
     "color-bg": {
       "variable": "--ty-color-bg",
-      "value": "#fff"
+      "value": "#ffffff"
     },
     "color-bg-elevated": {
       "variable": "--ty-color-bg-elevated",
-      "value": "#fff"
+      "value": "#ffffff"
     },
     "color-bg-layout": {
       "variable": "--ty-color-bg-layout",
-      "value": "#fff"
+      "value": "#ffffff"
     },
     "color-bg-spotlight": {
       "variable": "--ty-color-bg-spotlight",
@@ -226,15 +226,15 @@
     },
     "color-picker.swatch-radius": {
       "variable": "--ty-color-picker-swatch-radius",
-      "value": "{border-radius}"
+      "value": "6px"
     },
     "color-picker.border": {
       "variable": "--ty-color-picker-border",
-      "value": "{color-border}"
+      "value": "#d9d9d9"
     },
     "color-picker.bg": {
       "variable": "--ty-color-picker-bg",
-      "value": "{color-bg-container}"
+      "value": "#ffffff"
     },
     "color-picker.panel-padding": {
       "variable": "--ty-color-picker-panel-padding",
@@ -246,7 +246,7 @@
     },
     "color-picker.panel-shadow": {
       "variable": "--ty-color-picker-panel-shadow",
-      "value": "{shadow-popup}"
+      "value": "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)"
     },
     "color-picker.panel-width": {
       "variable": "--ty-color-picker-panel-width",
@@ -334,11 +334,11 @@
     },
     "color-picker.button-color": {
       "variable": "--ty-color-picker-button-color",
-      "value": "{color-text}"
+      "value": "rgba(0, 0, 0, 0.85)"
     },
     "color-picker.button-border-hover": {
       "variable": "--ty-color-picker-button-border-hover",
-      "value": "{color-primary}"
+      "value": "#6e41bf"
     },
     "color-picker.input-padding": {
       "variable": "--ty-color-picker-input-padding",
@@ -350,15 +350,15 @@
     },
     "color-picker.input-color": {
       "variable": "--ty-color-picker-input-color",
-      "value": "{color-text}"
+      "value": "rgba(0, 0, 0, 0.85)"
     },
     "color-picker.input-font-family": {
       "variable": "--ty-color-picker-input-font-family",
-      "value": "{font-family-monospace}"
+      "value": "lucida console, consolas, monaco, andale mono, ubuntu mono, monospace"
     },
     "color-picker.input-border-focus": {
       "variable": "--ty-color-picker-input-border-focus",
-      "value": "{color-primary}"
+      "value": "#6e41bf"
     },
     "color-picker.presets-gap": {
       "variable": "--ty-color-picker-presets-gap",
@@ -525,4 +525,4 @@
       "value": "0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/calendar/demo/CardMode.tsx b/packages/react/src/calendar/demo/CardMode.tsx
index 7d9a7c10d..0aad2a5dc 100644
--- a/packages/react/src/calendar/demo/CardMode.tsx
+++ b/packages/react/src/calendar/demo/CardMode.tsx
@@ -6,7 +6,7 @@ export default function CardModeDemo() {
 
   return (
     <div>
-      <style>{`.weekend-cell.ty-calendar__cell_in-view { color: var(--ty-color-error, #e5484d); }`}</style>
+      <style>{`.weekend-cell.ty-calendar__cell_in-view { color: var(--ty-color-danger, #e5484d); }`}</style>
       <p style={{ marginBottom: 8, fontSize: 13, color: '#666' }}>
         Use arrow keys to navigate, Enter to select, Escape to reset focus.
       </p>
diff --git a/packages/react/src/card/style/_mixin.scss b/packages/react/src/card/style/_mixin.scss
index 35196325a..153b1f93c 100644
--- a/packages/react/src/card/style/_mixin.scss
+++ b/packages/react/src/card/style/_mixin.scss
@@ -1,4 +1,4 @@
-@mixin card_elevation() {
+@mixin card-elevation() {
   box-shadow: var(--ty-shadow-card);
-  border-color: var(--ty-card-shadow-border);
+  border-color: var(--ty-card-shadow-border, var(--ty-card-border, var(--ty-color-border-secondary)));
 }
diff --git a/packages/react/src/card/style/index.scss b/packages/react/src/card/style/index.scss
index 7e7131eec..824a6a5e9 100644
--- a/packages/react/src/card/style/index.scss
+++ b/packages/react/src/card/style/index.scss
@@ -29,12 +29,12 @@
     cursor: pointer;
 
     &:hover {
-      @include card_elevation;
+      @include card-elevation;
     }
   }
 
   &_active {
-    @include card_elevation;
+    @include card-elevation;
   }
 
   &__header {
diff --git a/packages/react/src/collapse/style/index.scss b/packages/react/src/collapse/style/index.scss
index 910b21a69..973c60200 100644
--- a/packages/react/src/collapse/style/index.scss
+++ b/packages/react/src/collapse/style/index.scss
@@ -30,9 +30,9 @@
   --ty-collapse-body-padding-block: 16px;
   --ty-collapse-font-size: 14px;
   --ty-collapse-line-height: 1.5;
-  --ty-collapse-focus-ring: var(--ty-control-outline, var(--ty-color-primary));
-  --ty-collapse-motion-duration: var(--ty-motion-duration-mid, 240ms);
-  --ty-collapse-motion-easing: var(--ty-motion-ease-standard, ease);
+  --ty-collapse-focus-ring: var(--ty-color-primary-border);
+  --ty-collapse-motion-duration: 240ms;
+  --ty-collapse-motion-easing: ease;
 
   box-sizing: border-box;
   border: 1px solid var(--ty-collapse-border-color);
diff --git a/packages/react/src/color-picker/demo/Oklch.tsx b/packages/react/src/color-picker/demo/Oklch.tsx
index 613d8d0b0..be21d55d2 100644
--- a/packages/react/src/color-picker/demo/Oklch.tsx
+++ b/packages/react/src/color-picker/demo/Oklch.tsx
@@ -21,7 +21,7 @@ export default function OklchDemo() {
         />
         <span>Value: {color}</span>
       </div>
-      <pre style={{ margin: 0, padding: 12, fontSize: 12, borderRadius: 8, background: 'var(--ty-color-fill-2, rgba(0,0,0,0.04))' }}>
+      <pre style={{ margin: 0, padding: 12, fontSize: 12, borderRadius: 8, background: 'var(--ty-color-fill-secondary, rgba(0,0,0,0.04))' }}>
         {JSON.stringify(meta, null, 2)}
       </pre>
     </div>
diff --git a/packages/react/src/descriptions/demo/Basic.tsx b/packages/react/src/descriptions/demo/Basic.tsx
index 85f80a8a0..60ef8519d 100644
--- a/packages/react/src/descriptions/demo/Basic.tsx
+++ b/packages/react/src/descriptions/demo/Basic.tsx
@@ -7,7 +7,7 @@ export default function BasicDemo() {
       title="Workspace Profile"
       extra={<Button size="sm" type="primary">Edit</Button>}
       columns={2}
-      footer={<span style={{ color: 'var(--ty-color-text-3)' }}>Last synced 2 minutes ago</span>}>
+      footer={<span style={{ color: 'var(--ty-color-text-tertiary)' }}>Last synced 2 minutes ago</span>}>
       <Descriptions.Item label="Name">Tiny Studio</Descriptions.Item>
       <Descriptions.Item label="Region">Australia Southeast</Descriptions.Item>
       <Descriptions.Item label="Owner" extra={<Tag size="sm">Core</Tag>}>
diff --git a/packages/react/src/descriptions/style/index.scss b/packages/react/src/descriptions/style/index.scss
index a472fb882..af4e94c50 100644
--- a/packages/react/src/descriptions/style/index.scss
+++ b/packages/react/src/descriptions/style/index.scss
@@ -48,7 +48,7 @@
 
   &__footer {
     padding-top: 4px;
-    border-top: 1px solid color-mix(in srgb, var(--ty-color-text-4) 18%, transparent);
+    border-top: 1px solid color-mix(in srgb, var(--ty-color-text-quaternary) 18%, transparent);
   }
 
   &__list-item {
@@ -58,7 +58,7 @@
     gap: 8px;
     margin: 0;
     padding-bottom: 12px;
-    border-bottom: 1px solid color-mix(in srgb, var(--ty-color-text-4) 16%, transparent);
+    border-bottom: 1px solid color-mix(in srgb, var(--ty-color-text-quaternary) 16%, transparent);
   }
 
   &__label-inner {
diff --git a/packages/react/src/image/style/index.scss b/packages/react/src/image/style/index.scss
index 14c23da3f..75bfc081f 100644
--- a/packages/react/src/image/style/index.scss
+++ b/packages/react/src/image/style/index.scss
@@ -37,8 +37,8 @@
   &__placeholder,
   &__fallback {
     align-items: center;
-    background: var(--ty-image-placeholder-bg, var(--ty-color-fill-1, #f5f5f5));
-    color: var(--ty-image-placeholder-color, var(--ty-color-text-3, #999));
+    background: var(--ty-image-placeholder-bg, var(--ty-color-fill-secondary, #f5f5f5));
+    color: var(--ty-image-placeholder-color, var(--ty-color-text-tertiary, #999));
     display: inline-flex;
     justify-content: center;
   }
diff --git a/packages/react/src/input/style/index.scss b/packages/react/src/input/style/index.scss
index 476838b40..0457516ad 100755
--- a/packages/react/src/input/style/index.scss
+++ b/packages/react/src/input/style/index.scss
@@ -8,7 +8,7 @@
   color: var(--ty-input-color, var(--ty-color-text));
   height: var(--ty-input-height-current, var(--ty-input-height-md, var(--ty-height-md)));
   padding-inline: var(--ty-input-padding-inline-current, var(--ty-input-padding-inline-md, #{$input-md-padding}));
-  gap: var(--ty-input-affix-gap, var(--ty-spacing-2));
+  gap: var(--ty-input-affix-gap, var(--ty-spacing-3));
   border: 1px solid var(--ty-input-border);
   border-radius: var(--ty-input-radius, var(--ty-border-radius));
   background-color: var(--ty-input-bg, var(--ty-color-bg-container));
diff --git a/packages/react/src/marquee/demo/basic.tsx b/packages/react/src/marquee/demo/basic.tsx
index f7cc16311..79c1ddc7c 100644
--- a/packages/react/src/marquee/demo/basic.tsx
+++ b/packages/react/src/marquee/demo/basic.tsx
@@ -5,7 +5,7 @@ const itemStyle: React.CSSProperties = {
   flexShrink: 0,
   padding: '12px 24px',
   borderRadius: 8,
-  background: 'var(--ty-color-bg-component)',
+  background: 'var(--ty-color-bg-container)',
   border: '1px solid var(--ty-color-border-secondary)',
   whiteSpace: 'nowrap',
 };
diff --git a/packages/react/src/marquee/demo/cards.tsx b/packages/react/src/marquee/demo/cards.tsx
index 6445b02dd..0d851edd1 100644
--- a/packages/react/src/marquee/demo/cards.tsx
+++ b/packages/react/src/marquee/demo/cards.tsx
@@ -6,7 +6,7 @@ const cardStyle: React.CSSProperties = {
   width: 200,
   padding: 16,
   borderRadius: 12,
-  background: 'var(--ty-color-bg-component)',
+  background: 'var(--ty-color-bg-container)',
   border: '1px solid var(--ty-color-border-secondary)',
 };
 
diff --git a/packages/react/src/marquee/demo/direction.tsx b/packages/react/src/marquee/demo/direction.tsx
index f458892dc..2150c807a 100644
--- a/packages/react/src/marquee/demo/direction.tsx
+++ b/packages/react/src/marquee/demo/direction.tsx
@@ -5,7 +5,7 @@ const itemStyle: React.CSSProperties = {
   flexShrink: 0,
   padding: '12px 24px',
   borderRadius: 8,
-  background: 'var(--ty-color-bg-component)',
+  background: 'var(--ty-color-bg-container)',
   border: '1px solid var(--ty-color-border-secondary)',
   whiteSpace: 'nowrap',
 };
diff --git a/packages/react/src/marquee/demo/speed.tsx b/packages/react/src/marquee/demo/speed.tsx
index 2ec53bafc..1b8501ca3 100644
--- a/packages/react/src/marquee/demo/speed.tsx
+++ b/packages/react/src/marquee/demo/speed.tsx
@@ -5,7 +5,7 @@ const itemStyle: React.CSSProperties = {
   flexShrink: 0,
   padding: '12px 24px',
   borderRadius: 8,
-  background: 'var(--ty-color-bg-component)',
+  background: 'var(--ty-color-bg-container)',
   border: '1px solid var(--ty-color-border-secondary)',
   whiteSpace: 'nowrap',
 };
diff --git a/packages/react/src/quick-actions/style/index.scss b/packages/react/src/quick-actions/style/index.scss
index a58f02aad..0bb0518e9 100644
--- a/packages/react/src/quick-actions/style/index.scss
+++ b/packages/react/src/quick-actions/style/index.scss
@@ -23,7 +23,7 @@
       var(--ty-quick-actions-bg);
     color: var(--ty-quick-actions-color);
     font-size: var(--ty-quick-actions-fab-font-size);
-    box-shadow: var(--ty-shadow);
+    box-shadow: var(--ty-shadow-card);
     cursor: pointer;
     transition:
       transform var(--ty-quick-actions-button-transition-duration) ease,
@@ -37,7 +37,7 @@
     }
 
     &:focus-visible {
-      box-shadow: var(--ty-quick-actions-focus-ring), var(--ty-shadow);
+      box-shadow: var(--ty-quick-actions-focus-ring), var(--ty-shadow-card);
     }
 
     &_open {
@@ -192,7 +192,7 @@
         --ty-quick-actions-action-bg-hover,
         color-mix(in srgb, var(--ty-color-primary) 8%, var(--ty-color-bg-container))
       );
-      box-shadow: var(--ty-shadow);
+      box-shadow: var(--ty-shadow-card);
       transform: translateY(-1px);
     }
 
diff --git a/packages/react/src/style/_constants.scss b/packages/react/src/style/_constants.scss
index 762e349f5..0ee2e7ffd 100644
--- a/packages/react/src/style/_constants.scss
+++ b/packages/react/src/style/_constants.scss
@@ -38,7 +38,7 @@ $input-md-padding: var(--ty-input-padding-inline-md, var(--ty-control-padding-in
 $input-lg-padding: var(--ty-input-padding-inline-lg, var(--ty-control-padding-inline-lg)) !default;
 
 // Menu
-$menu-item-padding-vertical: var(--ty-menu-item-padding-vertical) !default;
+$menu-item-padding-vertical: var(--ty-menu-item-padding-vertical, var(--ty-menu-item-padding-block)) !default;
 
 // Native Select
 $native-select-sm-padding: var(--ty-native-select-sm-padding) !default;
@@ -53,7 +53,7 @@ $notification-margin: var(--ty-notification-margin) !default;
 $popover-arrow-size: var(--ty-popover-arrow-size) !default;
 
 // Select
-$select-selected-font-weight: var(--ty-select-selected-font-weight) !default;
+$select-selected-font-weight: var(--ty-select-selected-font-weight, 500) !default;
 $select-dropdown-max-height: var(--ty-select-dropdown-max-height) !default;
 $select-dropdown-shadow: var(--ty-select-dropdown-shadow) !default;
 
@@ -68,9 +68,9 @@ $steps-title-font-size: var(--ty-steps-title-font-size) !default;
 $strength-indicator-border-radius: var(--ty-strength-indicator-border-radius) !default;
 
 // Switch
-$switch-md-font-size: var(--ty-switch-md-font-size) !default;
-$switch-sm-font-size: var(--ty-switch-sm-font-size) !default;
-$switch-lg-font-size: var(--ty-switch-lg-font-size) !default;
+$switch-md-font-size: var(--ty-switch-md-font-size, var(--ty-switch-font-size-md)) !default;
+$switch-sm-font-size: var(--ty-switch-sm-font-size, var(--ty-switch-font-size-sm)) !default;
+$switch-lg-font-size: var(--ty-switch-lg-font-size, var(--ty-switch-font-size-lg)) !default;
 
 // Textarea
 $textarea-padding: var(--ty-textarea-padding) !default;
diff --git a/packages/tokens/REGISTRY_SPEC.md b/packages/tokens/REGISTRY_SPEC.md
index ddce407fa..26675a6e5 100644
--- a/packages/tokens/REGISTRY_SPEC.md
+++ b/packages/tokens/REGISTRY_SPEC.md
@@ -41,6 +41,7 @@ The build step should generate:
   "description": "Primary button background color.",
   "source": "source/components/button.json",
   "defaultValue": "{color-primary}",
+  "resolvedValue": "#6e41bf",
   "fallback": "--ty-color-primary",
   "status": "active"
 }
@@ -76,6 +77,8 @@ The build step should generate:
   Relative path to the token source file.
 - `defaultValue`
   Unresolved default value from the source token document.
+- `resolvedValue`
+  Fully resolved default value after token references are expanded. This exists for downstream consumers that need actionable values instead of token-reference syntax.
 - `fallback`
   Recommended component style fallback target. This field is guidance metadata for component authors and docs tooling; it does not mean the build step will emit an automatic fallback chain in generated CSS.
 - `status`
@@ -122,6 +125,7 @@ Examples:
     "description": "Primary brand color.",
     "source": "source/semantic/colors.json",
     "defaultValue": "{color.brand.500}",
+    "resolvedValue": "#6e41bf",
     "status": "active"
   },
   {
@@ -134,6 +138,7 @@ Examples:
     "description": "Button border radius.",
     "source": "source/components/button.json",
     "defaultValue": "{border-radius}",
+    "resolvedValue": "0.3rem",
     "fallback": "--ty-border-radius",
     "status": "active"
   }
diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index 77208ba42..ee20aecbe 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -31,6 +31,11 @@
       "import": "./runtime/resolve-theme.mjs",
       "require": "./runtime/resolve-theme.cjs"
     },
+    "./compile-brand-theme": {
+      "types": "./runtime/compile-brand-theme.d.ts",
+      "import": "./runtime/compile-brand-theme.mjs",
+      "require": "./runtime/compile-brand-theme.cjs"
+    },
     "./validate-theme": {
       "types": "./runtime/validate-theme.d.ts",
       "import": "./runtime/validate-theme.mjs",
@@ -50,6 +55,7 @@
     "build": "node scripts/build.js",
     "build:base-css": "node -e \"require('./scripts/build').buildBaseCss()\"",
     "build:runtime": "node scripts/build-runtime.js",
+    "test": "node scripts/build-runtime.js --validate-only",
     "clean": "rimraf css dist"
   },
   "devDependencies": {
diff --git a/packages/tokens/runtime/compile-brand-theme.cjs b/packages/tokens/runtime/compile-brand-theme.cjs
new file mode 100644
index 000000000..fc608eb6e
--- /dev/null
+++ b/packages/tokens/runtime/compile-brand-theme.cjs
@@ -0,0 +1,499 @@
+'use strict';
+
+// Generated by scripts/build-runtime.js from source/runtime/compile-brand-theme.source.js.
+// Do not edit this file directly.
+
+const DEFAULT_BRAND_SEED_FIELDS = Object.freeze({
+  primary: '#6e41bf',
+  primaryForeground: '#ffffff',
+  secondary: '#f5f5f7',
+  secondaryForeground: '#16181d',
+  accent: '#f3eefa',
+  accentForeground: '#6e41bf',
+  success: '#52c41a',
+  successForeground: '#ffffff',
+  info: '#1890ff',
+  infoForeground: '#ffffff',
+  warning: '#fa8c16',
+  warningForeground: '#ffffff',
+  danger: '#dc2626',
+  dangerForeground: '#ffffff',
+  base: '#ffffff',
+  baseForeground: 'rgba(0, 0, 0, 0.85)',
+  card: '#ffffff',
+  cardForeground: '#111827',
+  popover: '#ffffff',
+  popoverForeground: '#111827',
+  muted: '#f5f5f5',
+  mutedForeground: 'rgba(0, 0, 0, 0.55)',
+  border: '#d9d9d9',
+  input: '#d9d9d9',
+  ring: '#6e41bf',
+  chart1: '#6e41bf',
+  chart2: '#1890ff',
+  chart3: '#52c41a',
+  chart4: '#fa8c16',
+  chart5: '#eb2f96',
+  sidebar: '#12131a',
+  sidebarForeground: '#f8fafc',
+  sidebarPrimary: '#6e41bf',
+  sidebarPrimaryForeground: '#ffffff',
+  sidebarAccent: '#23173f',
+  sidebarAccentForeground: '#efe8ff',
+  sidebarBorder: '#2a2d36',
+  sidebarRing: '#8b62d0',
+  fontSans: '"Instrument Sans", "Inter", system-ui, sans-serif',
+  fontMono: '"JetBrains Mono", "SFMono-Regular", monospace',
+  fontSizeBase: '14px',
+  lineHeightBase: '1.5',
+  h1Size: '40px',
+  h2Size: '32px',
+  letterSpacing: '-0.02em',
+  radius: '0.3rem',
+  shadowControl: 'none',
+  shadowCard: '0 20px 55px rgba(17, 24, 39, 0.08)',
+  shadowFocus: '0 0 0 3px rgba(110, 65, 191, 0.22)',
+  buttonRadius: '0.3rem',
+  inputRadius: '0.3rem',
+  cardRadius: '0.3rem',
+  fieldPaddingSm: '8px',
+  fieldPaddingMd: '8px',
+  fieldPaddingLg: '8px',
+  buttonPaddingSm: '8px',
+  buttonPaddingMd: '15px',
+  buttonPaddingLg: '20px',
+  fieldHeightSm: '24px',
+  fieldHeightMd: '35px',
+  fieldHeightLg: '44px',
+  buttonHeightSm: '24px',
+  buttonHeightMd: '35px',
+  buttonHeightLg: '44px',
+  cardPadding: '18px',
+});
+
+function normalizeAlpha(value) {
+  if (!Number.isFinite(value)) return 1;
+  return Math.min(1, Math.max(0, value));
+}
+
+function parseHexColor(color) {
+  const normalized = String(color).trim().replace('#', '');
+  const value =
+    normalized.length === 3
+      ? normalized
+          .split('')
+          .map((char) => `${char}${char}`)
+          .join('')
+      : normalized;
+
+  if (!/^[0-9a-f]{6}$/i.test(value)) return null;
+
+  return [
+    Number.parseInt(value.slice(0, 2), 16),
+    Number.parseInt(value.slice(2, 4), 16),
+    Number.parseInt(value.slice(4, 6), 16),
+  ];
+}
+
+function toRgba(color, alpha) {
+  const safeAlpha = normalizeAlpha(alpha);
+  const hex = parseHexColor(color);
+
+  if (hex) {
+    const [red, green, blue] = hex;
+    return `rgba(${red}, ${green}, ${blue}, ${safeAlpha})`;
+  }
+
+  const rgbMatch = String(color)
+    .trim()
+    .match(/^rgba?\(([^)]+)\)$/i);
+  if (rgbMatch) {
+    const parts = rgbMatch[1].split(',').map((part) => part.trim());
+    if (parts.length >= 3) {
+      return `rgba(${parts[0]}, ${parts[1]}, ${parts[2]}, ${safeAlpha})`;
+    }
+  }
+
+  return `color-mix(in srgb, ${color} ${Math.round(safeAlpha * 100)}%, transparent)`;
+}
+
+function mixColor(color, target, ratio) {
+  const safeRatio = Math.min(1, Math.max(0, ratio));
+  return `color-mix(in srgb, ${color} ${Math.round((1 - safeRatio) * 100)}%, ${target} ${Math.round(safeRatio * 100)}%)`;
+}
+
+function tintColor(color, amount) {
+  return mixColor(color, '#ffffff', amount);
+}
+
+function shadeColor(color, amount) {
+  return mixColor(color, '#000000', amount);
+}
+
+function softenSurface(color, mode, amount) {
+  return mode === 'dark' ? tintColor(color, amount) : shadeColor(color, amount);
+}
+
+function combineShadowValues() {
+  return (
+    Array.from(arguments)
+      .map((value) => value && String(value).trim())
+      .filter((value) => value && value !== 'none')
+      .join(', ') || 'none'
+  );
+}
+
+function buildMeta(presetId, meta) {
+  const sourceMeta = meta || {};
+  const nextMeta = {
+    ...(sourceMeta.id ? { id: sourceMeta.id } : presetId ? { id: `theme-editor-${presetId}` } : {}),
+    ...(sourceMeta.name ? { name: sourceMeta.name } : {}),
+    ...(sourceMeta.author ? { author: sourceMeta.author } : {}),
+    ...(sourceMeta.description ? { description: sourceMeta.description } : {}),
+    ...(sourceMeta.version ? { version: sourceMeta.version } : {}),
+    schemaVersion: sourceMeta.schemaVersion || 1,
+    ...(Array.isArray(sourceMeta.tags) ? { tags: [...sourceMeta.tags] } : {}),
+  };
+
+  return nextMeta;
+}
+
+function compileBrandTheme(seed, options) {
+  const fields = { ...DEFAULT_BRAND_SEED_FIELDS, ...(seed || {}) };
+  const opts = options || {};
+  const mode = opts.mode === 'dark' ? 'dark' : 'light';
+  const primaryHover = tintColor(fields.primary, mode === 'dark' ? 0.12 : 0.08);
+  const primaryActive = tintColor(fields.primary, mode === 'dark' ? 0.2 : 0.16);
+  const primarySurface = toRgba(fields.primary, mode === 'dark' ? 0.16 : 0.08);
+  const primarySurfaceActive = toRgba(fields.primary, mode === 'dark' ? 0.28 : 0.18);
+  const defaultHover = softenSurface(fields.muted, mode, mode === 'dark' ? 0.1 : 0.06);
+  const defaultActive = softenSurface(fields.muted, mode, mode === 'dark' ? 0.18 : 0.12);
+  const defaultBorderHover = softenSurface(fields.border, mode, mode === 'dark' ? 0.16 : 0.12);
+  const defaultBorderActive = softenSurface(fields.border, mode, mode === 'dark' ? 0.24 : 0.18);
+  const infoHover = tintColor(fields.info, mode === 'dark' ? 0.12 : 0.08);
+  const infoActive = tintColor(fields.info, mode === 'dark' ? 0.2 : 0.16);
+  const successHover = tintColor(fields.success, mode === 'dark' ? 0.12 : 0.08);
+  const successActive = tintColor(fields.success, mode === 'dark' ? 0.2 : 0.16);
+  const warningHover = tintColor(fields.warning, mode === 'dark' ? 0.12 : 0.08);
+  const warningActive = tintColor(fields.warning, mode === 'dark' ? 0.2 : 0.16);
+  const dangerHover = tintColor(fields.danger, mode === 'dark' ? 0.12 : 0.08);
+  const dangerActive = tintColor(fields.danger, mode === 'dark' ? 0.2 : 0.16);
+  const controlFocusShadow = combineShadowValues(fields.shadowControl, fields.shadowFocus);
+
+  return {
+    meta: buildMeta(opts.presetId, opts.meta),
+    mode,
+    extends: typeof opts.extends === 'string' ? opts.extends : mode === 'dark' ? 'tiny-dark' : 'tiny-light',
+    tokens: {
+      semantic: {
+        'color-primary': fields.primary,
+        'color-primary-hover': primaryHover,
+        'color-primary-active': primaryActive,
+        'color-primary-bg': primarySurface,
+        'color-primary-bg-hover': primarySurfaceActive,
+        'color-primary-border': fields.primary,
+        'color-primary-text-hover': fields.primary,
+        'color-success': fields.success,
+        'color-success-hover': successHover,
+        'color-success-active': successActive,
+        'color-success-bg': toRgba(fields.success, mode === 'dark' ? 0.18 : 0.12),
+        'color-success-border': toRgba(fields.success, mode === 'dark' ? 0.4 : 0.24),
+        'color-info': fields.info,
+        'color-info-hover': infoHover,
+        'color-info-active': infoActive,
+        'color-info-bg': toRgba(fields.info, mode === 'dark' ? 0.18 : 0.12),
+        'color-info-border': toRgba(fields.info, mode === 'dark' ? 0.4 : 0.24),
+        'color-warning': fields.warning,
+        'color-warning-hover': warningHover,
+        'color-warning-active': warningActive,
+        'color-warning-bg': toRgba(fields.warning, mode === 'dark' ? 0.18 : 0.12),
+        'color-warning-border': toRgba(fields.warning, mode === 'dark' ? 0.4 : 0.24),
+        'color-danger-bg': toRgba(fields.danger, mode === 'dark' ? 0.18 : 0.12),
+        'color-danger-border': toRgba(fields.danger, mode === 'dark' ? 0.4 : 0.24),
+        'color-bg': fields.base,
+        'color-bg-container': fields.card,
+        'color-bg-elevated': fields.popover,
+        'color-bg-layout': fields.base,
+        'color-bg-spotlight': fields.muted,
+        'color-fill': fields.muted,
+        'color-fill-secondary': fields.accent,
+        'color-fill-tertiary': fields.border,
+        'color-bg-disabled': fields.muted,
+        'color-text': fields.baseForeground,
+        'color-text-heading': fields.cardForeground,
+        'color-text-secondary': toRgba(fields.baseForeground, mode === 'dark' ? 0.72 : 0.68),
+        'color-text-tertiary': toRgba(fields.baseForeground, mode === 'dark' ? 0.5 : 0.46),
+        'color-text-quaternary': toRgba(fields.baseForeground, mode === 'dark' ? 0.36 : 0.32),
+        'color-border': fields.border,
+        'color-border-secondary': fields.border,
+        'color-border-light': fields.border,
+        'color-border-btn-default': fields.border,
+        'color-danger': fields.danger,
+        'color-danger-hover': dangerHover,
+        'color-danger-active': dangerActive,
+        'chart-1': fields.chart1,
+        'chart-2': fields.chart2,
+        'chart-3': fields.chart3,
+        'chart-4': fields.chart4,
+        'chart-5': fields.chart5,
+        'font-family': fields.fontSans,
+        'font-family-monospace': fields.fontMono,
+        'font-size-base': fields.fontSizeBase,
+        'line-height-base': fields.lineHeightBase,
+        'h1-font-size': fields.h1Size,
+        'h2-font-size': fields.h2Size,
+        'border-radius': fields.radius,
+        'shadow-control': fields.shadowControl,
+        'shadow-card': fields.shadowCard,
+        'shadow-focus': fields.shadowFocus,
+        'control.height.sm': fields.fieldHeightSm,
+        'control.height.md': fields.fieldHeightMd,
+        'control.height.lg': fields.fieldHeightLg,
+        'control.padding-inline.sm': fields.fieldPaddingSm,
+        'control.padding-inline.md': fields.fieldPaddingMd,
+        'control.padding-inline.lg': fields.fieldPaddingLg,
+      },
+      components: {
+        'button.solid.primary.bg': fields.primary,
+        'button.solid.primary.bg-hover': primaryHover,
+        'button.solid.primary.bg-active': primaryActive,
+        'button.solid.primary.border': fields.primary,
+        'button.solid.primary.border-hover': primaryHover,
+        'button.solid.primary.border-active': primaryActive,
+        'button.solid.primary.text': fields.primaryForeground,
+        'button.solid.primary.text-hover': fields.primaryForeground,
+        'button.solid.primary.text-active': fields.primaryForeground,
+        'button.solid.default.bg': fields.muted,
+        'button.solid.default.bg-hover': defaultHover,
+        'button.solid.default.bg-active': defaultActive,
+        'button.solid.default.border': fields.border,
+        'button.solid.default.border-hover': defaultBorderHover,
+        'button.solid.default.border-active': defaultBorderActive,
+        'button.solid.default.text': fields.baseForeground,
+        'button.solid.default.text-hover': fields.baseForeground,
+        'button.solid.default.text-active': fields.baseForeground,
+        'button.outline.default.bg': fields.base,
+        'button.outline.default.bg-hover': defaultHover,
+        'button.outline.default.bg-active': defaultActive,
+        'button.outline.default.border': fields.border,
+        'button.outline.default.border-hover': defaultBorderHover,
+        'button.outline.default.border-active': defaultBorderActive,
+        'button.outline.default.text': fields.baseForeground,
+        'button.outline.default.text-hover': fields.baseForeground,
+        'button.outline.default.text-active': fields.baseForeground,
+        'button.solid.default.shadow': fields.shadowControl,
+        'button.solid.default.shadow-hover': fields.shadowControl,
+        'button.solid.default.shadow-active': fields.shadowControl,
+        'button.outline.default.shadow': fields.shadowControl,
+        'button.outline.default.shadow-hover': fields.shadowControl,
+        'button.outline.default.shadow-active': fields.shadowControl,
+        'button.radius': fields.buttonRadius,
+        'button.height.sm': fields.buttonHeightSm,
+        'button.height.md': fields.buttonHeightMd,
+        'button.height.lg': fields.buttonHeightLg,
+        'button.padding-inline-sm': fields.buttonPaddingSm,
+        'button.padding-inline-md': fields.buttonPaddingMd,
+        'button.padding-inline-lg': fields.buttonPaddingLg,
+        'card.bg': fields.card,
+        'card.bg.filled': fields.secondary,
+        'card.border': fields.border,
+        'card.radius': fields.cardRadius,
+        'card.shadow': fields.shadowCard,
+        'card.shadow.hover': fields.shadowCard,
+        'card.header-color': fields.cardForeground,
+        'card.body-padding': fields.cardPadding,
+        'card.header-padding': fields.cardPadding,
+        'input.bg': fields.base,
+        'input.color': fields.baseForeground,
+        'input.border': fields.input,
+        'input.shadow': fields.shadowControl,
+        'input.border.hover': fields.ring,
+        'input.border.focus': fields.ring,
+        'input.shadow.focus': controlFocusShadow,
+        'input.radius': fields.inputRadius,
+        'input.height.sm': fields.fieldHeightSm,
+        'input.height.md': fields.fieldHeightMd,
+        'input.height.lg': fields.fieldHeightLg,
+        'input.padding-inline-sm': fields.fieldPaddingSm,
+        'input.padding-inline-md': fields.fieldPaddingMd,
+        'input.padding-inline-lg': fields.fieldPaddingLg,
+        'select.bg': fields.base,
+        'select.color': fields.baseForeground,
+        'select.border': fields.input,
+        'select.shadow': fields.shadowControl,
+        'select.border.hover': fields.ring,
+        'select.border.focus': fields.ring,
+        'select.shadow.focus': controlFocusShadow,
+        'select.radius': fields.inputRadius,
+        'select.height.sm': fields.fieldHeightSm,
+        'select.height.md': fields.fieldHeightMd,
+        'select.height.lg': fields.fieldHeightLg,
+        'select.padding-inline-start.sm': fields.fieldPaddingSm,
+        'select.padding-inline-start.md': fields.fieldPaddingMd,
+        'select.padding-inline-start.lg': fields.fieldPaddingLg,
+        'select.dropdown-bg': fields.popover,
+        'select.option.active-bg': fields.muted,
+        'select.option.selected-bg': fields.accent,
+        'table.radius': fields.radius,
+        'picker.input-bg': fields.base,
+        'picker.input-border': fields.input,
+        'picker.input-border-hover': fields.ring,
+        'picker.input-border-focus': fields.ring,
+        'picker.input-shadow-focus': controlFocusShadow,
+        'picker.input-color': fields.baseForeground,
+        'picker.input-color-placeholder': fields.mutedForeground,
+        'picker.input-color-muted': fields.mutedForeground,
+        'picker.input-radius': fields.inputRadius,
+        'picker.input-padding.sm': `0 ${fields.fieldPaddingSm}`,
+        'picker.input-padding.md': `0 ${fields.fieldPaddingMd}`,
+        'picker.input-padding.lg': `0 ${fields.fieldPaddingLg}`,
+        'picker.dropdown-bg': fields.popover,
+        'picker.dropdown-radius': fields.cardRadius,
+        'date-picker.header-border': fields.border,
+        'date-picker.header-button-color': fields.mutedForeground,
+        'date-picker.header-button-color-hover': fields.primary,
+        'date-picker.header-action-hover-bg': fields.muted,
+        'date-picker.header-action-focus-ring': fields.ring,
+        'date-picker.today-color': fields.primary,
+        'date-picker.today-color-hover': fields.primary,
+        'date-picker.today-hover-bg': fields.accent,
+        'date-picker.today-active-bg': fields.muted,
+        'date-picker.today-focus-ring': fields.ring,
+        'picker.cell-hover-bg': fields.muted,
+        'date-picker.cell-selected-bg': fields.primary,
+        'date-picker.cell-selected-color': fields.primaryForeground,
+        'date-picker.cell-selected-hover-bg': fields.primary,
+        'date-picker.cell-today-border': fields.primary,
+        'date-picker.cell-radius': fields.inputRadius,
+        'date-picker.panel-item-hover-bg': fields.muted,
+        'date-picker.panel-item-current-color': fields.primary,
+        'date-picker.panel-item-current-border': fields.primary,
+        'date-picker.panel-item-selected-bg': fields.accent,
+        'date-picker.panel-item-selected-color': fields.primary,
+        'date-picker.panel-item-selected-hover-bg': fields.muted,
+        'date-picker.range-bg': fields.accent,
+        'time-picker.column-border': fields.border,
+        'time-picker.cell-bg-selected': fields.primary,
+        'time-picker.cell-bg-selected-hover': fields.primary,
+        'time-picker.ok-button-bg': fields.primary,
+        'time-picker.ok-button-bg-hover': fields.primary,
+        'time-picker.ok-button-color': fields.primaryForeground,
+        'time-picker.ok-button-radius': fields.buttonRadius,
+        'calendar.bg': fields.card,
+        'calendar.border': fields.border,
+        'calendar.radius': fields.cardRadius,
+        'calendar.cell-hover-bg': fields.muted,
+        'calendar.header-action-color': fields.mutedForeground,
+        'calendar.header-action-color-hover': fields.primary,
+        'calendar.header-action-hover-bg': fields.muted,
+        'calendar.header-action-focus-ring': fields.ring,
+        'calendar.header-label-color': fields.cardForeground,
+        'calendar.header-label-color-hover': fields.primary,
+        'calendar.header-label-hover-bg': fields.muted,
+        'calendar.header-label-focus-ring': fields.ring,
+        'calendar.cell-header-color': fields.mutedForeground,
+        'calendar.week-number-color': fields.mutedForeground,
+        'calendar.cell-color': fields.cardForeground,
+        'calendar.cell-color-muted': fields.mutedForeground,
+        'calendar.cell-disabled-bg': fields.muted,
+        'calendar.cell-today-border': fields.primary,
+        'calendar.cell-selected-bg': fields.primary,
+        'calendar.cell-selected-color': fields.primaryForeground,
+        'calendar.range-bg': fields.accent,
+        'calendar.cell-focus-outline': fields.shadowFocus,
+        'calendar.cell-dot-color': fields.primary,
+        'calendar.panel-item-radius': fields.inputRadius,
+        'calendar.panel-item-hover-bg': fields.muted,
+        'calendar.panel-item-selected-color': fields.primaryForeground,
+        'calendar.panel-item-selected-bg': fields.primary,
+        'calendar.panel-item-selected-hover-bg': fields.primary,
+        'calendar.today-color': fields.primary,
+        'calendar.today-color-hover': fields.primary,
+        'calendar.today-hover-bg': fields.accent,
+        'calendar.today-active-bg': fields.muted,
+        'calendar.today-focus-ring': fields.ring,
+        'cascader.height.sm': fields.fieldHeightSm,
+        'cascader.height.md': fields.fieldHeightMd,
+        'cascader.height.lg': fields.fieldHeightLg,
+        'cascader.bg': fields.base,
+        'cascader.border': fields.input,
+        'cascader.border-hover': fields.ring,
+        'cascader.border-focus': fields.ring,
+        'cascader.shadow-focus': controlFocusShadow,
+        'cascader.radius': fields.inputRadius,
+        'cascader.padding.sm': `0 calc(${fields.fieldPaddingSm} + 20px) 0 ${fields.fieldPaddingSm}`,
+        'cascader.padding.md': `0 calc(${fields.fieldPaddingMd} + 20px) 0 ${fields.fieldPaddingMd}`,
+        'cascader.padding.lg': `0 calc(${fields.fieldPaddingLg} + 20px) 0 ${fields.fieldPaddingLg}`,
+        'native-select.bg': fields.base,
+        'native-select.border': fields.input,
+        'native-select.border-hover': fields.ring,
+        'native-select.border-focus': fields.ring,
+        'native-select.shadow-focus': controlFocusShadow,
+        'native-select.radius': fields.inputRadius,
+        'checkbox.bg': fields.base,
+        'checkbox.border': fields.input,
+        'checkbox.shadow': fields.shadowControl,
+        'checkbox.border.hover': fields.ring,
+        'checkbox.radius': fields.radius,
+        'checkbox.bg.checked': fields.primary,
+        'checkbox.border.checked': fields.primary,
+        'checkbox.indicator-color': fields.primaryForeground,
+        'radio.bg': fields.base,
+        'radio.border': fields.input,
+        'radio.shadow': fields.shadowControl,
+        'radio.border.checked': fields.primary,
+        'radio.dot-bg': fields.primary,
+        'switch.bg': fields.mutedForeground,
+        'switch.bg.checked': fields.primary,
+        'switch.thumb-border': fields.mutedForeground,
+        'switch.thumb-border.checked': fields.primary,
+        'input-number.height.sm': fields.fieldHeightSm,
+        'input-number.height.md': fields.fieldHeightMd,
+        'input-number.height.lg': fields.fieldHeightLg,
+        'segmented.bg': fields.muted,
+        'segmented.item-bg-hover': fields.secondary,
+        'segmented.item-bg-selected': fields.card,
+        'segmented.item-color': fields.mutedForeground,
+        'segmented.item-color-selected': fields.baseForeground,
+        'segmented.item-shadow-focus': fields.shadowFocus,
+        'segmented.radius': fields.radius,
+        'tag.bg': fields.secondary,
+        'tag.color': fields.secondaryForeground,
+        'tag.border': fields.border,
+        'tag.link-color': fields.mutedForeground,
+        'tag.checkable-bg': fields.card,
+        'tag.checkable-color': fields.primary,
+        'tag.checkable-border': fields.border,
+        'tag.checkable-bg.checked': fields.primary,
+        'tag.checkable-color.checked': fields.primaryForeground,
+        'tag.checkable-border.checked': fields.primary,
+        'progress.stroke-color.primary': fields.primary,
+        'progress.stroke-color.success': fields.success,
+        'progress.stroke-color.info': fields.info,
+        'progress.stroke-color.warning': fields.warning,
+        'progress.stroke-color.danger': fields.danger,
+        'progress.text-color': fields.baseForeground,
+        'progress.trail-bg': fields.muted,
+        'progress.circle-trail': fields.muted,
+        'table.color': fields.baseForeground,
+        'table.border': fields.border,
+        'table.header-bg': fields.secondary,
+        'table.row-hover-bg': fields.muted,
+        'table.cell-sortable-hover-bg': fields.muted,
+        'table.row-selected-bg': toRgba(fields.primary, mode === 'dark' ? 0.22 : 0.08),
+        'table.sorter-icon-color': fields.mutedForeground,
+        'table.sorter-icon-color.active': fields.primary,
+        'table.empty-color': fields.mutedForeground,
+        'layout.sidebar-bg': fields.sidebar,
+        'layout.sidebar-color': fields.sidebarForeground,
+        'layout.sidebar-light-bg': fields.sidebar,
+        'layout.sidebar-light-color': fields.sidebarForeground,
+      },
+    },
+  };
+}
+
+module.exports = {
+  DEFAULT_BRAND_SEED_FIELDS,
+  compileBrandTheme,
+};
diff --git a/packages/tokens/runtime/compile-brand-theme.d.ts b/packages/tokens/runtime/compile-brand-theme.d.ts
new file mode 100644
index 000000000..706aaca98
--- /dev/null
+++ b/packages/tokens/runtime/compile-brand-theme.d.ts
@@ -0,0 +1,85 @@
+import type { ThemeDocument, ThemeDocumentMeta } from './resolve-theme';
+
+export type BrandThemeMode = 'light' | 'dark';
+
+export interface BrandSeedFields {
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  accent: string;
+  accentForeground: string;
+  success: string;
+  successForeground: string;
+  info: string;
+  infoForeground: string;
+  warning: string;
+  warningForeground: string;
+  danger: string;
+  dangerForeground: string;
+  base: string;
+  baseForeground: string;
+  card: string;
+  cardForeground: string;
+  popover: string;
+  popoverForeground: string;
+  muted: string;
+  mutedForeground: string;
+  border: string;
+  input: string;
+  ring: string;
+  chart1: string;
+  chart2: string;
+  chart3: string;
+  chart4: string;
+  chart5: string;
+  sidebar: string;
+  sidebarForeground: string;
+  sidebarPrimary: string;
+  sidebarPrimaryForeground: string;
+  sidebarAccent: string;
+  sidebarAccentForeground: string;
+  sidebarBorder: string;
+  sidebarRing: string;
+  fontSans: string;
+  fontMono: string;
+  fontSizeBase: string;
+  lineHeightBase: string;
+  h1Size: string;
+  h2Size: string;
+  letterSpacing: string;
+  radius: string;
+  shadowControl: string;
+  shadowCard: string;
+  shadowFocus: string;
+  buttonRadius: string;
+  inputRadius: string;
+  cardRadius: string;
+  fieldPaddingSm: string;
+  fieldPaddingMd: string;
+  fieldPaddingLg: string;
+  buttonPaddingSm: string;
+  buttonPaddingMd: string;
+  buttonPaddingLg: string;
+  fieldHeightSm: string;
+  fieldHeightMd: string;
+  fieldHeightLg: string;
+  buttonHeightSm: string;
+  buttonHeightMd: string;
+  buttonHeightLg: string;
+  cardPadding: string;
+}
+
+export interface CompileBrandThemeOptions {
+  mode: BrandThemeMode;
+  presetId?: string;
+  extends?: string;
+  meta?: ThemeDocumentMeta;
+}
+
+export const DEFAULT_BRAND_SEED_FIELDS: BrandSeedFields;
+
+export function compileBrandTheme(
+  fields: Partial<BrandSeedFields>,
+  options: CompileBrandThemeOptions
+): ThemeDocument;
diff --git a/packages/tokens/runtime/compile-brand-theme.mjs b/packages/tokens/runtime/compile-brand-theme.mjs
new file mode 100644
index 000000000..b4d426f80
--- /dev/null
+++ b/packages/tokens/runtime/compile-brand-theme.mjs
@@ -0,0 +1,494 @@
+// Generated by scripts/build-runtime.js from source/runtime/compile-brand-theme.source.js.
+// Do not edit this file directly.
+
+const DEFAULT_BRAND_SEED_FIELDS = Object.freeze({
+  primary: '#6e41bf',
+  primaryForeground: '#ffffff',
+  secondary: '#f5f5f7',
+  secondaryForeground: '#16181d',
+  accent: '#f3eefa',
+  accentForeground: '#6e41bf',
+  success: '#52c41a',
+  successForeground: '#ffffff',
+  info: '#1890ff',
+  infoForeground: '#ffffff',
+  warning: '#fa8c16',
+  warningForeground: '#ffffff',
+  danger: '#dc2626',
+  dangerForeground: '#ffffff',
+  base: '#ffffff',
+  baseForeground: 'rgba(0, 0, 0, 0.85)',
+  card: '#ffffff',
+  cardForeground: '#111827',
+  popover: '#ffffff',
+  popoverForeground: '#111827',
+  muted: '#f5f5f5',
+  mutedForeground: 'rgba(0, 0, 0, 0.55)',
+  border: '#d9d9d9',
+  input: '#d9d9d9',
+  ring: '#6e41bf',
+  chart1: '#6e41bf',
+  chart2: '#1890ff',
+  chart3: '#52c41a',
+  chart4: '#fa8c16',
+  chart5: '#eb2f96',
+  sidebar: '#12131a',
+  sidebarForeground: '#f8fafc',
+  sidebarPrimary: '#6e41bf',
+  sidebarPrimaryForeground: '#ffffff',
+  sidebarAccent: '#23173f',
+  sidebarAccentForeground: '#efe8ff',
+  sidebarBorder: '#2a2d36',
+  sidebarRing: '#8b62d0',
+  fontSans: '"Instrument Sans", "Inter", system-ui, sans-serif',
+  fontMono: '"JetBrains Mono", "SFMono-Regular", monospace',
+  fontSizeBase: '14px',
+  lineHeightBase: '1.5',
+  h1Size: '40px',
+  h2Size: '32px',
+  letterSpacing: '-0.02em',
+  radius: '0.3rem',
+  shadowControl: 'none',
+  shadowCard: '0 20px 55px rgba(17, 24, 39, 0.08)',
+  shadowFocus: '0 0 0 3px rgba(110, 65, 191, 0.22)',
+  buttonRadius: '0.3rem',
+  inputRadius: '0.3rem',
+  cardRadius: '0.3rem',
+  fieldPaddingSm: '8px',
+  fieldPaddingMd: '8px',
+  fieldPaddingLg: '8px',
+  buttonPaddingSm: '8px',
+  buttonPaddingMd: '15px',
+  buttonPaddingLg: '20px',
+  fieldHeightSm: '24px',
+  fieldHeightMd: '35px',
+  fieldHeightLg: '44px',
+  buttonHeightSm: '24px',
+  buttonHeightMd: '35px',
+  buttonHeightLg: '44px',
+  cardPadding: '18px',
+});
+
+function normalizeAlpha(value) {
+  if (!Number.isFinite(value)) return 1;
+  return Math.min(1, Math.max(0, value));
+}
+
+function parseHexColor(color) {
+  const normalized = String(color).trim().replace('#', '');
+  const value =
+    normalized.length === 3
+      ? normalized
+          .split('')
+          .map((char) => `${char}${char}`)
+          .join('')
+      : normalized;
+
+  if (!/^[0-9a-f]{6}$/i.test(value)) return null;
+
+  return [
+    Number.parseInt(value.slice(0, 2), 16),
+    Number.parseInt(value.slice(2, 4), 16),
+    Number.parseInt(value.slice(4, 6), 16),
+  ];
+}
+
+function toRgba(color, alpha) {
+  const safeAlpha = normalizeAlpha(alpha);
+  const hex = parseHexColor(color);
+
+  if (hex) {
+    const [red, green, blue] = hex;
+    return `rgba(${red}, ${green}, ${blue}, ${safeAlpha})`;
+  }
+
+  const rgbMatch = String(color)
+    .trim()
+    .match(/^rgba?\(([^)]+)\)$/i);
+  if (rgbMatch) {
+    const parts = rgbMatch[1].split(',').map((part) => part.trim());
+    if (parts.length >= 3) {
+      return `rgba(${parts[0]}, ${parts[1]}, ${parts[2]}, ${safeAlpha})`;
+    }
+  }
+
+  return `color-mix(in srgb, ${color} ${Math.round(safeAlpha * 100)}%, transparent)`;
+}
+
+function mixColor(color, target, ratio) {
+  const safeRatio = Math.min(1, Math.max(0, ratio));
+  return `color-mix(in srgb, ${color} ${Math.round((1 - safeRatio) * 100)}%, ${target} ${Math.round(safeRatio * 100)}%)`;
+}
+
+function tintColor(color, amount) {
+  return mixColor(color, '#ffffff', amount);
+}
+
+function shadeColor(color, amount) {
+  return mixColor(color, '#000000', amount);
+}
+
+function softenSurface(color, mode, amount) {
+  return mode === 'dark' ? tintColor(color, amount) : shadeColor(color, amount);
+}
+
+function combineShadowValues() {
+  return (
+    Array.from(arguments)
+      .map((value) => value && String(value).trim())
+      .filter((value) => value && value !== 'none')
+      .join(', ') || 'none'
+  );
+}
+
+function buildMeta(presetId, meta) {
+  const sourceMeta = meta || {};
+  const nextMeta = {
+    ...(sourceMeta.id ? { id: sourceMeta.id } : presetId ? { id: `theme-editor-${presetId}` } : {}),
+    ...(sourceMeta.name ? { name: sourceMeta.name } : {}),
+    ...(sourceMeta.author ? { author: sourceMeta.author } : {}),
+    ...(sourceMeta.description ? { description: sourceMeta.description } : {}),
+    ...(sourceMeta.version ? { version: sourceMeta.version } : {}),
+    schemaVersion: sourceMeta.schemaVersion || 1,
+    ...(Array.isArray(sourceMeta.tags) ? { tags: [...sourceMeta.tags] } : {}),
+  };
+
+  return nextMeta;
+}
+
+function compileBrandTheme(seed, options) {
+  const fields = { ...DEFAULT_BRAND_SEED_FIELDS, ...(seed || {}) };
+  const opts = options || {};
+  const mode = opts.mode === 'dark' ? 'dark' : 'light';
+  const primaryHover = tintColor(fields.primary, mode === 'dark' ? 0.12 : 0.08);
+  const primaryActive = tintColor(fields.primary, mode === 'dark' ? 0.2 : 0.16);
+  const primarySurface = toRgba(fields.primary, mode === 'dark' ? 0.16 : 0.08);
+  const primarySurfaceActive = toRgba(fields.primary, mode === 'dark' ? 0.28 : 0.18);
+  const defaultHover = softenSurface(fields.muted, mode, mode === 'dark' ? 0.1 : 0.06);
+  const defaultActive = softenSurface(fields.muted, mode, mode === 'dark' ? 0.18 : 0.12);
+  const defaultBorderHover = softenSurface(fields.border, mode, mode === 'dark' ? 0.16 : 0.12);
+  const defaultBorderActive = softenSurface(fields.border, mode, mode === 'dark' ? 0.24 : 0.18);
+  const infoHover = tintColor(fields.info, mode === 'dark' ? 0.12 : 0.08);
+  const infoActive = tintColor(fields.info, mode === 'dark' ? 0.2 : 0.16);
+  const successHover = tintColor(fields.success, mode === 'dark' ? 0.12 : 0.08);
+  const successActive = tintColor(fields.success, mode === 'dark' ? 0.2 : 0.16);
+  const warningHover = tintColor(fields.warning, mode === 'dark' ? 0.12 : 0.08);
+  const warningActive = tintColor(fields.warning, mode === 'dark' ? 0.2 : 0.16);
+  const dangerHover = tintColor(fields.danger, mode === 'dark' ? 0.12 : 0.08);
+  const dangerActive = tintColor(fields.danger, mode === 'dark' ? 0.2 : 0.16);
+  const controlFocusShadow = combineShadowValues(fields.shadowControl, fields.shadowFocus);
+
+  return {
+    meta: buildMeta(opts.presetId, opts.meta),
+    mode,
+    extends: typeof opts.extends === 'string' ? opts.extends : mode === 'dark' ? 'tiny-dark' : 'tiny-light',
+    tokens: {
+      semantic: {
+        'color-primary': fields.primary,
+        'color-primary-hover': primaryHover,
+        'color-primary-active': primaryActive,
+        'color-primary-bg': primarySurface,
+        'color-primary-bg-hover': primarySurfaceActive,
+        'color-primary-border': fields.primary,
+        'color-primary-text-hover': fields.primary,
+        'color-success': fields.success,
+        'color-success-hover': successHover,
+        'color-success-active': successActive,
+        'color-success-bg': toRgba(fields.success, mode === 'dark' ? 0.18 : 0.12),
+        'color-success-border': toRgba(fields.success, mode === 'dark' ? 0.4 : 0.24),
+        'color-info': fields.info,
+        'color-info-hover': infoHover,
+        'color-info-active': infoActive,
+        'color-info-bg': toRgba(fields.info, mode === 'dark' ? 0.18 : 0.12),
+        'color-info-border': toRgba(fields.info, mode === 'dark' ? 0.4 : 0.24),
+        'color-warning': fields.warning,
+        'color-warning-hover': warningHover,
+        'color-warning-active': warningActive,
+        'color-warning-bg': toRgba(fields.warning, mode === 'dark' ? 0.18 : 0.12),
+        'color-warning-border': toRgba(fields.warning, mode === 'dark' ? 0.4 : 0.24),
+        'color-danger-bg': toRgba(fields.danger, mode === 'dark' ? 0.18 : 0.12),
+        'color-danger-border': toRgba(fields.danger, mode === 'dark' ? 0.4 : 0.24),
+        'color-bg': fields.base,
+        'color-bg-container': fields.card,
+        'color-bg-elevated': fields.popover,
+        'color-bg-layout': fields.base,
+        'color-bg-spotlight': fields.muted,
+        'color-fill': fields.muted,
+        'color-fill-secondary': fields.accent,
+        'color-fill-tertiary': fields.border,
+        'color-bg-disabled': fields.muted,
+        'color-text': fields.baseForeground,
+        'color-text-heading': fields.cardForeground,
+        'color-text-secondary': toRgba(fields.baseForeground, mode === 'dark' ? 0.72 : 0.68),
+        'color-text-tertiary': toRgba(fields.baseForeground, mode === 'dark' ? 0.5 : 0.46),
+        'color-text-quaternary': toRgba(fields.baseForeground, mode === 'dark' ? 0.36 : 0.32),
+        'color-border': fields.border,
+        'color-border-secondary': fields.border,
+        'color-border-light': fields.border,
+        'color-border-btn-default': fields.border,
+        'color-danger': fields.danger,
+        'color-danger-hover': dangerHover,
+        'color-danger-active': dangerActive,
+        'chart-1': fields.chart1,
+        'chart-2': fields.chart2,
+        'chart-3': fields.chart3,
+        'chart-4': fields.chart4,
+        'chart-5': fields.chart5,
+        'font-family': fields.fontSans,
+        'font-family-monospace': fields.fontMono,
+        'font-size-base': fields.fontSizeBase,
+        'line-height-base': fields.lineHeightBase,
+        'h1-font-size': fields.h1Size,
+        'h2-font-size': fields.h2Size,
+        'border-radius': fields.radius,
+        'shadow-control': fields.shadowControl,
+        'shadow-card': fields.shadowCard,
+        'shadow-focus': fields.shadowFocus,
+        'control.height.sm': fields.fieldHeightSm,
+        'control.height.md': fields.fieldHeightMd,
+        'control.height.lg': fields.fieldHeightLg,
+        'control.padding-inline.sm': fields.fieldPaddingSm,
+        'control.padding-inline.md': fields.fieldPaddingMd,
+        'control.padding-inline.lg': fields.fieldPaddingLg,
+      },
+      components: {
+        'button.solid.primary.bg': fields.primary,
+        'button.solid.primary.bg-hover': primaryHover,
+        'button.solid.primary.bg-active': primaryActive,
+        'button.solid.primary.border': fields.primary,
+        'button.solid.primary.border-hover': primaryHover,
+        'button.solid.primary.border-active': primaryActive,
+        'button.solid.primary.text': fields.primaryForeground,
+        'button.solid.primary.text-hover': fields.primaryForeground,
+        'button.solid.primary.text-active': fields.primaryForeground,
+        'button.solid.default.bg': fields.muted,
+        'button.solid.default.bg-hover': defaultHover,
+        'button.solid.default.bg-active': defaultActive,
+        'button.solid.default.border': fields.border,
+        'button.solid.default.border-hover': defaultBorderHover,
+        'button.solid.default.border-active': defaultBorderActive,
+        'button.solid.default.text': fields.baseForeground,
+        'button.solid.default.text-hover': fields.baseForeground,
+        'button.solid.default.text-active': fields.baseForeground,
+        'button.outline.default.bg': fields.base,
+        'button.outline.default.bg-hover': defaultHover,
+        'button.outline.default.bg-active': defaultActive,
+        'button.outline.default.border': fields.border,
+        'button.outline.default.border-hover': defaultBorderHover,
+        'button.outline.default.border-active': defaultBorderActive,
+        'button.outline.default.text': fields.baseForeground,
+        'button.outline.default.text-hover': fields.baseForeground,
+        'button.outline.default.text-active': fields.baseForeground,
+        'button.solid.default.shadow': fields.shadowControl,
+        'button.solid.default.shadow-hover': fields.shadowControl,
+        'button.solid.default.shadow-active': fields.shadowControl,
+        'button.outline.default.shadow': fields.shadowControl,
+        'button.outline.default.shadow-hover': fields.shadowControl,
+        'button.outline.default.shadow-active': fields.shadowControl,
+        'button.radius': fields.buttonRadius,
+        'button.height.sm': fields.buttonHeightSm,
+        'button.height.md': fields.buttonHeightMd,
+        'button.height.lg': fields.buttonHeightLg,
+        'button.padding-inline-sm': fields.buttonPaddingSm,
+        'button.padding-inline-md': fields.buttonPaddingMd,
+        'button.padding-inline-lg': fields.buttonPaddingLg,
+        'card.bg': fields.card,
+        'card.bg.filled': fields.secondary,
+        'card.border': fields.border,
+        'card.radius': fields.cardRadius,
+        'card.shadow': fields.shadowCard,
+        'card.shadow.hover': fields.shadowCard,
+        'card.header-color': fields.cardForeground,
+        'card.body-padding': fields.cardPadding,
+        'card.header-padding': fields.cardPadding,
+        'input.bg': fields.base,
+        'input.color': fields.baseForeground,
+        'input.border': fields.input,
+        'input.shadow': fields.shadowControl,
+        'input.border.hover': fields.ring,
+        'input.border.focus': fields.ring,
+        'input.shadow.focus': controlFocusShadow,
+        'input.radius': fields.inputRadius,
+        'input.height.sm': fields.fieldHeightSm,
+        'input.height.md': fields.fieldHeightMd,
+        'input.height.lg': fields.fieldHeightLg,
+        'input.padding-inline-sm': fields.fieldPaddingSm,
+        'input.padding-inline-md': fields.fieldPaddingMd,
+        'input.padding-inline-lg': fields.fieldPaddingLg,
+        'select.bg': fields.base,
+        'select.color': fields.baseForeground,
+        'select.border': fields.input,
+        'select.shadow': fields.shadowControl,
+        'select.border.hover': fields.ring,
+        'select.border.focus': fields.ring,
+        'select.shadow.focus': controlFocusShadow,
+        'select.radius': fields.inputRadius,
+        'select.height.sm': fields.fieldHeightSm,
+        'select.height.md': fields.fieldHeightMd,
+        'select.height.lg': fields.fieldHeightLg,
+        'select.padding-inline-start.sm': fields.fieldPaddingSm,
+        'select.padding-inline-start.md': fields.fieldPaddingMd,
+        'select.padding-inline-start.lg': fields.fieldPaddingLg,
+        'select.dropdown-bg': fields.popover,
+        'select.option.active-bg': fields.muted,
+        'select.option.selected-bg': fields.accent,
+        'table.radius': fields.radius,
+        'picker.input-bg': fields.base,
+        'picker.input-border': fields.input,
+        'picker.input-border-hover': fields.ring,
+        'picker.input-border-focus': fields.ring,
+        'picker.input-shadow-focus': controlFocusShadow,
+        'picker.input-color': fields.baseForeground,
+        'picker.input-color-placeholder': fields.mutedForeground,
+        'picker.input-color-muted': fields.mutedForeground,
+        'picker.input-radius': fields.inputRadius,
+        'picker.input-padding.sm': `0 ${fields.fieldPaddingSm}`,
+        'picker.input-padding.md': `0 ${fields.fieldPaddingMd}`,
+        'picker.input-padding.lg': `0 ${fields.fieldPaddingLg}`,
+        'picker.dropdown-bg': fields.popover,
+        'picker.dropdown-radius': fields.cardRadius,
+        'date-picker.header-border': fields.border,
+        'date-picker.header-button-color': fields.mutedForeground,
+        'date-picker.header-button-color-hover': fields.primary,
+        'date-picker.header-action-hover-bg': fields.muted,
+        'date-picker.header-action-focus-ring': fields.ring,
+        'date-picker.today-color': fields.primary,
+        'date-picker.today-color-hover': fields.primary,
+        'date-picker.today-hover-bg': fields.accent,
+        'date-picker.today-active-bg': fields.muted,
+        'date-picker.today-focus-ring': fields.ring,
+        'picker.cell-hover-bg': fields.muted,
+        'date-picker.cell-selected-bg': fields.primary,
+        'date-picker.cell-selected-color': fields.primaryForeground,
+        'date-picker.cell-selected-hover-bg': fields.primary,
+        'date-picker.cell-today-border': fields.primary,
+        'date-picker.cell-radius': fields.inputRadius,
+        'date-picker.panel-item-hover-bg': fields.muted,
+        'date-picker.panel-item-current-color': fields.primary,
+        'date-picker.panel-item-current-border': fields.primary,
+        'date-picker.panel-item-selected-bg': fields.accent,
+        'date-picker.panel-item-selected-color': fields.primary,
+        'date-picker.panel-item-selected-hover-bg': fields.muted,
+        'date-picker.range-bg': fields.accent,
+        'time-picker.column-border': fields.border,
+        'time-picker.cell-bg-selected': fields.primary,
+        'time-picker.cell-bg-selected-hover': fields.primary,
+        'time-picker.ok-button-bg': fields.primary,
+        'time-picker.ok-button-bg-hover': fields.primary,
+        'time-picker.ok-button-color': fields.primaryForeground,
+        'time-picker.ok-button-radius': fields.buttonRadius,
+        'calendar.bg': fields.card,
+        'calendar.border': fields.border,
+        'calendar.radius': fields.cardRadius,
+        'calendar.cell-hover-bg': fields.muted,
+        'calendar.header-action-color': fields.mutedForeground,
+        'calendar.header-action-color-hover': fields.primary,
+        'calendar.header-action-hover-bg': fields.muted,
+        'calendar.header-action-focus-ring': fields.ring,
+        'calendar.header-label-color': fields.cardForeground,
+        'calendar.header-label-color-hover': fields.primary,
+        'calendar.header-label-hover-bg': fields.muted,
+        'calendar.header-label-focus-ring': fields.ring,
+        'calendar.cell-header-color': fields.mutedForeground,
+        'calendar.week-number-color': fields.mutedForeground,
+        'calendar.cell-color': fields.cardForeground,
+        'calendar.cell-color-muted': fields.mutedForeground,
+        'calendar.cell-disabled-bg': fields.muted,
+        'calendar.cell-today-border': fields.primary,
+        'calendar.cell-selected-bg': fields.primary,
+        'calendar.cell-selected-color': fields.primaryForeground,
+        'calendar.range-bg': fields.accent,
+        'calendar.cell-focus-outline': fields.shadowFocus,
+        'calendar.cell-dot-color': fields.primary,
+        'calendar.panel-item-radius': fields.inputRadius,
+        'calendar.panel-item-hover-bg': fields.muted,
+        'calendar.panel-item-selected-color': fields.primaryForeground,
+        'calendar.panel-item-selected-bg': fields.primary,
+        'calendar.panel-item-selected-hover-bg': fields.primary,
+        'calendar.today-color': fields.primary,
+        'calendar.today-color-hover': fields.primary,
+        'calendar.today-hover-bg': fields.accent,
+        'calendar.today-active-bg': fields.muted,
+        'calendar.today-focus-ring': fields.ring,
+        'cascader.height.sm': fields.fieldHeightSm,
+        'cascader.height.md': fields.fieldHeightMd,
+        'cascader.height.lg': fields.fieldHeightLg,
+        'cascader.bg': fields.base,
+        'cascader.border': fields.input,
+        'cascader.border-hover': fields.ring,
+        'cascader.border-focus': fields.ring,
+        'cascader.shadow-focus': controlFocusShadow,
+        'cascader.radius': fields.inputRadius,
+        'cascader.padding.sm': `0 calc(${fields.fieldPaddingSm} + 20px) 0 ${fields.fieldPaddingSm}`,
+        'cascader.padding.md': `0 calc(${fields.fieldPaddingMd} + 20px) 0 ${fields.fieldPaddingMd}`,
+        'cascader.padding.lg': `0 calc(${fields.fieldPaddingLg} + 20px) 0 ${fields.fieldPaddingLg}`,
+        'native-select.bg': fields.base,
+        'native-select.border': fields.input,
+        'native-select.border-hover': fields.ring,
+        'native-select.border-focus': fields.ring,
+        'native-select.shadow-focus': controlFocusShadow,
+        'native-select.radius': fields.inputRadius,
+        'checkbox.bg': fields.base,
+        'checkbox.border': fields.input,
+        'checkbox.shadow': fields.shadowControl,
+        'checkbox.border.hover': fields.ring,
+        'checkbox.radius': fields.radius,
+        'checkbox.bg.checked': fields.primary,
+        'checkbox.border.checked': fields.primary,
+        'checkbox.indicator-color': fields.primaryForeground,
+        'radio.bg': fields.base,
+        'radio.border': fields.input,
+        'radio.shadow': fields.shadowControl,
+        'radio.border.checked': fields.primary,
+        'radio.dot-bg': fields.primary,
+        'switch.bg': fields.mutedForeground,
+        'switch.bg.checked': fields.primary,
+        'switch.thumb-border': fields.mutedForeground,
+        'switch.thumb-border.checked': fields.primary,
+        'input-number.height.sm': fields.fieldHeightSm,
+        'input-number.height.md': fields.fieldHeightMd,
+        'input-number.height.lg': fields.fieldHeightLg,
+        'segmented.bg': fields.muted,
+        'segmented.item-bg-hover': fields.secondary,
+        'segmented.item-bg-selected': fields.card,
+        'segmented.item-color': fields.mutedForeground,
+        'segmented.item-color-selected': fields.baseForeground,
+        'segmented.item-shadow-focus': fields.shadowFocus,
+        'segmented.radius': fields.radius,
+        'tag.bg': fields.secondary,
+        'tag.color': fields.secondaryForeground,
+        'tag.border': fields.border,
+        'tag.link-color': fields.mutedForeground,
+        'tag.checkable-bg': fields.card,
+        'tag.checkable-color': fields.primary,
+        'tag.checkable-border': fields.border,
+        'tag.checkable-bg.checked': fields.primary,
+        'tag.checkable-color.checked': fields.primaryForeground,
+        'tag.checkable-border.checked': fields.primary,
+        'progress.stroke-color.primary': fields.primary,
+        'progress.stroke-color.success': fields.success,
+        'progress.stroke-color.info': fields.info,
+        'progress.stroke-color.warning': fields.warning,
+        'progress.stroke-color.danger': fields.danger,
+        'progress.text-color': fields.baseForeground,
+        'progress.trail-bg': fields.muted,
+        'progress.circle-trail': fields.muted,
+        'table.color': fields.baseForeground,
+        'table.border': fields.border,
+        'table.header-bg': fields.secondary,
+        'table.row-hover-bg': fields.muted,
+        'table.cell-sortable-hover-bg': fields.muted,
+        'table.row-selected-bg': toRgba(fields.primary, mode === 'dark' ? 0.22 : 0.08),
+        'table.sorter-icon-color': fields.mutedForeground,
+        'table.sorter-icon-color.active': fields.primary,
+        'table.empty-color': fields.mutedForeground,
+        'layout.sidebar-bg': fields.sidebar,
+        'layout.sidebar-color': fields.sidebarForeground,
+        'layout.sidebar-light-bg': fields.sidebar,
+        'layout.sidebar-light-color': fields.sidebarForeground,
+      },
+    },
+  };
+}
+
+export { DEFAULT_BRAND_SEED_FIELDS, compileBrandTheme };
diff --git a/packages/tokens/runtime/registry.d.ts b/packages/tokens/runtime/registry.d.ts
index 1bc4beaff..5d543c1f9 100644
--- a/packages/tokens/runtime/registry.d.ts
+++ b/packages/tokens/runtime/registry.d.ts
@@ -10,7 +10,8 @@ declare const registry: {
     group?: string;
     description?: string;
     source: string;
-    defaultValue?: string;
+    defaultValue: string | number;
+    resolvedValue: string | number;
     fallback?: string;
     status: string;
   }>;
diff --git a/packages/tokens/runtime/theme-runtime.cjs b/packages/tokens/runtime/theme-runtime.cjs
index 0f189abd8..0802442d1 100644
--- a/packages/tokens/runtime/theme-runtime.cjs
+++ b/packages/tokens/runtime/theme-runtime.cjs
@@ -224,6 +224,35 @@ function validateTokenSection(section, category, registryMaps, errors, warnings,
         warnings.push(message);
       }
     }
+
+    if (typeof value !== 'string') {
+      continue;
+    }
+
+    const referenceMatch = value.match(/^\{([^}]+)\}$/);
+    if (!referenceMatch) {
+      continue;
+    }
+
+    const referenceToken = registryMaps.byKey.get(referenceMatch[1]);
+    if (!referenceToken) {
+      const message = `Theme token "${key}" references unknown token "${referenceMatch[1]}".`;
+      if (strict) {
+        errors.push(message);
+      } else {
+        warnings.push(message);
+      }
+      continue;
+    }
+
+    if (referenceToken.category === 'primitive' || referenceToken.status === 'internal') {
+      const message = `Theme token "${key}" cannot reference internal primitive token "${referenceMatch[1]}".`;
+      if (strict) {
+        errors.push(message);
+      } else {
+        warnings.push(message);
+      }
+    }
   }
 }
 
diff --git a/packages/tokens/runtime/theme-runtime.mjs b/packages/tokens/runtime/theme-runtime.mjs
index 9843909ff..99f963326 100644
--- a/packages/tokens/runtime/theme-runtime.mjs
+++ b/packages/tokens/runtime/theme-runtime.mjs
@@ -212,6 +212,35 @@ function validateTokenSection(section, category, registryMaps, errors, warnings,
         warnings.push(message);
       }
     }
+
+    if (typeof value !== 'string') {
+      continue;
+    }
+
+    const referenceMatch = value.match(/^\{([^}]+)\}$/);
+    if (!referenceMatch) {
+      continue;
+    }
+
+    const referenceToken = registryMaps.byKey.get(referenceMatch[1]);
+    if (!referenceToken) {
+      const message = `Theme token "${key}" references unknown token "${referenceMatch[1]}".`;
+      if (strict) {
+        errors.push(message);
+      } else {
+        warnings.push(message);
+      }
+      continue;
+    }
+
+    if (referenceToken.category === 'primitive' || referenceToken.status === 'internal') {
+      const message = `Theme token "${key}" cannot reference internal primitive token "${referenceMatch[1]}".`;
+      if (strict) {
+        errors.push(message);
+      } else {
+        warnings.push(message);
+      }
+    }
   }
 }
 
diff --git a/packages/tokens/scripts/build-runtime.js b/packages/tokens/scripts/build-runtime.js
index 4788c09d5..bb8a8eeea 100644
--- a/packages/tokens/scripts/build-runtime.js
+++ b/packages/tokens/scripts/build-runtime.js
@@ -9,10 +9,41 @@ const REGISTRY_DTS_PATH = path.join(DIST_DIR, 'registry.d.ts');
 const PRESETS_DTS_PATH = path.join(DIST_DIR, 'presets.d.ts');
 const SCHEMA_DIST_DIR = path.join(DIST_DIR, 'schema');
 const THEME_SCHEMA_PATH = path.join(SOURCE_DIR, 'schema', 'theme.schema.json');
-
+const RUNTIME_SOURCE_DIR = path.join(SOURCE_DIR, 'runtime');
+const RUNTIME_DIR = path.join(ROOT, 'runtime');
+const COMPILE_BRAND_THEME_SOURCE_PATH = path.join(
+  RUNTIME_SOURCE_DIR,
+  'compile-brand-theme.source.js'
+);
+const COMPILE_BRAND_THEME_MJS_PATH = path.join(RUNTIME_DIR, 'compile-brand-theme.mjs');
+const COMPILE_BRAND_THEME_CJS_PATH = path.join(RUNTIME_DIR, 'compile-brand-theme.cjs');
+
+const PRIMITIVE_DIR = path.join(SOURCE_DIR, 'primitives');
 const SEMANTIC_DIR = path.join(SOURCE_DIR, 'semantic');
 const COMPONENT_DIR = path.join(SOURCE_DIR, 'components');
 const THEMES_DIR = path.join(SOURCE_DIR, 'themes');
+const REACT_SRC_DIR = path.join(ROOT, '..', 'react', 'src');
+const DOCS_SRC_DIR = path.join(ROOT, '..', '..', 'apps', 'docs', 'src');
+
+const TOKEN_TYPE_VALUES = new Set([
+  'color',
+  'dimension',
+  'number',
+  'font-family',
+  'font-weight',
+  'line-height',
+  'shadow',
+  'duration',
+  'easing',
+  'transition',
+  'string',
+]);
+const TOKEN_STATUS_VALUES = new Set(['active', 'deprecated', 'internal']);
+const CSS_VAR_PATTERN = /^--ty-[a-z0-9]+(?:-[a-z0-9]+)*$/;
+const CONSUMER_FILE_EXTENSIONS = new Set(['.css', '.scss', '.ts', '.tsx']);
+const GENERATED_RUNTIME_HEADER =
+  '// Generated by scripts/build-runtime.js from source/runtime/compile-brand-theme.source.js.\n' +
+  '// Do not edit this file directly.\n\n';
 
 function mkdirp(dir) {
   fs.mkdirSync(dir, { recursive: true });
@@ -22,10 +53,18 @@ function readJson(filePath) {
   return JSON.parse(fs.readFileSync(filePath, 'utf8'));
 }
 
+function readText(filePath) {
+  return fs.readFileSync(filePath, 'utf8');
+}
+
 function writeJson(filePath, value) {
   fs.writeFileSync(filePath, JSON.stringify(value, null, 2) + '\n');
 }
 
+function normalizeTrailingNewline(value) {
+  return value.replace(/\r\n/g, '\n').trimEnd() + '\n';
+}
+
 function listJsonFiles(dir) {
   if (!fs.existsSync(dir)) return [];
   return fs
@@ -35,6 +74,44 @@ function listJsonFiles(dir) {
     .map((name) => path.join(dir, name));
 }
 
+function listSourceFiles(dir) {
+  if (!fs.existsSync(dir)) return [];
+
+  const files = [];
+
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...listSourceFiles(fullPath));
+      continue;
+    }
+
+    if (CONSUMER_FILE_EXTENSIONS.has(path.extname(entry.name))) {
+      files.push(fullPath);
+    }
+  }
+
+  return files.sort();
+}
+
+function listDirectories(dir) {
+  if (!fs.existsSync(dir)) return [];
+
+  return fs
+    .readdirSync(dir, { withFileTypes: true })
+    .filter((entry) => entry.isDirectory())
+    .map((entry) => entry.name)
+    .sort();
+}
+
+function basenameWithoutExt(filePath) {
+  return path.basename(filePath, path.extname(filePath));
+}
+
+function isObject(value) {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
 function tokenKeyToCssVar(key) {
   return `--ty-${key.replace(/\./g, '-')}`;
 }
@@ -43,15 +120,101 @@ function getComponentName(key) {
   return key.includes('.') ? key.split('.')[0] : null;
 }
 
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message);
+function titleCase(value) {
+  return value
+    .split(/[-.]/)
+    .filter(Boolean)
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join(' ');
+}
+
+function getTokenStatus(token) {
+  if (token.status) {
+    return token.status;
+  }
+
+  return token.category === 'primitive' ? 'internal' : 'active';
+}
+
+function getTokenGroup(token) {
+  if (token.component) {
+    return titleCase(token.component);
+  }
+
+  return titleCase(token.sourceFileBase || token.category);
+}
+
+function formatValidationError(title, errors) {
+  return `${title}\n${errors.map((error) => `- ${error}`).join('\n')}`;
+}
+
+function lineNumberForIndex(sourceText, index) {
+  let line = 1;
+
+  for (let i = 0; i < index; i += 1) {
+    if (sourceText.charCodeAt(i) === 10) {
+      line += 1;
+    }
+  }
+
+  return line;
+}
+
+function buildCompileBrandThemeRuntimeOutputs() {
+  const source = normalizeTrailingNewline(readText(COMPILE_BRAND_THEME_SOURCE_PATH));
+  const exportsBlock =
+    'export { DEFAULT_BRAND_SEED_FIELDS, compileBrandTheme };\n';
+  const moduleExportsBlock =
+    'module.exports = {\n' +
+    '  DEFAULT_BRAND_SEED_FIELDS,\n' +
+    '  compileBrandTheme,\n' +
+    '};\n';
+
+  return {
+    mjs: GENERATED_RUNTIME_HEADER + source + '\n' + exportsBlock,
+    cjs: `'use strict';\n\n` + GENERATED_RUNTIME_HEADER + source + '\n' + moduleExportsBlock,
+  };
+}
+
+function syncCompileBrandThemeRuntime(options = {}) {
+  const shouldWriteArtifacts = options.write !== false;
+  const outputs = buildCompileBrandThemeRuntimeOutputs();
+  const mismatches = [];
+
+  for (const [filePath, expectedContents] of [
+    [COMPILE_BRAND_THEME_MJS_PATH, outputs.mjs],
+    [COMPILE_BRAND_THEME_CJS_PATH, outputs.cjs],
+  ]) {
+    const currentContents = fs.existsSync(filePath) ? readText(filePath).replace(/\r\n/g, '\n') : null;
+
+    if (currentContents === expectedContents) {
+      continue;
+    }
+
+    if (shouldWriteArtifacts) {
+      fs.writeFileSync(filePath, expectedContents);
+      continue;
+    }
+
+    mismatches.push(path.relative(ROOT, filePath));
+  }
+
+  if (mismatches.length > 0) {
+    throw new Error(
+      formatValidationError(
+        'Generated runtime files are out of date.',
+        mismatches.map(
+          (filePath) =>
+            `${filePath} is stale. Run "pnpm --filter @tiny-design/tokens build" to regenerate runtime outputs.`
+        )
+      )
+    );
   }
 }
 
 function resolveTokenValue(rawValue, tokenMap, stack = []) {
   if (typeof rawValue !== 'string') {
-    return String(rawValue);
+    return rawValue;
   }
 
   const match = rawValue.match(/^\{([^}]+)\}$/);
@@ -61,12 +224,12 @@ function resolveTokenValue(rawValue, tokenMap, stack = []) {
 
   const refKey = match[1];
   if (stack.includes(refKey)) {
-    throw new Error(`Circular token reference detected: ${[...stack, refKey].join(' -> ')}`);
+    throw new Error(`has a circular reference chain: ${[...stack, refKey].join(' -> ')}`);
   }
 
   const refToken = tokenMap.get(refKey);
   if (!refToken) {
-    throw new Error(`Unresolved token reference: ${refKey}`);
+    throw new Error(`references unknown token "${refKey}"`);
   }
 
   return resolveTokenValue(refToken.$value, tokenMap, [...stack, refKey]);
@@ -84,41 +247,62 @@ function toCssValue(rawValue, tokenMap) {
 
   const refKey = match[1];
   if (!tokenMap.has(refKey)) {
-    throw new Error(`Unresolved token reference: ${refKey}`);
+    throw new Error(`references unknown token "${refKey}"`);
   }
 
   return `var(${tokenKeyToCssVar(refKey)})`;
 }
 
+function loadThemeSchemaConfig() {
+  const schema = readJson(THEME_SCHEMA_PATH);
+
+  return {
+    id: schema.$id,
+    requiredTopLevelKeys: new Set(schema.required || []),
+    topLevelKeys: new Set(Object.keys(schema.properties || {})),
+    modeValues: new Set((((schema.properties || {}).mode || {}).enum) || []),
+    extendsPattern: new RegExp(((schema.properties || {}).extends || {}).pattern),
+    requiredMetaKeys: new Set((((schema.$defs || {}).meta || {}).required) || []),
+    metaKeys: new Set(Object.keys((((schema.$defs || {}).meta || {}).properties) || {})),
+    metaIdPattern: new RegExp((((((schema.$defs || {}).meta || {}).properties || {}).id) || {}).pattern),
+    metaVersionPattern: new RegExp(
+      (((((schema.$defs || {}).meta || {}).properties || {}).version) || {}).pattern
+    ),
+    tagPattern: new RegExp(
+      (((((((schema.$defs || {}).meta || {}).properties || {}).tags) || {}).items) || {}).pattern
+    ),
+    tokenSectionKeys: new Set(
+      Object.keys(((((schema.$defs || {}).tokenSections || {}).properties) || {}))
+    ),
+    tokenKeyPattern: new RegExp((((schema.$defs || {}).tokenKey || {}).pattern)),
+  };
+}
+
 function loadTokenFiles(dir, category) {
   return listJsonFiles(dir).flatMap((filePath) => {
     const fileData = readJson(filePath);
-    return Object.entries(fileData).map(([key, value]) => ({
-      key,
-      ...value,
-      category,
-      source: path.relative(ROOT, filePath),
-      component: category === 'component' ? getComponentName(key) : undefined,
-    }));
-  });
-}
+    const source = path.relative(ROOT, filePath);
+    const sourceFileBase = basenameWithoutExt(filePath);
 
-function validateTokens(tokens) {
-  const keys = new Set();
-  const cssVars = new Set();
-
-  for (const token of tokens) {
-    assert(!keys.has(token.key), `Duplicate token key: ${token.key}`);
-    keys.add(token.key);
-
-    const cssVar = tokenKeyToCssVar(token.key);
-    assert(!cssVars.has(cssVar), `Duplicate css var: ${cssVar}`);
-    cssVars.add(cssVar);
-
-    if (token.category === 'component') {
-      assert(token.component, `Missing component name for token: ${token.key}`);
+    if (!isObject(fileData)) {
+      throw new Error(`${source} must export an object of token definitions.`);
     }
-  }
+
+    return Object.entries(fileData).map(([key, value]) => {
+      if (!isObject(value)) {
+        throw new Error(`${source}: token "${key}" must be an object.`);
+      }
+
+      return {
+        key,
+        ...value,
+        category,
+        source,
+        sourceFileBase,
+        component: category === 'component' ? getComponentName(key) : undefined,
+      };
+    });
+  });
 }
 
 function loadThemes() {
@@ -131,6 +315,101 @@ function loadThemes() {
   });
 }
 
+function validateTokens(tokens, themeSchemaConfig) {
+  const errors = [];
+  const keys = new Map();
+  const cssVars = new Map();
+  const cssVarSet = new Set(tokens.map((token) => tokenKeyToCssVar(token.key)));
+  const tokenMap = new Map(tokens.map((token) => [token.key, token]));
+
+  for (const token of tokens) {
+    const location = `${token.source}: token "${token.key}"`;
+    const cssVar = tokenKeyToCssVar(token.key);
+
+    if (!themeSchemaConfig.tokenKeyPattern.test(token.key)) {
+      errors.push(`${location} does not match the theme token key pattern.`);
+    }
+
+    if (!('description' in token) || typeof token.description !== 'string' || token.description.trim() === '') {
+      errors.push(`${location} must include a non-empty description.`);
+    }
+
+    if (!('$type' in token) || typeof token.$type !== 'string' || !TOKEN_TYPE_VALUES.has(token.$type)) {
+      errors.push(`${location} has unsupported $type "${token.$type}".`);
+    }
+
+    if (!('$value' in token) || (typeof token.$value !== 'string' && typeof token.$value !== 'number')) {
+      errors.push(`${location} must define $value as a string or number.`);
+    }
+
+    if (
+      token.status !== undefined &&
+      (typeof token.status !== 'string' || !TOKEN_STATUS_VALUES.has(token.status))
+    ) {
+      errors.push(`${location} has unsupported status "${token.status}".`);
+    }
+
+    if (keys.has(token.key)) {
+      errors.push(`${location} duplicates key already declared in ${keys.get(token.key)}.`);
+    } else {
+      keys.set(token.key, token.source);
+    }
+
+    if (!CSS_VAR_PATTERN.test(cssVar)) {
+      errors.push(`${location} resolves to invalid css var "${cssVar}".`);
+    }
+
+    if (cssVars.has(cssVar)) {
+      errors.push(`${location} resolves to duplicate css var already declared in ${cssVars.get(cssVar)}.`);
+    } else {
+      cssVars.set(cssVar, token.source);
+    }
+
+    if (token.category === 'component') {
+      if (!token.component) {
+        errors.push(`${location} is missing a component prefix.`);
+      } else if (token.component !== token.sourceFileBase) {
+        errors.push(
+          `${location} uses component prefix "${token.component}" but lives in ${token.sourceFileBase}.json.`
+        );
+      }
+    }
+
+    if (token.fallback !== undefined) {
+      if (typeof token.fallback !== 'string' || !CSS_VAR_PATTERN.test(token.fallback)) {
+        errors.push(`${location} has invalid fallback "${token.fallback}".`);
+      } else if (!cssVarSet.has(token.fallback)) {
+        errors.push(`${location} points to missing fallback "${token.fallback}".`);
+      }
+    }
+  }
+
+  for (const token of tokens) {
+    const location = `${token.source}: token "${token.key}"`;
+
+    try {
+      resolveTokenValue(token.$value, tokenMap, [token.key]);
+    } catch (error) {
+      errors.push(`${location} ${error.message}.`);
+    }
+
+    const directReferenceMatch =
+      typeof token.$value === 'string' ? token.$value.match(/^\{([^}]+)\}$/) : null;
+    if (!directReferenceMatch) {
+      continue;
+    }
+
+    const referenceToken = tokenMap.get(directReferenceMatch[1]);
+    if (token.category === 'component' && referenceToken && referenceToken.category === 'primitive') {
+      errors.push(
+        `${location} cannot reference primitive token "${referenceToken.key}" directly; use a semantic token instead.`
+      );
+    }
+  }
+
+  return { errors, tokenMap };
+}
+
 function buildPresetMap(themes) {
   return themes.reduce((acc, theme) => {
     if (theme.meta && theme.meta.id) {
@@ -140,7 +419,7 @@ function buildPresetMap(themes) {
   }, {});
 }
 
-function buildRegistry(tokens) {
+function buildRegistry(tokens, tokenMap) {
   return {
     version: 1,
     generatedAt: new Date().toISOString(),
@@ -150,29 +429,274 @@ function buildRegistry(tokens) {
       category: token.category,
       ...(token.component ? { component: token.component } : {}),
       type: token.$type,
-      group: token.component
-        ? token.component.charAt(0).toUpperCase() + token.component.slice(1)
-        : 'Semantic',
+      group: getTokenGroup(token),
       description: token.description || '',
       source: token.source,
       defaultValue: token.$value,
+      resolvedValue: resolveTokenValue(token.$value, tokenMap, [token.key]),
       ...(token.fallback ? { fallback: token.fallback } : {}),
-      status: token.status || 'active',
+      status: getTokenStatus(token),
     })),
   };
 }
 
-function buildCss(tokens, cssValues) {
-  const rootLines = [':root {'];
+function validateThemeSchemaDocument(theme, themeSchemaConfig) {
+  const errors = [];
+  const source = theme.source || 'unknown theme source';
 
-  for (const token of tokens) {
-    rootLines.push(`  ${tokenKeyToCssVar(token.key)}: ${cssValues.get(token.key)};`);
+  if (!isObject(theme)) {
+    return [`${source}: theme document must be an object.`];
+  }
+
+  for (const key of Object.keys(theme)) {
+    if (!themeSchemaConfig.topLevelKeys.has(key) && key !== 'source') {
+      errors.push(`${source}: field "${key}" is not allowed by the theme schema.`);
+    }
+  }
+
+  for (const requiredKey of themeSchemaConfig.requiredTopLevelKeys) {
+    if (!Object.prototype.hasOwnProperty.call(theme, requiredKey)) {
+      errors.push(`${source}: missing required field "${requiredKey}".`);
+    }
   }
 
-  rootLines.push('}');
-  rootLines.push('');
+  if (theme.$schema !== undefined && typeof theme.$schema !== 'string') {
+    errors.push(`${source}: $schema must be a string.`);
+  }
+
+  if (!isObject(theme.meta)) {
+    errors.push(`${source}: meta must be an object.`);
+  } else {
+    for (const key of Object.keys(theme.meta)) {
+      if (!themeSchemaConfig.metaKeys.has(key)) {
+        errors.push(`${source}: meta.${key} is not allowed by the theme schema.`);
+      }
+    }
+
+    for (const requiredKey of themeSchemaConfig.requiredMetaKeys) {
+      if (!Object.prototype.hasOwnProperty.call(theme.meta, requiredKey)) {
+        errors.push(`${source}: meta.${requiredKey} is required.`);
+      }
+    }
+
+    if (
+      theme.meta.id !== undefined &&
+      (typeof theme.meta.id !== 'string' || !themeSchemaConfig.metaIdPattern.test(theme.meta.id))
+    ) {
+      errors.push(`${source}: meta.id "${theme.meta.id}" does not match the schema pattern.`);
+    }
+
+    if (theme.meta.name !== undefined) {
+      if (typeof theme.meta.name !== 'string' || theme.meta.name.length < 1 || theme.meta.name.length > 120) {
+        errors.push(`${source}: meta.name must be a non-empty string up to 120 characters.`);
+      }
+    }
+
+    if (theme.meta.author !== undefined) {
+      if (
+        typeof theme.meta.author !== 'string' ||
+        theme.meta.author.length < 1 ||
+        theme.meta.author.length > 120
+      ) {
+        errors.push(`${source}: meta.author must be a non-empty string up to 120 characters.`);
+      }
+    }
+
+    if (theme.meta.description !== undefined) {
+      if (typeof theme.meta.description !== 'string' || theme.meta.description.length > 500) {
+        errors.push(`${source}: meta.description must be a string up to 500 characters.`);
+      }
+    }
+
+    if (
+      theme.meta.version !== undefined &&
+      (typeof theme.meta.version !== 'string' ||
+        !themeSchemaConfig.metaVersionPattern.test(theme.meta.version))
+    ) {
+      errors.push(`${source}: meta.version "${theme.meta.version}" is not valid semver.`);
+    }
+
+    if (theme.meta.schemaVersion !== undefined && theme.meta.schemaVersion !== 1) {
+      errors.push(`${source}: meta.schemaVersion must equal 1.`);
+    }
+
+    if (theme.meta.tags !== undefined) {
+      if (!Array.isArray(theme.meta.tags)) {
+        errors.push(`${source}: meta.tags must be an array.`);
+      } else {
+        const tagSet = new Set();
+
+        if (theme.meta.tags.length > 20) {
+          errors.push(`${source}: meta.tags cannot contain more than 20 items.`);
+        }
+
+        for (const tag of theme.meta.tags) {
+          if (typeof tag !== 'string' || !themeSchemaConfig.tagPattern.test(tag)) {
+            errors.push(`${source}: meta.tags contains invalid tag "${tag}".`);
+            continue;
+          }
+
+          if (tagSet.has(tag)) {
+            errors.push(`${source}: meta.tags contains duplicate tag "${tag}".`);
+            continue;
+          }
+
+          tagSet.add(tag);
+        }
+      }
+    }
+  }
+
+  if (typeof theme.mode !== 'string' || !themeSchemaConfig.modeValues.has(theme.mode)) {
+    errors.push(`${source}: mode must be one of ${Array.from(themeSchemaConfig.modeValues).join(', ')}.`);
+  }
+
+  if (
+    theme.extends !== undefined &&
+    (typeof theme.extends !== 'string' || !themeSchemaConfig.extendsPattern.test(theme.extends))
+  ) {
+    errors.push(`${source}: extends "${theme.extends}" does not match the schema pattern.`);
+  }
+
+  if (!isObject(theme.tokens)) {
+    errors.push(`${source}: tokens must be an object.`);
+  } else {
+    for (const key of Object.keys(theme.tokens)) {
+      if (!themeSchemaConfig.tokenSectionKeys.has(key)) {
+        errors.push(`${source}: tokens.${key} is not allowed by the theme schema.`);
+      }
+    }
+
+    for (const sectionName of themeSchemaConfig.tokenSectionKeys) {
+      const section = theme.tokens[sectionName];
+
+      if (section === undefined) continue;
+
+      if (!isObject(section)) {
+        errors.push(`${source}: tokens.${sectionName} must be an object.`);
+        continue;
+      }
+
+      for (const [key, value] of Object.entries(section)) {
+        if (!themeSchemaConfig.tokenKeyPattern.test(key)) {
+          errors.push(`${source}: tokens.${sectionName}.${key} does not match the schema token key pattern.`);
+        }
+
+        if (typeof value === 'string') {
+          if (value.length === 0) {
+            errors.push(`${source}: tokens.${sectionName}.${key} cannot be an empty string.`);
+          }
+          continue;
+        }
+
+        if (typeof value !== 'number') {
+          errors.push(`${source}: tokens.${sectionName}.${key} must be a string or number.`);
+        }
+      }
+    }
+  }
+
+  return errors;
+}
+
+function validateThemeRegistryUsage(themes, tokens, themeSchemaConfig) {
+  const errors = [];
+  const warnings = [];
+  const tokenMap = new Map(tokens.map((token) => [token.key, token]));
+  const themeIdSources = new Map();
+  const presetMap = buildPresetMap(themes);
+
+  for (const theme of themes) {
+    const source = theme.source || 'unknown theme source';
+    errors.push(...validateThemeSchemaDocument(theme, themeSchemaConfig));
+
+    const themeId = theme.meta && theme.meta.id;
+    if (themeId) {
+      if (themeIdSources.has(themeId)) {
+        errors.push(
+          `${source}: meta.id "${themeId}" duplicates theme id already declared in ${themeIdSources.get(themeId)}.`
+        );
+      } else {
+        themeIdSources.set(themeId, source);
+      }
+    }
+  }
+
+  function validatePresetChain(theme, visited = new Set()) {
+    const source = theme.source || 'unknown theme source';
+
+    if (!theme.extends) return;
+
+    const preset = presetMap[theme.extends];
+    if (!preset) {
+      errors.push(`${source}: extends unknown preset "${theme.extends}".`);
+      return;
+    }
+
+    if (visited.has(theme.extends)) {
+      errors.push(`${source}: extends chain for "${theme.extends}" is circular.`);
+      return;
+    }
+
+    visited.add(theme.extends);
+    validatePresetChain(preset, visited);
+    visited.delete(theme.extends);
+  }
+
+  function validateThemeSection(theme, sectionName, expectedCategory) {
+    const source = theme.source || 'unknown theme source';
+    const section = theme.tokens && theme.tokens[sectionName];
+
+    if (!isObject(section)) return;
+
+    for (const [key, value] of Object.entries(section)) {
+      const registryToken = tokenMap.get(key);
+
+      if (!registryToken) {
+        errors.push(`${source}: tokens.${sectionName}.${key} is not present in the token registry.`);
+        continue;
+      }
+
+      if (registryToken.category !== expectedCategory) {
+        errors.push(
+          `${source}: tokens.${sectionName}.${key} belongs to category "${registryToken.category}", not "${expectedCategory}".`
+        );
+      }
+
+      if (getTokenStatus(registryToken) === 'internal') {
+        errors.push(`${source}: tokens.${sectionName}.${key} is internal and cannot be authored in themes.`);
+      }
+
+      if (getTokenStatus(registryToken) === 'deprecated') {
+        warnings.push(`${source}: tokens.${sectionName}.${key} is deprecated.`);
+      }
+
+      if (typeof value !== 'string') continue;
+
+      const referenceMatch = value.match(/^\{([^}]+)\}$/);
+      if (!referenceMatch) continue;
+
+      if (!tokenMap.has(referenceMatch[1])) {
+        errors.push(`${source}: tokens.${sectionName}.${key} references unknown token "${referenceMatch[1]}".`);
+        continue;
+      }
+
+      const referenceToken = tokenMap.get(referenceMatch[1]);
+      if (referenceToken && (referenceToken.category === 'primitive' || getTokenStatus(referenceToken) === 'internal')) {
+        errors.push(
+          `${source}: tokens.${sectionName}.${key} cannot reference internal primitive token "${referenceMatch[1]}".`
+        );
+      }
+    }
+  }
+
+  for (const theme of themes) {
+    validatePresetChain(theme);
+    validateThemeSection(theme, 'semantic', 'semantic');
+    validateThemeSection(theme, 'components', 'component');
+  }
 
-  return rootLines.join('\n');
+  return { errors, warnings };
 }
 
 function buildThemeCss(tokens, cssValues, tokenMap, overrides, selector) {
@@ -236,6 +760,7 @@ export interface TokenRegistryEntry {
   description: string;
   source: string;
   defaultValue: string | number;
+  resolvedValue: string | number;
   fallback?: string;
   status: 'active' | 'deprecated' | 'internal';
 }
@@ -282,28 +807,157 @@ export default presets;
 `;
 }
 
-function buildRuntimeTokens() {
-  console.log('Building runtime tokens...\n');
+function collectLocalCssVars(files) {
+  const definedVars = new Set();
+
+  for (const filePath of files) {
+    const sourceText = fs.readFileSync(filePath, 'utf8');
+    const definitionRegex = /--ty-[a-z0-9-]+(?=['"]?\s*:)/g;
+    let match;
+
+    while ((match = definitionRegex.exec(sourceText)) !== null) {
+      definedVars.add(match[0]);
+    }
+  }
+
+  return definedVars;
+}
+
+function extractTyVarReferences(sourceText) {
+  const references = [];
+  const referenceRegex = /var\(\s*(--ty-[a-z0-9-]+)\s*(,|\))/g;
+  let match;
+
+  while ((match = referenceRegex.exec(sourceText)) !== null) {
+    references.push({
+      name: match[1],
+      hasFallback: match[2] === ',',
+      index: match.index,
+    });
+  }
+
+  return references;
+}
+
+function collectOverridePrefixes(tokens) {
+  const prefixes = new Set(
+    tokens.filter((token) => token.category === 'component' && token.component).map((token) => token.component)
+  );
+
+  for (const directoryName of listDirectories(REACT_SRC_DIR)) {
+    prefixes.add(directoryName);
+  }
+
+  return prefixes;
+}
+
+function isComponentOverrideHook(cssVar, hasFallback, overridePrefixes) {
+  if (!hasFallback) return false;
+
+  const body = cssVar.replace(/^--ty-/, '');
+  const parts = body.split('-');
 
+  for (let i = parts.length - 1; i >= 1; i -= 1) {
+    const prefix = parts.slice(0, i).join('-');
+    if (overridePrefixes.has(prefix)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function validateConsumerContracts(tokens) {
+  const registryVars = new Set(tokens.map((token) => tokenKeyToCssVar(token.key)));
+  const consumerFiles = [...listSourceFiles(REACT_SRC_DIR), ...listSourceFiles(DOCS_SRC_DIR)];
+  const definedVars = collectLocalCssVars(consumerFiles);
+  const overridePrefixes = collectOverridePrefixes(tokens);
+  const usedRegistryVars = new Set();
+  const errors = [];
+
+  for (const filePath of consumerFiles) {
+    const sourceText = fs.readFileSync(filePath, 'utf8');
+    const relativePath = path.relative(ROOT, filePath);
+
+    for (const reference of extractTyVarReferences(sourceText)) {
+      if (registryVars.has(reference.name)) {
+        usedRegistryVars.add(reference.name);
+        continue;
+      }
+
+      if (definedVars.has(reference.name)) {
+        continue;
+      }
+
+      if (isComponentOverrideHook(reference.name, reference.hasFallback, overridePrefixes)) {
+        continue;
+      }
+
+      errors.push(
+        `${relativePath}:${lineNumberForIndex(sourceText, reference.index)} references unknown token var "${reference.name}".`
+      );
+    }
+  }
+
+  if (errors.length > 0) {
+    throw new Error(formatValidationError('Consumer token contract validation failed.', errors));
+  }
+
+  return {
+    filesChecked: consumerFiles.length,
+    usedRegistryVars: usedRegistryVars.size,
+    totalRegistryVars: registryVars.size,
+  };
+}
+
+function buildRuntimeTokens(options = {}) {
+  const shouldWriteArtifacts = options.write !== false;
+  const shouldValidateConsumers = options.verifyConsumers !== false;
+  const themeSchemaConfig = loadThemeSchemaConfig();
+  const actionLabel = shouldWriteArtifacts ? 'Building runtime tokens...' : 'Validating runtime tokens...';
+
+  console.log(`${actionLabel}\n`);
+  syncCompileBrandThemeRuntime({ write: shouldWriteArtifacts });
+
+  const primitiveTokens = loadTokenFiles(PRIMITIVE_DIR, 'primitive');
   const semanticTokens = loadTokenFiles(SEMANTIC_DIR, 'semantic');
   const componentTokens = loadTokenFiles(COMPONENT_DIR, 'component');
-  const allTokens = [...semanticTokens, ...componentTokens];
-  const themes = loadThemes();
+  const allTokens = [...primitiveTokens, ...semanticTokens, ...componentTokens];
+  const tokenValidation = validateTokens(allTokens, themeSchemaConfig);
 
-  validateTokens(allTokens);
+  if (tokenValidation.errors.length > 0) {
+    throw new Error(formatValidationError('Token validation failed.', tokenValidation.errors));
+  }
 
-  const tokenMap = new Map(allTokens.map((token) => [token.key, token]));
-  const resolvedValues = new Map(
-    allTokens.map((token) => [token.key, resolveTokenValue(token.$value, tokenMap)])
-  );
-  const cssValues = new Map(
-    allTokens.map((token) => [token.key, toCssValue(token.$value, tokenMap)])
-  );
+  const themes = loadThemes();
+  const themeValidation = validateThemeRegistryUsage(themes, allTokens, themeSchemaConfig);
+  if (themeValidation.errors.length > 0) {
+    throw new Error(formatValidationError('Theme validation failed.', themeValidation.errors));
+  }
+
+  if (themeValidation.warnings.length > 0) {
+    console.warn(formatValidationError('Theme validation warnings.', themeValidation.warnings));
+  }
 
-  const registry = buildRegistry(allTokens);
+  const tokenMap = tokenValidation.tokenMap;
+  const cssValues = new Map(allTokens.map((token) => [token.key, toCssValue(token.$value, tokenMap)]));
+  const registry = buildRegistry(allTokens, tokenMap);
   const lightTheme = themes.find((theme) => theme.mode === 'light');
   const darkTheme = themes.find((theme) => theme.mode === 'dark');
   const presets = buildPresetMap(themes);
+
+  if (shouldValidateConsumers) {
+    const consumerSummary = validateConsumerContracts(allTokens);
+    console.log(
+      `  consumer contract check (${consumerSummary.filesChecked} files, ${consumerSummary.usedRegistryVars}/${consumerSummary.totalRegistryVars} registry vars referenced)`
+    );
+  }
+
+  if (!shouldWriteArtifacts) {
+    console.log('\nRuntime tokens validated.');
+    return { registry, presets };
+  }
+
   const lightThemeOverrides = {
     ...((lightTheme && lightTheme.tokens && lightTheme.tokens.semantic) || {}),
     ...((lightTheme && lightTheme.tokens && lightTheme.tokens.components) || {}),
@@ -312,20 +966,8 @@ function buildRuntimeTokens() {
     ...((darkTheme && darkTheme.tokens && darkTheme.tokens.semantic) || {}),
     ...((darkTheme && darkTheme.tokens && darkTheme.tokens.components) || {}),
   };
-  const lightCss = buildThemeCss(
-    allTokens,
-    cssValues,
-    tokenMap,
-    lightThemeOverrides,
-    ':root'
-  );
-  const darkCss = buildThemeCss(
-    allTokens,
-    cssValues,
-    tokenMap,
-    darkThemeOverrides,
-    "[data-tiny-theme='dark']"
-  );
+  const lightCss = buildThemeCss(allTokens, cssValues, tokenMap, lightThemeOverrides, ':root');
+  const darkCss = buildThemeCss(allTokens, cssValues, tokenMap, darkThemeOverrides, "[data-tiny-theme='dark']");
   const baseCss = buildBaseThemeCss(allTokens, cssValues, tokenMap, lightTheme, darkTheme);
 
   mkdirp(DIST_CSS_DIR);
@@ -348,10 +990,26 @@ function buildRuntimeTokens() {
   console.log('  dist/css/dark.css');
   console.log('  dist/css/base.css');
   console.log('\nRuntime tokens done.');
+
+  return { registry, presets };
+}
+
+function parseCliArgs(argv) {
+  return {
+    write: !argv.includes('--validate-only'),
+    verifyConsumers: !argv.includes('--no-consumer-check'),
+  };
 }
 
 module.exports = { buildRuntimeTokens };
 
 if (require.main === module) {
-  buildRuntimeTokens();
+  const cliOptions = parseCliArgs(process.argv.slice(2));
+
+  try {
+    buildRuntimeTokens(cliOptions);
+  } catch (err) {
+    console.error(err);
+    process.exit(1);
+  }
 }
diff --git a/packages/tokens/source/primitives/brand.json b/packages/tokens/source/primitives/brand.json
new file mode 100644
index 000000000..e3a5db7db
--- /dev/null
+++ b/packages/tokens/source/primitives/brand.json
@@ -0,0 +1,182 @@
+{
+  "seed.brand.primary": {
+    "$value": "#6e41bf",
+    "$type": "color",
+    "description": "Base brand primary color seed."
+  },
+  "seed.brand.primary.hover": {
+    "$value": "#8b62d0",
+    "$type": "color",
+    "description": "Brand primary hover seed."
+  },
+  "seed.brand.primary.active": {
+    "$value": "#5a30a8",
+    "$type": "color",
+    "description": "Brand primary active seed."
+  },
+  "seed.brand.primary.surface": {
+    "$value": "#f3eefa",
+    "$type": "color",
+    "description": "Brand primary surface tint seed."
+  },
+  "seed.brand.primary.surface-hover": {
+    "$value": "#ece3f7",
+    "$type": "color",
+    "description": "Brand primary surface hover seed."
+  },
+  "seed.brand.primary.border": {
+    "$value": "#c4a7e6",
+    "$type": "color",
+    "description": "Brand primary border seed."
+  },
+  "seed.brand.primary.text-hover": {
+    "$value": "#8b62d0",
+    "$type": "color",
+    "description": "Brand primary text hover seed."
+  },
+  "seed.status.info": {
+    "$value": "#1890ff",
+    "$type": "color",
+    "description": "Info status base seed."
+  },
+  "seed.status.info.bg": {
+    "$value": "#e6f7ff",
+    "$type": "color",
+    "description": "Info status background seed."
+  },
+  "seed.status.info.border": {
+    "$value": "#91d5ff",
+    "$type": "color",
+    "description": "Info status border seed."
+  },
+  "seed.status.info.text": {
+    "$value": "#096dd9",
+    "$type": "color",
+    "description": "Info status text seed."
+  },
+  "seed.status.info.hover": {
+    "$value": "#40a9ff",
+    "$type": "color",
+    "description": "Info status hover seed."
+  },
+  "seed.status.info.active": {
+    "$value": "#096dd9",
+    "$type": "color",
+    "description": "Info status active seed."
+  },
+  "seed.status.success": {
+    "$value": "#52c41a",
+    "$type": "color",
+    "description": "Success status base seed."
+  },
+  "seed.status.success.bg": {
+    "$value": "#f6ffed",
+    "$type": "color",
+    "description": "Success status background seed."
+  },
+  "seed.status.success.border": {
+    "$value": "#b7eb8f",
+    "$type": "color",
+    "description": "Success status border seed."
+  },
+  "seed.status.success.text": {
+    "$value": "#49b10e",
+    "$type": "color",
+    "description": "Success status text seed."
+  },
+  "seed.status.success.hover": {
+    "$value": "#73d13d",
+    "$type": "color",
+    "description": "Success status hover seed."
+  },
+  "seed.status.success.active": {
+    "$value": "#389e0d",
+    "$type": "color",
+    "description": "Success status active seed."
+  },
+  "seed.status.warning": {
+    "$value": "#ff9800",
+    "$type": "color",
+    "description": "Warning status base seed."
+  },
+  "seed.status.warning.bg": {
+    "$value": "#fffbe6",
+    "$type": "color",
+    "description": "Warning status background seed."
+  },
+  "seed.status.warning.border": {
+    "$value": "#ffe58f",
+    "$type": "color",
+    "description": "Warning status border seed."
+  },
+  "seed.status.warning.text": {
+    "$value": "#d48806",
+    "$type": "color",
+    "description": "Warning status text seed."
+  },
+  "seed.status.warning.hover": {
+    "$value": "#ffad33",
+    "$type": "color",
+    "description": "Warning status hover seed."
+  },
+  "seed.status.warning.active": {
+    "$value": "#e68a00",
+    "$type": "color",
+    "description": "Warning status active seed."
+  },
+  "seed.status.danger": {
+    "$value": "#f44336",
+    "$type": "color",
+    "description": "Danger status base seed."
+  },
+  "seed.status.danger.bg": {
+    "$value": "#fff1f0",
+    "$type": "color",
+    "description": "Danger status background seed."
+  },
+  "seed.status.danger.border": {
+    "$value": "#ffa39e",
+    "$type": "color",
+    "description": "Danger status border seed."
+  },
+  "seed.status.danger.text": {
+    "$value": "#cf1322",
+    "$type": "color",
+    "description": "Danger status text seed."
+  },
+  "seed.status.danger.hover": {
+    "$value": "#ff7875",
+    "$type": "color",
+    "description": "Danger status hover seed."
+  },
+  "seed.status.danger.active": {
+    "$value": "#cf1322",
+    "$type": "color",
+    "description": "Danger status active seed."
+  },
+  "seed.brand.chart.1": {
+    "$value": "#6e41bf",
+    "$type": "color",
+    "description": "Chart palette seed 1."
+  },
+  "seed.brand.chart.2": {
+    "$value": "#1890ff",
+    "$type": "color",
+    "description": "Chart palette seed 2."
+  },
+  "seed.brand.chart.3": {
+    "$value": "#52c41a",
+    "$type": "color",
+    "description": "Chart palette seed 3."
+  },
+  "seed.brand.chart.4": {
+    "$value": "#ff9800",
+    "$type": "color",
+    "description": "Chart palette seed 4."
+  },
+  "seed.brand.chart.5": {
+    "$value": "#f44336",
+    "$type": "color",
+    "description": "Chart palette seed 5."
+  }
+}
diff --git a/packages/tokens/source/primitives/effects.json b/packages/tokens/source/primitives/effects.json
new file mode 100644
index 000000000..4519e0bf1
--- /dev/null
+++ b/packages/tokens/source/primitives/effects.json
@@ -0,0 +1,42 @@
+{
+  "seed.shadow.control": {
+    "$value": "none",
+    "$type": "shadow",
+    "description": "Control elevation seed."
+  },
+  "seed.shadow.button": {
+    "$value": "inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075)",
+    "$type": "shadow",
+    "description": "Button elevation seed."
+  },
+  "seed.shadow.card": {
+    "$value": "0 1px 6px rgba(0, 0, 0, 0.12)",
+    "$type": "shadow",
+    "description": "Card elevation seed."
+  },
+  "seed.shadow.focus": {
+    "$value": "0 0 0 3px rgba(110, 65, 191, 0.2)",
+    "$type": "shadow",
+    "description": "Focus ring shadow seed."
+  },
+  "seed.shadow.lg": {
+    "$value": "0 1rem 3rem rgba(0, 0, 0, 0.175)",
+    "$type": "shadow",
+    "description": "Large elevation seed."
+  },
+  "seed.shadow.modal": {
+    "$value": "0 4px 12px rgba(0, 0, 0, 0.15)",
+    "$type": "shadow",
+    "description": "Modal elevation seed."
+  },
+  "seed.shadow.popup": {
+    "$value": "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)",
+    "$type": "shadow",
+    "description": "Popup elevation seed."
+  },
+  "seed.shadow.sm": {
+    "$value": "0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)",
+    "$type": "shadow",
+    "description": "Small elevation seed."
+  }
+}
diff --git a/packages/tokens/source/primitives/size.json b/packages/tokens/source/primitives/size.json
new file mode 100644
index 000000000..cf83b7478
--- /dev/null
+++ b/packages/tokens/source/primitives/size.json
@@ -0,0 +1,67 @@
+{
+  "seed.space.base": {
+    "$value": "1rem",
+    "$type": "dimension",
+    "description": "Base spacing seed."
+  },
+  "seed.space.3": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Spacing scale seed 3."
+  },
+  "seed.space.4": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Spacing scale seed 4."
+  },
+  "seed.space.5": {
+    "$value": "16px",
+    "$type": "dimension",
+    "description": "Spacing scale seed 5."
+  },
+  "seed.size.height.sm": {
+    "$value": "24px",
+    "$type": "dimension",
+    "description": "Small height seed."
+  },
+  "seed.size.height.md": {
+    "$value": "35px",
+    "$type": "dimension",
+    "description": "Medium height seed."
+  },
+  "seed.size.height.lg": {
+    "$value": "44px",
+    "$type": "dimension",
+    "description": "Large height seed."
+  },
+  "seed.radius.base": {
+    "$value": "6px",
+    "$type": "dimension",
+    "description": "Base radius seed."
+  },
+  "seed.gap.control.sm": {
+    "$value": "4px",
+    "$type": "dimension",
+    "description": "Small control gap seed."
+  },
+  "seed.gap.control.md": {
+    "$value": "6px",
+    "$type": "dimension",
+    "description": "Medium control gap seed."
+  },
+  "seed.gap.control.lg": {
+    "$value": "8px",
+    "$type": "dimension",
+    "description": "Large control gap seed."
+  },
+  "seed.border.width.base": {
+    "$value": "1px",
+    "$type": "dimension",
+    "description": "Base border width seed."
+  },
+  "seed.layer.focus": {
+    "$value": "1",
+    "$type": "number",
+    "description": "Focused interactive layer seed."
+  }
+}
diff --git a/packages/tokens/source/primitives/surface.json b/packages/tokens/source/primitives/surface.json
new file mode 100644
index 000000000..31bc07971
--- /dev/null
+++ b/packages/tokens/source/primitives/surface.json
@@ -0,0 +1,112 @@
+{
+  "seed.surface.page": {
+    "$value": "#ffffff",
+    "$type": "color",
+    "description": "Base page surface seed."
+  },
+  "seed.surface.container": {
+    "$value": "#ffffff",
+    "$type": "color",
+    "description": "Base container surface seed."
+  },
+  "seed.surface.elevated": {
+    "$value": "#ffffff",
+    "$type": "color",
+    "description": "Elevated surface seed."
+  },
+  "seed.surface.layout": {
+    "$value": "#ffffff",
+    "$type": "color",
+    "description": "Layout surface seed."
+  },
+  "seed.surface.spotlight": {
+    "$value": "#f5f5f5",
+    "$type": "color",
+    "description": "Spotlight surface seed."
+  },
+  "seed.surface.disabled": {
+    "$value": "#f5f5f5",
+    "$type": "color",
+    "description": "Disabled surface seed."
+  },
+  "seed.surface.fill.base": {
+    "$value": "#fafafa",
+    "$type": "color",
+    "description": "Base fill surface seed."
+  },
+  "seed.surface.fill.secondary": {
+    "$value": "#f5f5f5",
+    "$type": "color",
+    "description": "Secondary fill surface seed."
+  },
+  "seed.surface.fill.tertiary": {
+    "$value": "#f0f0f0",
+    "$type": "color",
+    "description": "Tertiary fill surface seed."
+  },
+  "seed.text.base": {
+    "$value": "rgba(0, 0, 0, 0.85)",
+    "$type": "color",
+    "description": "Base text seed."
+  },
+  "seed.text.label": {
+    "$value": "rgba(0, 0, 0, 0.85)",
+    "$type": "color",
+    "description": "Label text seed."
+  },
+  "seed.text.secondary": {
+    "$value": "rgba(0, 0, 0, 0.65)",
+    "$type": "color",
+    "description": "Secondary text seed."
+  },
+  "seed.text.tertiary": {
+    "$value": "rgba(0, 0, 0, 0.45)",
+    "$type": "color",
+    "description": "Tertiary text seed."
+  },
+  "seed.text.heading": {
+    "$value": "rgba(0, 0, 0, 0.85)",
+    "$type": "color",
+    "description": "Heading text seed."
+  },
+  "seed.text.placeholder": {
+    "$value": "#bfbfbf",
+    "$type": "color",
+    "description": "Placeholder text seed."
+  },
+  "seed.text.quaternary": {
+    "$value": "rgba(0, 0, 0, 0.25)",
+    "$type": "color",
+    "description": "Quaternary text seed."
+  },
+  "seed.border.base": {
+    "$value": "#d9d9d9",
+    "$type": "color",
+    "description": "Base border seed."
+  },
+  "seed.border.light": {
+    "$value": "#f0f0f0",
+    "$type": "color",
+    "description": "Light border seed."
+  },
+  "seed.border.secondary": {
+    "$value": "#e8e8e8",
+    "$type": "color",
+    "description": "Secondary border seed."
+  },
+  "seed.border.button-default": {
+    "$value": "#d0d0d5",
+    "$type": "color",
+    "description": "Default button border seed."
+  },
+  "seed.overlay.backdrop": {
+    "$value": "rgba(0, 0, 0, 0.55)",
+    "$type": "color",
+    "description": "Overlay backdrop seed."
+  },
+  "seed.overlay.inverted": {
+    "$value": "rgba(255, 255, 255, 0.75)",
+    "$type": "color",
+    "description": "Inverted overlay seed."
+  }
+}
diff --git a/packages/tokens/source/primitives/typography.json b/packages/tokens/source/primitives/typography.json
new file mode 100644
index 000000000..def2635f8
--- /dev/null
+++ b/packages/tokens/source/primitives/typography.json
@@ -0,0 +1,77 @@
+{
+  "seed.font.family.sans": {
+    "$value": "-apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, \"Helvetica Neue\", arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
+    "$type": "font-family",
+    "description": "Base sans-serif font family seed."
+  },
+  "seed.font.family.monospace": {
+    "$value": "lucida console, consolas, monaco, andale mono, ubuntu mono, monospace",
+    "$type": "font-family",
+    "description": "Base monospace font family seed."
+  },
+  "seed.font.size.sm": {
+    "$value": "12px",
+    "$type": "dimension",
+    "description": "Small font size seed."
+  },
+  "seed.font.size.base": {
+    "$value": "14px",
+    "$type": "dimension",
+    "description": "Base font size seed."
+  },
+  "seed.font.size.lg": {
+    "$value": "16px",
+    "$type": "dimension",
+    "description": "Large font size seed."
+  },
+  "seed.font.weight.regular": {
+    "$value": "400",
+    "$type": "font-weight",
+    "description": "Regular font weight seed."
+  },
+  "seed.font.weight.medium": {
+    "$value": "500",
+    "$type": "font-weight",
+    "description": "Medium font weight seed."
+  },
+  "seed.font.weight.heading": {
+    "$value": "500",
+    "$type": "font-weight",
+    "description": "Heading font weight seed."
+  },
+  "seed.line.height.base": {
+    "$value": "1.5715",
+    "$type": "line-height",
+    "description": "Base line-height seed."
+  },
+  "seed.heading.size.h1": {
+    "$value": "2.5rem",
+    "$type": "dimension",
+    "description": "H1 heading size seed."
+  },
+  "seed.heading.size.h2": {
+    "$value": "2rem",
+    "$type": "dimension",
+    "description": "H2 heading size seed."
+  },
+  "seed.heading.size.h3": {
+    "$value": "1.75rem",
+    "$type": "dimension",
+    "description": "H3 heading size seed."
+  },
+  "seed.heading.size.h4": {
+    "$value": "1.5rem",
+    "$type": "dimension",
+    "description": "H4 heading size seed."
+  },
+  "seed.heading.size.h5": {
+    "$value": "1.25rem",
+    "$type": "dimension",
+    "description": "H5 heading size seed."
+  },
+  "seed.heading.size.h6": {
+    "$value": "1rem",
+    "$type": "dimension",
+    "description": "H6 heading size seed."
+  }
+}
diff --git a/packages/tokens/source/runtime/compile-brand-theme.source.js b/packages/tokens/source/runtime/compile-brand-theme.source.js
new file mode 100644
index 000000000..c08599597
--- /dev/null
+++ b/packages/tokens/source/runtime/compile-brand-theme.source.js
@@ -0,0 +1,489 @@
+const DEFAULT_BRAND_SEED_FIELDS = Object.freeze({
+  primary: '#6e41bf',
+  primaryForeground: '#ffffff',
+  secondary: '#f5f5f7',
+  secondaryForeground: '#16181d',
+  accent: '#f3eefa',
+  accentForeground: '#6e41bf',
+  success: '#52c41a',
+  successForeground: '#ffffff',
+  info: '#1890ff',
+  infoForeground: '#ffffff',
+  warning: '#fa8c16',
+  warningForeground: '#ffffff',
+  danger: '#dc2626',
+  dangerForeground: '#ffffff',
+  base: '#ffffff',
+  baseForeground: 'rgba(0, 0, 0, 0.85)',
+  card: '#ffffff',
+  cardForeground: '#111827',
+  popover: '#ffffff',
+  popoverForeground: '#111827',
+  muted: '#f5f5f5',
+  mutedForeground: 'rgba(0, 0, 0, 0.55)',
+  border: '#d9d9d9',
+  input: '#d9d9d9',
+  ring: '#6e41bf',
+  chart1: '#6e41bf',
+  chart2: '#1890ff',
+  chart3: '#52c41a',
+  chart4: '#fa8c16',
+  chart5: '#eb2f96',
+  sidebar: '#12131a',
+  sidebarForeground: '#f8fafc',
+  sidebarPrimary: '#6e41bf',
+  sidebarPrimaryForeground: '#ffffff',
+  sidebarAccent: '#23173f',
+  sidebarAccentForeground: '#efe8ff',
+  sidebarBorder: '#2a2d36',
+  sidebarRing: '#8b62d0',
+  fontSans: '"Instrument Sans", "Inter", system-ui, sans-serif',
+  fontMono: '"JetBrains Mono", "SFMono-Regular", monospace',
+  fontSizeBase: '14px',
+  lineHeightBase: '1.5',
+  h1Size: '40px',
+  h2Size: '32px',
+  letterSpacing: '-0.02em',
+  radius: '0.3rem',
+  shadowControl: 'none',
+  shadowCard: '0 20px 55px rgba(17, 24, 39, 0.08)',
+  shadowFocus: '0 0 0 3px rgba(110, 65, 191, 0.22)',
+  buttonRadius: '0.3rem',
+  inputRadius: '0.3rem',
+  cardRadius: '0.3rem',
+  fieldPaddingSm: '8px',
+  fieldPaddingMd: '8px',
+  fieldPaddingLg: '8px',
+  buttonPaddingSm: '8px',
+  buttonPaddingMd: '15px',
+  buttonPaddingLg: '20px',
+  fieldHeightSm: '24px',
+  fieldHeightMd: '35px',
+  fieldHeightLg: '44px',
+  buttonHeightSm: '24px',
+  buttonHeightMd: '35px',
+  buttonHeightLg: '44px',
+  cardPadding: '18px',
+});
+
+function normalizeAlpha(value) {
+  if (!Number.isFinite(value)) return 1;
+  return Math.min(1, Math.max(0, value));
+}
+
+function parseHexColor(color) {
+  const normalized = String(color).trim().replace('#', '');
+  const value =
+    normalized.length === 3
+      ? normalized
+          .split('')
+          .map((char) => `${char}${char}`)
+          .join('')
+      : normalized;
+
+  if (!/^[0-9a-f]{6}$/i.test(value)) return null;
+
+  return [
+    Number.parseInt(value.slice(0, 2), 16),
+    Number.parseInt(value.slice(2, 4), 16),
+    Number.parseInt(value.slice(4, 6), 16),
+  ];
+}
+
+function toRgba(color, alpha) {
+  const safeAlpha = normalizeAlpha(alpha);
+  const hex = parseHexColor(color);
+
+  if (hex) {
+    const [red, green, blue] = hex;
+    return `rgba(${red}, ${green}, ${blue}, ${safeAlpha})`;
+  }
+
+  const rgbMatch = String(color)
+    .trim()
+    .match(/^rgba?\(([^)]+)\)$/i);
+  if (rgbMatch) {
+    const parts = rgbMatch[1].split(',').map((part) => part.trim());
+    if (parts.length >= 3) {
+      return `rgba(${parts[0]}, ${parts[1]}, ${parts[2]}, ${safeAlpha})`;
+    }
+  }
+
+  return `color-mix(in srgb, ${color} ${Math.round(safeAlpha * 100)}%, transparent)`;
+}
+
+function mixColor(color, target, ratio) {
+  const safeRatio = Math.min(1, Math.max(0, ratio));
+  return `color-mix(in srgb, ${color} ${Math.round((1 - safeRatio) * 100)}%, ${target} ${Math.round(safeRatio * 100)}%)`;
+}
+
+function tintColor(color, amount) {
+  return mixColor(color, '#ffffff', amount);
+}
+
+function shadeColor(color, amount) {
+  return mixColor(color, '#000000', amount);
+}
+
+function softenSurface(color, mode, amount) {
+  return mode === 'dark' ? tintColor(color, amount) : shadeColor(color, amount);
+}
+
+function combineShadowValues() {
+  return (
+    Array.from(arguments)
+      .map((value) => value && String(value).trim())
+      .filter((value) => value && value !== 'none')
+      .join(', ') || 'none'
+  );
+}
+
+function buildMeta(presetId, meta) {
+  const sourceMeta = meta || {};
+  const nextMeta = {
+    ...(sourceMeta.id ? { id: sourceMeta.id } : presetId ? { id: `theme-editor-${presetId}` } : {}),
+    ...(sourceMeta.name ? { name: sourceMeta.name } : {}),
+    ...(sourceMeta.author ? { author: sourceMeta.author } : {}),
+    ...(sourceMeta.description ? { description: sourceMeta.description } : {}),
+    ...(sourceMeta.version ? { version: sourceMeta.version } : {}),
+    schemaVersion: sourceMeta.schemaVersion || 1,
+    ...(Array.isArray(sourceMeta.tags) ? { tags: [...sourceMeta.tags] } : {}),
+  };
+
+  return nextMeta;
+}
+
+function compileBrandTheme(seed, options) {
+  const fields = { ...DEFAULT_BRAND_SEED_FIELDS, ...(seed || {}) };
+  const opts = options || {};
+  const mode = opts.mode === 'dark' ? 'dark' : 'light';
+  const primaryHover = tintColor(fields.primary, mode === 'dark' ? 0.12 : 0.08);
+  const primaryActive = tintColor(fields.primary, mode === 'dark' ? 0.2 : 0.16);
+  const primarySurface = toRgba(fields.primary, mode === 'dark' ? 0.16 : 0.08);
+  const primarySurfaceActive = toRgba(fields.primary, mode === 'dark' ? 0.28 : 0.18);
+  const defaultHover = softenSurface(fields.muted, mode, mode === 'dark' ? 0.1 : 0.06);
+  const defaultActive = softenSurface(fields.muted, mode, mode === 'dark' ? 0.18 : 0.12);
+  const defaultBorderHover = softenSurface(fields.border, mode, mode === 'dark' ? 0.16 : 0.12);
+  const defaultBorderActive = softenSurface(fields.border, mode, mode === 'dark' ? 0.24 : 0.18);
+  const infoHover = tintColor(fields.info, mode === 'dark' ? 0.12 : 0.08);
+  const infoActive = tintColor(fields.info, mode === 'dark' ? 0.2 : 0.16);
+  const successHover = tintColor(fields.success, mode === 'dark' ? 0.12 : 0.08);
+  const successActive = tintColor(fields.success, mode === 'dark' ? 0.2 : 0.16);
+  const warningHover = tintColor(fields.warning, mode === 'dark' ? 0.12 : 0.08);
+  const warningActive = tintColor(fields.warning, mode === 'dark' ? 0.2 : 0.16);
+  const dangerHover = tintColor(fields.danger, mode === 'dark' ? 0.12 : 0.08);
+  const dangerActive = tintColor(fields.danger, mode === 'dark' ? 0.2 : 0.16);
+  const controlFocusShadow = combineShadowValues(fields.shadowControl, fields.shadowFocus);
+
+  return {
+    meta: buildMeta(opts.presetId, opts.meta),
+    mode,
+    extends: typeof opts.extends === 'string' ? opts.extends : mode === 'dark' ? 'tiny-dark' : 'tiny-light',
+    tokens: {
+      semantic: {
+        'color-primary': fields.primary,
+        'color-primary-hover': primaryHover,
+        'color-primary-active': primaryActive,
+        'color-primary-bg': primarySurface,
+        'color-primary-bg-hover': primarySurfaceActive,
+        'color-primary-border': fields.primary,
+        'color-primary-text-hover': fields.primary,
+        'color-success': fields.success,
+        'color-success-hover': successHover,
+        'color-success-active': successActive,
+        'color-success-bg': toRgba(fields.success, mode === 'dark' ? 0.18 : 0.12),
+        'color-success-border': toRgba(fields.success, mode === 'dark' ? 0.4 : 0.24),
+        'color-info': fields.info,
+        'color-info-hover': infoHover,
+        'color-info-active': infoActive,
+        'color-info-bg': toRgba(fields.info, mode === 'dark' ? 0.18 : 0.12),
+        'color-info-border': toRgba(fields.info, mode === 'dark' ? 0.4 : 0.24),
+        'color-warning': fields.warning,
+        'color-warning-hover': warningHover,
+        'color-warning-active': warningActive,
+        'color-warning-bg': toRgba(fields.warning, mode === 'dark' ? 0.18 : 0.12),
+        'color-warning-border': toRgba(fields.warning, mode === 'dark' ? 0.4 : 0.24),
+        'color-danger-bg': toRgba(fields.danger, mode === 'dark' ? 0.18 : 0.12),
+        'color-danger-border': toRgba(fields.danger, mode === 'dark' ? 0.4 : 0.24),
+        'color-bg': fields.base,
+        'color-bg-container': fields.card,
+        'color-bg-elevated': fields.popover,
+        'color-bg-layout': fields.base,
+        'color-bg-spotlight': fields.muted,
+        'color-fill': fields.muted,
+        'color-fill-secondary': fields.accent,
+        'color-fill-tertiary': fields.border,
+        'color-bg-disabled': fields.muted,
+        'color-text': fields.baseForeground,
+        'color-text-heading': fields.cardForeground,
+        'color-text-secondary': toRgba(fields.baseForeground, mode === 'dark' ? 0.72 : 0.68),
+        'color-text-tertiary': toRgba(fields.baseForeground, mode === 'dark' ? 0.5 : 0.46),
+        'color-text-quaternary': toRgba(fields.baseForeground, mode === 'dark' ? 0.36 : 0.32),
+        'color-border': fields.border,
+        'color-border-secondary': fields.border,
+        'color-border-light': fields.border,
+        'color-border-btn-default': fields.border,
+        'color-danger': fields.danger,
+        'color-danger-hover': dangerHover,
+        'color-danger-active': dangerActive,
+        'chart-1': fields.chart1,
+        'chart-2': fields.chart2,
+        'chart-3': fields.chart3,
+        'chart-4': fields.chart4,
+        'chart-5': fields.chart5,
+        'font-family': fields.fontSans,
+        'font-family-monospace': fields.fontMono,
+        'font-size-base': fields.fontSizeBase,
+        'line-height-base': fields.lineHeightBase,
+        'h1-font-size': fields.h1Size,
+        'h2-font-size': fields.h2Size,
+        'border-radius': fields.radius,
+        'shadow-control': fields.shadowControl,
+        'shadow-card': fields.shadowCard,
+        'shadow-focus': fields.shadowFocus,
+        'control.height.sm': fields.fieldHeightSm,
+        'control.height.md': fields.fieldHeightMd,
+        'control.height.lg': fields.fieldHeightLg,
+        'control.padding-inline.sm': fields.fieldPaddingSm,
+        'control.padding-inline.md': fields.fieldPaddingMd,
+        'control.padding-inline.lg': fields.fieldPaddingLg,
+      },
+      components: {
+        'button.solid.primary.bg': fields.primary,
+        'button.solid.primary.bg-hover': primaryHover,
+        'button.solid.primary.bg-active': primaryActive,
+        'button.solid.primary.border': fields.primary,
+        'button.solid.primary.border-hover': primaryHover,
+        'button.solid.primary.border-active': primaryActive,
+        'button.solid.primary.text': fields.primaryForeground,
+        'button.solid.primary.text-hover': fields.primaryForeground,
+        'button.solid.primary.text-active': fields.primaryForeground,
+        'button.solid.default.bg': fields.muted,
+        'button.solid.default.bg-hover': defaultHover,
+        'button.solid.default.bg-active': defaultActive,
+        'button.solid.default.border': fields.border,
+        'button.solid.default.border-hover': defaultBorderHover,
+        'button.solid.default.border-active': defaultBorderActive,
+        'button.solid.default.text': fields.baseForeground,
+        'button.solid.default.text-hover': fields.baseForeground,
+        'button.solid.default.text-active': fields.baseForeground,
+        'button.outline.default.bg': fields.base,
+        'button.outline.default.bg-hover': defaultHover,
+        'button.outline.default.bg-active': defaultActive,
+        'button.outline.default.border': fields.border,
+        'button.outline.default.border-hover': defaultBorderHover,
+        'button.outline.default.border-active': defaultBorderActive,
+        'button.outline.default.text': fields.baseForeground,
+        'button.outline.default.text-hover': fields.baseForeground,
+        'button.outline.default.text-active': fields.baseForeground,
+        'button.solid.default.shadow': fields.shadowControl,
+        'button.solid.default.shadow-hover': fields.shadowControl,
+        'button.solid.default.shadow-active': fields.shadowControl,
+        'button.outline.default.shadow': fields.shadowControl,
+        'button.outline.default.shadow-hover': fields.shadowControl,
+        'button.outline.default.shadow-active': fields.shadowControl,
+        'button.radius': fields.buttonRadius,
+        'button.height.sm': fields.buttonHeightSm,
+        'button.height.md': fields.buttonHeightMd,
+        'button.height.lg': fields.buttonHeightLg,
+        'button.padding-inline-sm': fields.buttonPaddingSm,
+        'button.padding-inline-md': fields.buttonPaddingMd,
+        'button.padding-inline-lg': fields.buttonPaddingLg,
+        'card.bg': fields.card,
+        'card.bg.filled': fields.secondary,
+        'card.border': fields.border,
+        'card.radius': fields.cardRadius,
+        'card.shadow': fields.shadowCard,
+        'card.shadow.hover': fields.shadowCard,
+        'card.header-color': fields.cardForeground,
+        'card.body-padding': fields.cardPadding,
+        'card.header-padding': fields.cardPadding,
+        'input.bg': fields.base,
+        'input.color': fields.baseForeground,
+        'input.border': fields.input,
+        'input.shadow': fields.shadowControl,
+        'input.border.hover': fields.ring,
+        'input.border.focus': fields.ring,
+        'input.shadow.focus': controlFocusShadow,
+        'input.radius': fields.inputRadius,
+        'input.height.sm': fields.fieldHeightSm,
+        'input.height.md': fields.fieldHeightMd,
+        'input.height.lg': fields.fieldHeightLg,
+        'input.padding-inline-sm': fields.fieldPaddingSm,
+        'input.padding-inline-md': fields.fieldPaddingMd,
+        'input.padding-inline-lg': fields.fieldPaddingLg,
+        'select.bg': fields.base,
+        'select.color': fields.baseForeground,
+        'select.border': fields.input,
+        'select.shadow': fields.shadowControl,
+        'select.border.hover': fields.ring,
+        'select.border.focus': fields.ring,
+        'select.shadow.focus': controlFocusShadow,
+        'select.radius': fields.inputRadius,
+        'select.height.sm': fields.fieldHeightSm,
+        'select.height.md': fields.fieldHeightMd,
+        'select.height.lg': fields.fieldHeightLg,
+        'select.padding-inline-start.sm': fields.fieldPaddingSm,
+        'select.padding-inline-start.md': fields.fieldPaddingMd,
+        'select.padding-inline-start.lg': fields.fieldPaddingLg,
+        'select.dropdown-bg': fields.popover,
+        'select.option.active-bg': fields.muted,
+        'select.option.selected-bg': fields.accent,
+        'table.radius': fields.radius,
+        'picker.input-bg': fields.base,
+        'picker.input-border': fields.input,
+        'picker.input-border-hover': fields.ring,
+        'picker.input-border-focus': fields.ring,
+        'picker.input-shadow-focus': controlFocusShadow,
+        'picker.input-color': fields.baseForeground,
+        'picker.input-color-placeholder': fields.mutedForeground,
+        'picker.input-color-muted': fields.mutedForeground,
+        'picker.input-radius': fields.inputRadius,
+        'picker.input-padding.sm': `0 ${fields.fieldPaddingSm}`,
+        'picker.input-padding.md': `0 ${fields.fieldPaddingMd}`,
+        'picker.input-padding.lg': `0 ${fields.fieldPaddingLg}`,
+        'picker.dropdown-bg': fields.popover,
+        'picker.dropdown-radius': fields.cardRadius,
+        'date-picker.header-border': fields.border,
+        'date-picker.header-button-color': fields.mutedForeground,
+        'date-picker.header-button-color-hover': fields.primary,
+        'date-picker.header-action-hover-bg': fields.muted,
+        'date-picker.header-action-focus-ring': fields.ring,
+        'date-picker.today-color': fields.primary,
+        'date-picker.today-color-hover': fields.primary,
+        'date-picker.today-hover-bg': fields.accent,
+        'date-picker.today-active-bg': fields.muted,
+        'date-picker.today-focus-ring': fields.ring,
+        'picker.cell-hover-bg': fields.muted,
+        'date-picker.cell-selected-bg': fields.primary,
+        'date-picker.cell-selected-color': fields.primaryForeground,
+        'date-picker.cell-selected-hover-bg': fields.primary,
+        'date-picker.cell-today-border': fields.primary,
+        'date-picker.cell-radius': fields.inputRadius,
+        'date-picker.panel-item-hover-bg': fields.muted,
+        'date-picker.panel-item-current-color': fields.primary,
+        'date-picker.panel-item-current-border': fields.primary,
+        'date-picker.panel-item-selected-bg': fields.accent,
+        'date-picker.panel-item-selected-color': fields.primary,
+        'date-picker.panel-item-selected-hover-bg': fields.muted,
+        'date-picker.range-bg': fields.accent,
+        'time-picker.column-border': fields.border,
+        'time-picker.cell-bg-selected': fields.primary,
+        'time-picker.cell-bg-selected-hover': fields.primary,
+        'time-picker.ok-button-bg': fields.primary,
+        'time-picker.ok-button-bg-hover': fields.primary,
+        'time-picker.ok-button-color': fields.primaryForeground,
+        'time-picker.ok-button-radius': fields.buttonRadius,
+        'calendar.bg': fields.card,
+        'calendar.border': fields.border,
+        'calendar.radius': fields.cardRadius,
+        'calendar.cell-hover-bg': fields.muted,
+        'calendar.header-action-color': fields.mutedForeground,
+        'calendar.header-action-color-hover': fields.primary,
+        'calendar.header-action-hover-bg': fields.muted,
+        'calendar.header-action-focus-ring': fields.ring,
+        'calendar.header-label-color': fields.cardForeground,
+        'calendar.header-label-color-hover': fields.primary,
+        'calendar.header-label-hover-bg': fields.muted,
+        'calendar.header-label-focus-ring': fields.ring,
+        'calendar.cell-header-color': fields.mutedForeground,
+        'calendar.week-number-color': fields.mutedForeground,
+        'calendar.cell-color': fields.cardForeground,
+        'calendar.cell-color-muted': fields.mutedForeground,
+        'calendar.cell-disabled-bg': fields.muted,
+        'calendar.cell-today-border': fields.primary,
+        'calendar.cell-selected-bg': fields.primary,
+        'calendar.cell-selected-color': fields.primaryForeground,
+        'calendar.range-bg': fields.accent,
+        'calendar.cell-focus-outline': fields.shadowFocus,
+        'calendar.cell-dot-color': fields.primary,
+        'calendar.panel-item-radius': fields.inputRadius,
+        'calendar.panel-item-hover-bg': fields.muted,
+        'calendar.panel-item-selected-color': fields.primaryForeground,
+        'calendar.panel-item-selected-bg': fields.primary,
+        'calendar.panel-item-selected-hover-bg': fields.primary,
+        'calendar.today-color': fields.primary,
+        'calendar.today-color-hover': fields.primary,
+        'calendar.today-hover-bg': fields.accent,
+        'calendar.today-active-bg': fields.muted,
+        'calendar.today-focus-ring': fields.ring,
+        'cascader.height.sm': fields.fieldHeightSm,
+        'cascader.height.md': fields.fieldHeightMd,
+        'cascader.height.lg': fields.fieldHeightLg,
+        'cascader.bg': fields.base,
+        'cascader.border': fields.input,
+        'cascader.border-hover': fields.ring,
+        'cascader.border-focus': fields.ring,
+        'cascader.shadow-focus': controlFocusShadow,
+        'cascader.radius': fields.inputRadius,
+        'cascader.padding.sm': `0 calc(${fields.fieldPaddingSm} + 20px) 0 ${fields.fieldPaddingSm}`,
+        'cascader.padding.md': `0 calc(${fields.fieldPaddingMd} + 20px) 0 ${fields.fieldPaddingMd}`,
+        'cascader.padding.lg': `0 calc(${fields.fieldPaddingLg} + 20px) 0 ${fields.fieldPaddingLg}`,
+        'native-select.bg': fields.base,
+        'native-select.border': fields.input,
+        'native-select.border-hover': fields.ring,
+        'native-select.border-focus': fields.ring,
+        'native-select.shadow-focus': controlFocusShadow,
+        'native-select.radius': fields.inputRadius,
+        'checkbox.bg': fields.base,
+        'checkbox.border': fields.input,
+        'checkbox.shadow': fields.shadowControl,
+        'checkbox.border.hover': fields.ring,
+        'checkbox.radius': fields.radius,
+        'checkbox.bg.checked': fields.primary,
+        'checkbox.border.checked': fields.primary,
+        'checkbox.indicator-color': fields.primaryForeground,
+        'radio.bg': fields.base,
+        'radio.border': fields.input,
+        'radio.shadow': fields.shadowControl,
+        'radio.border.checked': fields.primary,
+        'radio.dot-bg': fields.primary,
+        'switch.bg': fields.mutedForeground,
+        'switch.bg.checked': fields.primary,
+        'switch.thumb-border': fields.mutedForeground,
+        'switch.thumb-border.checked': fields.primary,
+        'input-number.height.sm': fields.fieldHeightSm,
+        'input-number.height.md': fields.fieldHeightMd,
+        'input-number.height.lg': fields.fieldHeightLg,
+        'segmented.bg': fields.muted,
+        'segmented.item-bg-hover': fields.secondary,
+        'segmented.item-bg-selected': fields.card,
+        'segmented.item-color': fields.mutedForeground,
+        'segmented.item-color-selected': fields.baseForeground,
+        'segmented.item-shadow-focus': fields.shadowFocus,
+        'segmented.radius': fields.radius,
+        'tag.bg': fields.secondary,
+        'tag.color': fields.secondaryForeground,
+        'tag.border': fields.border,
+        'tag.link-color': fields.mutedForeground,
+        'tag.checkable-bg': fields.card,
+        'tag.checkable-color': fields.primary,
+        'tag.checkable-border': fields.border,
+        'tag.checkable-bg.checked': fields.primary,
+        'tag.checkable-color.checked': fields.primaryForeground,
+        'tag.checkable-border.checked': fields.primary,
+        'progress.stroke-color.primary': fields.primary,
+        'progress.stroke-color.success': fields.success,
+        'progress.stroke-color.info': fields.info,
+        'progress.stroke-color.warning': fields.warning,
+        'progress.stroke-color.danger': fields.danger,
+        'progress.text-color': fields.baseForeground,
+        'progress.trail-bg': fields.muted,
+        'progress.circle-trail': fields.muted,
+        'table.color': fields.baseForeground,
+        'table.border': fields.border,
+        'table.header-bg': fields.secondary,
+        'table.row-hover-bg': fields.muted,
+        'table.cell-sortable-hover-bg': fields.muted,
+        'table.row-selected-bg': toRgba(fields.primary, mode === 'dark' ? 0.22 : 0.08),
+        'table.sorter-icon-color': fields.mutedForeground,
+        'table.sorter-icon-color.active': fields.primary,
+        'table.empty-color': fields.mutedForeground,
+        'layout.sidebar-bg': fields.sidebar,
+        'layout.sidebar-color': fields.sidebarForeground,
+        'layout.sidebar-light-bg': fields.sidebar,
+        'layout.sidebar-light-color': fields.sidebarForeground,
+      },
+    },
+  };
+}
diff --git a/packages/tokens/source/schema/theme.schema.json b/packages/tokens/source/schema/theme.schema.json
index 8c87b4eeb..901501389 100644
--- a/packages/tokens/source/schema/theme.schema.json
+++ b/packages/tokens/source/schema/theme.schema.json
@@ -92,7 +92,7 @@
     },
     "tokenKey": {
       "type": "string",
-      "pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*(?:\\.[a-z0-9]+(?:-[a-z0-9]+)*){0,2}$"
+      "pattern": "^[a-z0-9]+(?:-[a-z0-9]+)*(?:\\.[a-z0-9]+(?:-[a-z0-9]+)*)*$"
     },
     "tokenValue": {
       "oneOf": [
diff --git a/packages/tokens/source/semantic/charts.json b/packages/tokens/source/semantic/charts.json
index 146008a42..e3966ca39 100644
--- a/packages/tokens/source/semantic/charts.json
+++ b/packages/tokens/source/semantic/charts.json
@@ -1,26 +1,26 @@
 {
   "chart-1": {
-    "$value": "#6e41bf",
+    "$value": "{seed.brand.chart.1}",
     "$type": "color",
     "description": "Chart palette color 1."
   },
   "chart-2": {
-    "$value": "#1890ff",
+    "$value": "{seed.brand.chart.2}",
     "$type": "color",
     "description": "Chart palette color 2."
   },
   "chart-3": {
-    "$value": "#52c41a",
+    "$value": "{seed.brand.chart.3}",
     "$type": "color",
     "description": "Chart palette color 3."
   },
   "chart-4": {
-    "$value": "#ff9800",
+    "$value": "{seed.brand.chart.4}",
     "$type": "color",
     "description": "Chart palette color 4."
   },
   "chart-5": {
-    "$value": "#f44336",
+    "$value": "{seed.brand.chart.5}",
     "$type": "color",
     "description": "Chart palette color 5."
   }
diff --git a/packages/tokens/source/semantic/colors.json b/packages/tokens/source/semantic/colors.json
index fa5e36b95..7c131bca9 100644
--- a/packages/tokens/source/semantic/colors.json
+++ b/packages/tokens/source/semantic/colors.json
@@ -1,266 +1,266 @@
 {
   "color-bg-container": {
-    "$value": "#ffffff",
+    "$value": "{seed.surface.container}",
     "$type": "color",
     "description": "Default container background color."
   },
   "color-bg": {
-    "$value": "#fff",
+    "$value": "{seed.surface.page}",
     "$type": "color",
     "description": "Page background color."
   },
   "color-bg-elevated": {
-    "$value": "#fff",
+    "$value": "{seed.surface.elevated}",
     "$type": "color",
     "description": "Elevated surface background color."
   },
   "color-bg-layout": {
-    "$value": "#fff",
+    "$value": "{seed.surface.layout}",
     "$type": "color",
     "description": "Layout background color."
   },
   "color-bg-spotlight": {
-    "$value": "#f5f5f5",
+    "$value": "{seed.surface.spotlight}",
     "$type": "color",
     "description": "Spotlight surface background color."
   },
   "color-bg-disabled": {
-    "$value": "#f5f5f5",
+    "$value": "{seed.surface.disabled}",
     "$type": "color",
     "description": "Disabled surface background color."
   },
   "color-fill": {
-    "$value": "#fafafa",
+    "$value": "{seed.surface.fill.base}",
     "$type": "color",
     "description": "Secondary filled surface color."
   },
   "color-text": {
-    "$value": "rgba(0, 0, 0, 0.85)",
+    "$value": "{seed.text.base}",
     "$type": "color",
     "description": "Default text color."
   },
   "color-text-label": {
-    "$value": "rgba(0, 0, 0, 0.85)",
+    "$value": "{seed.text.label}",
     "$type": "color",
     "description": "Label text color."
   },
   "color-text-secondary": {
-    "$value": "rgba(0, 0, 0, 0.65)",
+    "$value": "{seed.text.secondary}",
     "$type": "color",
     "description": "Secondary text color."
   },
   "color-text-tertiary": {
-    "$value": "rgba(0, 0, 0, 0.45)",
+    "$value": "{seed.text.tertiary}",
     "$type": "color",
     "description": "Tertiary text color."
   },
   "color-text-heading": {
-    "$value": "rgba(0, 0, 0, 0.85)",
+    "$value": "{seed.text.heading}",
     "$type": "color",
     "description": "Heading text color."
   },
   "color-text-placeholder": {
-    "$value": "#bfbfbf",
+    "$value": "{seed.text.placeholder}",
     "$type": "color",
     "description": "Placeholder text color."
   },
   "color-text-quaternary": {
-    "$value": "rgba(0, 0, 0, 0.25)",
+    "$value": "{seed.text.quaternary}",
     "$type": "color",
     "description": "Low-emphasis text color."
   },
   "color-border": {
-    "$value": "#d9d9d9",
+    "$value": "{seed.border.base}",
     "$type": "color",
     "description": "Default border color."
   },
   "color-border-light": {
-    "$value": "#f0f0f0",
+    "$value": "{seed.border.light}",
     "$type": "color",
     "description": "Light border color."
   },
   "color-border-secondary": {
-    "$value": "#e8e8e8",
+    "$value": "{seed.border.secondary}",
     "$type": "color",
     "description": "Secondary border color."
   },
   "color-border-btn-default": {
-    "$value": "#d0d0d5",
+    "$value": "{seed.border.button-default}",
     "$type": "color",
     "description": "Default button border color."
   },
   "color-primary": {
-    "$value": "#6e41bf",
+    "$value": "{seed.brand.primary}",
     "$type": "color",
     "description": "Primary brand color."
   },
   "color-primary-hover": {
-    "$value": "#8b62d0",
+    "$value": "{seed.brand.primary.hover}",
     "$type": "color",
     "description": "Primary hover color."
   },
   "color-primary-active": {
-    "$value": "#5a30a8",
+    "$value": "{seed.brand.primary.active}",
     "$type": "color",
     "description": "Primary active color."
   },
   "color-primary-bg": {
-    "$value": "#f3eefa",
+    "$value": "{seed.brand.primary.surface}",
     "$type": "color",
     "description": "Primary tinted background color."
   },
   "color-primary-border": {
-    "$value": "#c4a7e6",
+    "$value": "{seed.brand.primary.border}",
     "$type": "color",
     "description": "Primary border color."
   },
   "color-primary-bg-hover": {
-    "$value": "#ece3f7",
+    "$value": "{seed.brand.primary.surface-hover}",
     "$type": "color",
     "description": "Primary tinted background hover color."
   },
   "color-primary-text-hover": {
-    "$value": "#8b62d0",
+    "$value": "{seed.brand.primary.text-hover}",
     "$type": "color",
     "description": "Primary text hover color."
   },
   "color-info": {
-    "$value": "#1890ff",
+    "$value": "{seed.status.info}",
     "$type": "color",
     "description": "Info semantic color."
   },
   "color-info-bg": {
-    "$value": "#e6f7ff",
+    "$value": "{seed.status.info.bg}",
     "$type": "color",
     "description": "Info background color."
   },
   "color-info-border": {
-    "$value": "#91d5ff",
+    "$value": "{seed.status.info.border}",
     "$type": "color",
     "description": "Info border color."
   },
   "color-info-text": {
-    "$value": "#096dd9",
+    "$value": "{seed.status.info.text}",
     "$type": "color",
     "description": "Info text color."
   },
   "color-info-hover": {
-    "$value": "#40a9ff",
+    "$value": "{seed.status.info.hover}",
     "$type": "color",
     "description": "Info hover color."
   },
   "color-info-active": {
-    "$value": "#096dd9",
+    "$value": "{seed.status.info.active}",
     "$type": "color",
     "description": "Info active color."
   },
   "color-success": {
-    "$value": "#52c41a",
+    "$value": "{seed.status.success}",
     "$type": "color",
     "description": "Success semantic color."
   },
   "color-success-bg": {
-    "$value": "#f6ffed",
+    "$value": "{seed.status.success.bg}",
     "$type": "color",
     "description": "Success background color."
   },
   "color-success-border": {
-    "$value": "#b7eb8f",
+    "$value": "{seed.status.success.border}",
     "$type": "color",
     "description": "Success border color."
   },
   "color-success-text": {
-    "$value": "#49b10e",
+    "$value": "{seed.status.success.text}",
     "$type": "color",
     "description": "Success text color."
   },
   "color-success-hover": {
-    "$value": "#73d13d",
+    "$value": "{seed.status.success.hover}",
     "$type": "color",
     "description": "Success hover color."
   },
   "color-success-active": {
-    "$value": "#389e0d",
+    "$value": "{seed.status.success.active}",
     "$type": "color",
     "description": "Success active color."
   },
   "color-warning": {
-    "$value": "#ff9800",
+    "$value": "{seed.status.warning}",
     "$type": "color",
     "description": "Warning semantic color."
   },
   "color-warning-bg": {
-    "$value": "#fffbe6",
+    "$value": "{seed.status.warning.bg}",
     "$type": "color",
     "description": "Warning background color."
   },
   "color-warning-border": {
-    "$value": "#ffe58f",
+    "$value": "{seed.status.warning.border}",
     "$type": "color",
     "description": "Warning border color."
   },
   "color-warning-text": {
-    "$value": "#d48806",
+    "$value": "{seed.status.warning.text}",
     "$type": "color",
     "description": "Warning text color."
   },
   "color-warning-hover": {
-    "$value": "#ffad33",
+    "$value": "{seed.status.warning.hover}",
     "$type": "color",
     "description": "Warning hover color."
   },
   "color-warning-active": {
-    "$value": "#e68a00",
+    "$value": "{seed.status.warning.active}",
     "$type": "color",
     "description": "Warning active color."
   },
   "color-danger": {
-    "$value": "#f44336",
+    "$value": "{seed.status.danger}",
     "$type": "color",
     "description": "Danger semantic color."
   },
   "color-danger-bg": {
-    "$value": "#fff1f0",
+    "$value": "{seed.status.danger.bg}",
     "$type": "color",
     "description": "Danger background color."
   },
   "color-danger-border": {
-    "$value": "#ffa39e",
+    "$value": "{seed.status.danger.border}",
     "$type": "color",
     "description": "Danger border color."
   },
   "color-danger-text": {
-    "$value": "#cf1322",
+    "$value": "{seed.status.danger.text}",
     "$type": "color",
     "description": "Danger text color."
   },
   "color-danger-hover": {
-    "$value": "#ff7875",
+    "$value": "{seed.status.danger.hover}",
     "$type": "color",
     "description": "Danger hover color."
   },
   "color-danger-active": {
-    "$value": "#cf1322",
+    "$value": "{seed.status.danger.active}",
     "$type": "color",
     "description": "Danger active color."
   },
   "color-fill-secondary": {
-    "$value": "#f5f5f5",
+    "$value": "{seed.surface.fill.secondary}",
     "$type": "color",
     "description": "Secondary fill color."
   },
   "color-fill-tertiary": {
-    "$value": "#f0f0f0",
+    "$value": "{seed.surface.fill.tertiary}",
     "$type": "color",
     "description": "Tertiary fill color."
   },
   "color-overlay-bg": {
-    "$value": "rgba(0, 0, 0, 0.55)",
+    "$value": "{seed.overlay.backdrop}",
     "$type": "color",
     "description": "Overlay background color."
   },
   "color-overlay-inverted": {
-    "$value": "rgba(255, 255, 255, 0.75)",
+    "$value": "{seed.overlay.inverted}",
     "$type": "color",
     "description": "Inverted overlay color."
   }
diff --git a/packages/tokens/source/semantic/control-group.json b/packages/tokens/source/semantic/control-group.json
index d06d04bb3..fd43313ff 100644
--- a/packages/tokens/source/semantic/control-group.json
+++ b/packages/tokens/source/semantic/control-group.json
@@ -5,7 +5,7 @@
     "description": "Radius applied to the outer corners of grouped controls."
   },
   "control-group.border-width": {
-    "$value": "1px",
+    "$value": "{seed.border.width.base}",
     "$type": "dimension",
     "description": "Shared border width used when attaching grouped controls."
   },
@@ -15,7 +15,7 @@
     "description": "Divider color between grouped controls."
   },
   "control-group.focus-z-index": {
-    "$value": "1",
+    "$value": "{seed.layer.focus}",
     "$type": "number",
     "description": "Stacking level for hovered or focused grouped controls."
   }
diff --git a/packages/tokens/source/semantic/control.json b/packages/tokens/source/semantic/control.json
index dfbe8d5d5..592c6e760 100644
--- a/packages/tokens/source/semantic/control.json
+++ b/packages/tokens/source/semantic/control.json
@@ -50,17 +50,17 @@
     "description": "Large control horizontal padding."
   },
   "control.gap.sm": {
-    "$value": "4px",
+    "$value": "{seed.gap.control.sm}",
     "$type": "dimension",
     "description": "Small control content gap."
   },
   "control.gap.md": {
-    "$value": "6px",
+    "$value": "{seed.gap.control.md}",
     "$type": "dimension",
     "description": "Medium control content gap."
   },
   "control.gap.lg": {
-    "$value": "8px",
+    "$value": "{seed.gap.control.lg}",
     "$type": "dimension",
     "description": "Large control content gap."
   }
diff --git a/packages/tokens/source/semantic/effects.json b/packages/tokens/source/semantic/effects.json
index 76ff5b97a..0affd45cb 100644
--- a/packages/tokens/source/semantic/effects.json
+++ b/packages/tokens/source/semantic/effects.json
@@ -1,41 +1,41 @@
 {
   "shadow-control": {
-    "$value": "none",
+    "$value": "{seed.shadow.control}",
     "$type": "shadow",
     "description": "Control surface shadow used by input-like components and neutral buttons."
   },
   "shadow-btn": {
-    "$value": "inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075)",
+    "$value": "{seed.shadow.button}",
     "$type": "shadow",
     "description": "Button elevation shadow."
   },
   "shadow-card": {
-    "$value": "0 1px 6px rgba(0, 0, 0, 0.12)",
+    "$value": "{seed.shadow.card}",
     "$type": "shadow",
     "description": "Card elevation shadow."
   },
   "shadow-focus": {
-    "$value": "0 0 0 3px rgba(110, 65, 191, 0.2)",
+    "$value": "{seed.shadow.focus}",
     "$type": "shadow",
     "description": "Default focus ring shadow."
   },
   "shadow-lg": {
-    "$value": "0 1rem 3rem rgba(0, 0, 0, 0.175)",
+    "$value": "{seed.shadow.lg}",
     "$type": "shadow",
     "description": "Large elevation shadow."
   },
   "shadow-modal": {
-    "$value": "0 4px 12px rgba(0, 0, 0, 0.15)",
+    "$value": "{seed.shadow.modal}",
     "$type": "shadow",
     "description": "Modal elevation shadow."
   },
   "shadow-popup": {
-    "$value": "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)",
+    "$value": "{seed.shadow.popup}",
     "$type": "shadow",
     "description": "Popup elevation shadow."
   },
   "shadow-sm": {
-    "$value": "0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)",
+    "$value": "{seed.shadow.sm}",
     "$type": "shadow",
     "description": "Small elevation shadow."
   }
diff --git a/packages/tokens/source/semantic/size.json b/packages/tokens/source/semantic/size.json
index 6a325aa92..039d99a54 100644
--- a/packages/tokens/source/semantic/size.json
+++ b/packages/tokens/source/semantic/size.json
@@ -1,21 +1,21 @@
 {
   "height-sm": {
-    "$value": "24px",
+    "$value": "{seed.size.height.sm}",
     "$type": "dimension",
     "description": "Small control height."
   },
   "height-md": {
-    "$value": "35px",
+    "$value": "{seed.size.height.md}",
     "$type": "dimension",
     "description": "Medium control height."
   },
   "height-lg": {
-    "$value": "44px",
+    "$value": "{seed.size.height.lg}",
     "$type": "dimension",
     "description": "Large control height."
   },
   "border-radius": {
-    "$value": "6px",
+    "$value": "{seed.radius.base}",
     "$type": "dimension",
     "description": "Default border radius."
   }
diff --git a/packages/tokens/source/semantic/spacing.json b/packages/tokens/source/semantic/spacing.json
index a8c82934e..bf216f9db 100644
--- a/packages/tokens/source/semantic/spacing.json
+++ b/packages/tokens/source/semantic/spacing.json
@@ -1,21 +1,21 @@
 {
   "spacer": {
-    "$value": "1rem",
+    "$value": "{seed.space.base}",
     "$type": "dimension",
     "description": "Base spacing unit."
   },
   "spacing-3": {
-    "$value": "8px",
+    "$value": "{seed.space.3}",
     "$type": "dimension",
     "description": "Spacing scale step 3."
   },
   "spacing-4": {
-    "$value": "12px",
+    "$value": "{seed.space.4}",
     "$type": "dimension",
     "description": "Spacing scale step 4."
   },
   "spacing-5": {
-    "$value": "16px",
+    "$value": "{seed.space.5}",
     "$type": "dimension",
     "description": "Spacing scale step 5."
   }
diff --git a/packages/tokens/source/semantic/typography.json b/packages/tokens/source/semantic/typography.json
index 44db207c0..72dfce1bb 100644
--- a/packages/tokens/source/semantic/typography.json
+++ b/packages/tokens/source/semantic/typography.json
@@ -1,76 +1,76 @@
 {
   "font-family": {
-    "$value": "-apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, \"Helvetica Neue\", arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
+    "$value": "{seed.font.family.sans}",
     "$type": "font-family",
     "description": "Default font family."
   },
   "font-family-monospace": {
-    "$value": "lucida console, consolas, monaco, andale mono, ubuntu mono, monospace",
+    "$value": "{seed.font.family.monospace}",
     "$type": "font-family",
     "description": "Monospace font family."
   },
   "font-size-sm": {
-    "$value": "12px",
+    "$value": "{seed.font.size.sm}",
     "$type": "dimension",
     "description": "Small font size."
   },
   "font-size-base": {
-    "$value": "14px",
+    "$value": "{seed.font.size.base}",
     "$type": "dimension",
     "description": "Base font size."
   },
   "font-size-lg": {
-    "$value": "16px",
+    "$value": "{seed.font.size.lg}",
     "$type": "dimension",
     "description": "Large font size."
   },
   "font-weight": {
-    "$value": "400",
+    "$value": "{seed.font.weight.regular}",
     "$type": "font-weight",
     "description": "Default font weight."
   },
   "font-weight-medium": {
-    "$value": "500",
+    "$value": "{seed.font.weight.medium}",
     "$type": "font-weight",
     "description": "Medium font weight."
   },
   "headings-font-weight": {
-    "$value": "500",
+    "$value": "{seed.font.weight.heading}",
     "$type": "font-weight",
     "description": "Heading font weight."
   },
   "line-height-base": {
-    "$value": "1.5715",
+    "$value": "{seed.line.height.base}",
     "$type": "line-height",
     "description": "Base line height."
   },
   "h1-font-size": {
-    "$value": "2.5rem",
+    "$value": "{seed.heading.size.h1}",
     "$type": "dimension",
     "description": "H1 font size."
   },
   "h2-font-size": {
-    "$value": "2rem",
+    "$value": "{seed.heading.size.h2}",
     "$type": "dimension",
     "description": "H2 font size."
   },
   "h3-font-size": {
-    "$value": "1.75rem",
+    "$value": "{seed.heading.size.h3}",
     "$type": "dimension",
     "description": "H3 font size."
   },
   "h4-font-size": {
-    "$value": "1.5rem",
+    "$value": "{seed.heading.size.h4}",
     "$type": "dimension",
     "description": "H4 font size."
   },
   "h5-font-size": {
-    "$value": "1.25rem",
+    "$value": "{seed.heading.size.h5}",
     "$type": "dimension",
     "description": "H5 font size."
   },
   "h6-font-size": {
-    "$value": "1rem",
+    "$value": "{seed.heading.size.h6}",
     "$type": "dimension",
     "description": "H6 font size."
   }
diff --git a/packages/tokens/source/themes/dark.json b/packages/tokens/source/themes/dark.json
index df42adab8..059a013d3 100644
--- a/packages/tokens/source/themes/dark.json
+++ b/packages/tokens/source/themes/dark.json
@@ -99,7 +99,7 @@
       "cascader.selected-bg": "rgba(144, 101, 208, 0.1)",
       "checkbox.bg": "#1f1f1f",
       "checkbox.border": "#424242",
-      "checkbox.disabled-bg": "#2a2a2a",
+      "checkbox.bg.disabled": "#2a2a2a",
       "collapse.bg": "#262626",
       "collapse.border-color": "#424242",
       "collapse.borderless-divider-color": "#363636",
@@ -157,13 +157,14 @@
       "notification.bg": "#1f1f1f",
       "notification.close-color": "rgba(255, 255, 255, 0.2)",
       "notification.close-hover": "rgba(255, 255, 255, 0.7)",
-      "pagination.bg": "#1f1f1f",
+      "pagination.item-bg": "#1f1f1f",
       "pagination.disabled-active-bg": "#424242",
       "pagination.disabled-bg": "#2a2a2a",
-      "pagination.disabled-color": "#525252",
-      "picker.cell-disabled-bg": "#2a2a2a",
+      "pagination.disabled-color.md": "#525252",
+      "pagination.disabled-color.sm": "#525252",
+      "date-picker.cell-disabled-bg": "#2a2a2a",
       "picker.cell-hover-bg": "#2a2a2a",
-      "picker.cell-selected-hover-bg": "#7a50bf",
+      "date-picker.cell-selected-hover-bg": "#7a50bf",
       "picker.clear-bg": "#1f1f1f",
       "picker.dropdown-bg": "#1f1f1f",
       "picker.input-bg": "#1f1f1f",
@@ -175,16 +176,16 @@
       "progress.text-color": "rgba(255, 255, 255, 0.65)",
       "progress.trail-bg": "#363636",
       "radio.bg": "#1f1f1f",
-      "radio.disabled-border": "#424242",
-      "radio.disabled-dot": "rgba(255, 255, 255, 0.2)",
+      "radio.border.disabled": "#424242",
+      "radio.dot-bg.disabled": "rgba(255, 255, 255, 0.2)",
       "result.content-bg": "#262626",
       "segmented.bg": "#2a2a2a",
       "segmented.item-bg-hover": "#303030",
       "segmented.item-bg-selected": "#1f1f1f",
       "select.dropdown-bg": "#1f1f1f",
-      "select.option-active-bg": "#2a2a2a",
-      "select.option-disabled-bg": "#1f1f1f",
-      "select.option-selected-bg": "#1a1325",
+      "select.option.active-bg": "#2a2a2a",
+      "select.option.disabled-bg": "#1f1f1f",
+      "select.option.selected-bg": "#1a1325",
       "skeleton.bg": "#303030",
       "skeleton.shimmer": "linear-gradient(to right, #303030 25%, #3a3a3a 37%, #303030 63%)",
       "slider.dot-active-border": "#9065d0",
@@ -216,8 +217,8 @@
       "switch.thumb-shadow": "0 1px 3px 1px rgba(0, 0, 0, 0.4)",
       "table.border": "#363636",
       "table.header-bg": "#262626",
-      "table.hover": "#2a2a2a",
-      "table.selected-bg": "rgba(144, 101, 208, 0.1)",
+      "table.row-hover-bg": "#2a2a2a",
+      "table.row-selected-bg": "rgba(144, 101, 208, 0.1)",
       "tabs.border": "#303030",
       "tabs.card-active-bg": "#1f1f1f",
       "tabs.card-bg": "#262626",
@@ -276,7 +277,7 @@
       "upload.dragger-bg": "#262626",
       "upload.dragger-border": "#424242",
       "upload.dragger-hover-bg": "#303030",
-      "upload.item-hover-bg": "#2a2a2a"
+      "upload.list-item-hover-bg": "#2a2a2a"
     }
   }
 }