jouw-stem__design-system 0.1.0

package/tokens/presets/minimalist-saas.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "../brand.schema.json",
+  "$comment": "Minimalist SaaS preset — neutral primary, blue accent. Conveys clarity, restraint, focus. Apply via the apply-preset skill or by overwriting tokens/brand.json with this content.",
+
+  "name": "Minimalist SaaS",
+
+  "palette": {
+    "primary":   { "ramp": "neutral" },
+    "secondary": { "ramp": "blue" },
+    "accent":    { "ramp": "purple" },
+    "neutral":   { "ramp": "neutral" },
+    "success":   { "ramp": "green" },
+    "warning":   { "ramp": "amber" },
+    "danger":    { "ramp": "red" },
+    "info":      { "ramp": "blue" }
+  },
+
+  "fonts": {
+    "sans":    "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    "display": "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    "mono":    "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace",
+    "faces":   []
+  },
+
+  "feel": {
+    "radiusScale":  "linear",
+    "shadowDepth":  "subtle",
+    "useGradients": false
+  }
+}

package/tokens/presets/serious-fintech.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "../brand.schema.json",
+  "$comment": "Serious fintech preset — navy primary, teal accent. Conveys trust, stability, calm. Apply via the apply-preset skill or by overwriting tokens/brand.json with this content.",
+
+  "name": "Serious Fintech",
+
+  "palette": {
+    "primary":   { "ramp": "navy" },
+    "secondary": { "ramp": "teal" },
+    "accent":    { "ramp": "blue" },
+    "neutral":   { "ramp": "neutral" },
+    "success":   { "ramp": "green" },
+    "warning":   { "ramp": "amber" },
+    "danger":    { "ramp": "red" },
+    "info":      { "ramp": "blue" }
+  },
+
+  "fonts": {
+    "sans":    "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    "display": "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    "mono":    "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace",
+    "faces":   []
+  },
+
+  "feel": {
+    "radiusScale":  "fibonacci",
+    "shadowDepth":  "subtle",
+    "useGradients": false
+  }
+}

package/tokens/presets/warm-dtc.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "../brand.schema.json",
+  "$comment": "Warm direct-to-consumer preset — orange primary, pink accent. Conveys energy, friendliness, approachability. Apply via the apply-preset skill or by overwriting tokens/brand.json with this content.",
+
+  "name": "Warm DTC",
+
+  "palette": {
+    "primary":   { "ramp": "orange" },
+    "secondary": { "ramp": "pink" },
+    "accent":    { "ramp": "amber" },
+    "neutral":   { "ramp": "neutral" },
+    "success":   { "ramp": "green" },
+    "warning":   { "ramp": "yellow" },
+    "danger":    { "ramp": "red" },
+    "info":      { "ramp": "blue" }
+  },
+
+  "fonts": {
+    "sans":    "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    "display": "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    "mono":    "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace",
+    "faces":   []
+  },
+
+  "feel": {
+    "radiusScale":  "fibonacci",
+    "shadowDepth":  "default",
+    "useGradients": true
+  }
+}

package/tokens/primitives/color.json

@@ -0,0 +1,137 @@
+{
+  "neutral": {
+    "0": { "value": "#ffffff", "type": "color" },
+    "50": { "value": "#fafafa", "type": "color" },
+    "100": { "value": "#f5f5f5", "type": "color" },
+    "200": { "value": "#e5e5e5", "type": "color" },
+    "300": { "value": "#d4d4d4", "type": "color" },
+    "400": { "value": "#a3a3a3", "type": "color" },
+    "500": { "value": "#737373", "type": "color" },
+    "600": { "value": "#525252", "type": "color" },
+    "700": { "value": "#404040", "type": "color" },
+    "800": { "value": "#262626", "type": "color" },
+    "900": { "value": "#171717", "type": "color" },
+    "950": { "value": "#0a0a0a", "type": "color" }
+  },
+  "navy": {
+    "50": { "value": "#e8eaf2", "type": "color" },
+    "100": { "value": "#c5c9db", "type": "color" },
+    "200": { "value": "#9ea5c2", "type": "color" },
+    "300": { "value": "#7680a9", "type": "color" },
+    "400": { "value": "#525d8f", "type": "color" },
+    "500": { "value": "#2e3b75", "type": "color" },
+    "600": { "value": "#242e5c", "type": "color" },
+    "700": { "value": "#1a2244", "type": "color" },
+    "800": { "value": "#11162d", "type": "color" },
+    "900": { "value": "#0a0e1f", "type": "color" },
+    "950": { "value": "#060813", "type": "color" }
+  },
+  "blue": {
+    "50": { "value": "#eff6ff", "type": "color" },
+    "100": { "value": "#dbeafe", "type": "color" },
+    "200": { "value": "#bfdbfe", "type": "color" },
+    "300": { "value": "#93c5fd", "type": "color" },
+    "400": { "value": "#60a5fa", "type": "color" },
+    "500": { "value": "#3b82f6", "type": "color" },
+    "600": { "value": "#2563eb", "type": "color" },
+    "700": { "value": "#1d4ed8", "type": "color" },
+    "800": { "value": "#1e40af", "type": "color" },
+    "900": { "value": "#1e3a8a", "type": "color" }
+  },
+  "purple": {
+    "50": { "value": "#f5f3ff", "type": "color" },
+    "100": { "value": "#ede9fe", "type": "color" },
+    "200": { "value": "#ddd6fe", "type": "color" },
+    "300": { "value": "#c4b5fd", "type": "color" },
+    "400": { "value": "#a78bfa", "type": "color" },
+    "500": { "value": "#8b5cf6", "type": "color" },
+    "600": { "value": "#7c3aed", "type": "color" },
+    "700": { "value": "#6d28d9", "type": "color" },
+    "800": { "value": "#5b21b6", "type": "color" },
+    "900": { "value": "#4c1d95", "type": "color" }
+  },
+  "orange": {
+    "50": { "value": "#fff7ed", "type": "color" },
+    "100": { "value": "#ffedd5", "type": "color" },
+    "200": { "value": "#fed7aa", "type": "color" },
+    "300": { "value": "#fdba74", "type": "color" },
+    "400": { "value": "#fb923c", "type": "color" },
+    "500": { "value": "#f97316", "type": "color" },
+    "600": { "value": "#ea580c", "type": "color" },
+    "700": { "value": "#c2410c", "type": "color" },
+    "800": { "value": "#9a3412", "type": "color" },
+    "900": { "value": "#7c2d12", "type": "color" }
+  },
+  "amber": {
+    "50": { "value": "#fffbeb", "type": "color" },
+    "100": { "value": "#fef3c7", "type": "color" },
+    "200": { "value": "#fde68a", "type": "color" },
+    "300": { "value": "#fcd34d", "type": "color" },
+    "400": { "value": "#fbbf24", "type": "color" },
+    "500": { "value": "#f59e0b", "type": "color" },
+    "600": { "value": "#d97706", "type": "color" },
+    "700": { "value": "#b45309", "type": "color" },
+    "800": { "value": "#92400e", "type": "color" },
+    "900": { "value": "#78350f", "type": "color" }
+  },
+  "yellow": {
+    "50": { "value": "#fefce8", "type": "color" },
+    "100": { "value": "#fef9c3", "type": "color" },
+    "200": { "value": "#fef08a", "type": "color" },
+    "300": { "value": "#fde047", "type": "color" },
+    "400": { "value": "#facc15", "type": "color" },
+    "500": { "value": "#eab308", "type": "color" },
+    "600": { "value": "#ca8a04", "type": "color" },
+    "700": { "value": "#a16207", "type": "color" },
+    "800": { "value": "#854d0e", "type": "color" },
+    "900": { "value": "#713f12", "type": "color" }
+  },
+  "green": {
+    "50": { "value": "#f0fdf4", "type": "color" },
+    "100": { "value": "#dcfce7", "type": "color" },
+    "200": { "value": "#bbf7d0", "type": "color" },
+    "300": { "value": "#86efac", "type": "color" },
+    "400": { "value": "#4ade80", "type": "color" },
+    "500": { "value": "#22c55e", "type": "color" },
+    "600": { "value": "#16a34a", "type": "color" },
+    "700": { "value": "#15803d", "type": "color" },
+    "800": { "value": "#166534", "type": "color" },
+    "900": { "value": "#14532d", "type": "color" }
+  },
+  "red": {
+    "50": { "value": "#fef2f2", "type": "color" },
+    "100": { "value": "#fee2e2", "type": "color" },
+    "200": { "value": "#fecaca", "type": "color" },
+    "300": { "value": "#fca5a5", "type": "color" },
+    "400": { "value": "#f87171", "type": "color" },
+    "500": { "value": "#ef4444", "type": "color" },
+    "600": { "value": "#dc2626", "type": "color" },
+    "700": { "value": "#b91c1c", "type": "color" },
+    "800": { "value": "#991b1b", "type": "color" },
+    "900": { "value": "#7f1d1d", "type": "color" }
+  },
+  "pink": {
+    "50": { "value": "#fdf2f8", "type": "color" },
+    "100": { "value": "#fce7f3", "type": "color" },
+    "200": { "value": "#fbcfe8", "type": "color" },
+    "300": { "value": "#f9a8d4", "type": "color" },
+    "400": { "value": "#f472b6", "type": "color" },
+    "500": { "value": "#ec4899", "type": "color" },
+    "600": { "value": "#db2777", "type": "color" },
+    "700": { "value": "#be185d", "type": "color" },
+    "800": { "value": "#9d174d", "type": "color" },
+    "900": { "value": "#831843", "type": "color" }
+  },
+  "teal": {
+    "50": { "value": "#f0fdfa", "type": "color" },
+    "100": { "value": "#ccfbf1", "type": "color" },
+    "200": { "value": "#99f6e4", "type": "color" },
+    "300": { "value": "#5eead4", "type": "color" },
+    "400": { "value": "#2dd4bf", "type": "color" },
+    "500": { "value": "#14b8a6", "type": "color" },
+    "600": { "value": "#0d9488", "type": "color" },
+    "700": { "value": "#0f766e", "type": "color" },
+    "800": { "value": "#115e59", "type": "color" },
+    "900": { "value": "#134e4a", "type": "color" }
+  }
+}

package/tokens/primitives/radius.json

@@ -0,0 +1,12 @@
+{
+  "radius": {
+    "0": { "value": "0", "type": "dimension" },
+    "1": { "value": "2px", "type": "dimension" },
+    "2": { "value": "3px", "type": "dimension" },
+    "3": { "value": "5px", "type": "dimension" },
+    "4": { "value": "8px", "type": "dimension" },
+    "5": { "value": "13px", "type": "dimension" },
+    "6": { "value": "21px", "type": "dimension" },
+    "full": { "value": "9999px", "type": "dimension" }
+  }
+}

package/tokens/primitives/shadow.json

@@ -0,0 +1,29 @@
+{
+  "shadow": {
+    "1": {
+      "value": "0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.08)",
+      "type": "shadow",
+      "description": "Subtle depth - hover states"
+    },
+    "2": {
+      "value": "0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08)",
+      "type": "shadow",
+      "description": "Low elevation - cards, buttons"
+    },
+    "3": {
+      "value": "0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08)",
+      "type": "shadow",
+      "description": "Medium elevation - dropdowns, popovers"
+    },
+    "4": {
+      "value": "0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08)",
+      "type": "shadow",
+      "description": "High elevation - modals, dialogs"
+    },
+    "5": {
+      "value": "0 16px 32px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08)",
+      "type": "shadow",
+      "description": "Highest elevation - toasts, floating elements"
+    }
+  }
+}

package/tokens/primitives/spacing.json

@@ -0,0 +1,15 @@
+{
+  "spacing": {
+    "0": { "value": "0", "type": "dimension" },
+    "1": { "value": "2px", "type": "dimension" },
+    "2": { "value": "4px", "type": "dimension" },
+    "3": { "value": "6px", "type": "dimension" },
+    "4": { "value": "10px", "type": "dimension" },
+    "5": { "value": "16px", "type": "dimension" },
+    "6": { "value": "26px", "type": "dimension" },
+    "7": { "value": "42px", "type": "dimension" },
+    "8": { "value": "68px", "type": "dimension" },
+    "9": { "value": "110px", "type": "dimension" },
+    "10": { "value": "178px", "type": "dimension" }
+  }
+}

package/tokens/themes/theme-dark/color.json

@@ -0,0 +1,90 @@
+{
+  "$comment": "Full semantic color set for the dark theme. Self-contained — not a diff against light. References resolve against the shared brand+primitives layer (which is theme-agnostic), so a rebrand reflows through every theme automatically.",
+
+  "surface": {
+    "canvas":    { "value": "{primary.900}", "type": "color", "description": "Main page background" },
+    "panel":     { "value": "{primary.800}", "type": "color", "description": "Card/panel background" },
+    "elevated":  { "value": "{primary.700}", "type": "color", "description": "Elevated surface (modals, dropdowns)" },
+    "overlay":   { "value": "rgba(0, 0, 0, 0.6)", "type": "color", "description": "Modal overlay backdrop" },
+    "muted":     { "value": "{primary.950}", "type": "color", "description": "Subtle/recessed background" },
+    "inverse":   { "value": "{neutral.0}",   "type": "color", "description": "Light surface for contrast (tooltips, banners on dark)" },
+    "highlight": { "value": "{accent.900}",  "type": "color", "description": "Warm accent surface for cards" },
+    "gradient": {
+      "start": { "value": "{primary.900}", "type": "color", "description": "Gradient background start — flattened to solid (user directive: no surface gradients)" },
+      "end":   { "value": "{primary.900}", "type": "color", "description": "Gradient background end — flattened to solid" }
+    }
+  },
+
+  "text": {
+    "default":     { "value": "{neutral.0}",    "type": "color", "description": "Primary text" },
+    "primary":     { "value": "{neutral.0}",    "type": "color", "description": "Primary text (alias)" },
+    "secondary":   { "value": "{primary.200}",  "type": "color", "description": "Secondary text" },
+    "muted":       { "value": "{primary.300}",  "type": "color", "description": "Helper/secondary text" },
+    "subtle":      { "value": "{primary.400}",  "type": "color", "description": "Placeholder text" },
+    "inverse":     { "value": "{primary.900}",  "type": "color", "description": "Text on light backgrounds" },
+    "link":        { "value": "{secondary.400}","type": "color", "description": "Link text" },
+    "linkHover":   { "value": "{secondary.300}","type": "color", "description": "Link hover" },
+    "linkVisited": { "value": "{accent.400}",   "type": "color", "description": "Visited link" },
+    "heading":     { "value": "{neutral.0}",    "type": "color", "description": "Heading text" }
+  },
+
+  "border": {
+    "subtle":  { "value": "{primary.700}",  "type": "color", "description": "Subtle borders" },
+    "default": { "value": "{primary.600}",  "type": "color", "description": "Default borders" },
+    "strong":  { "value": "{primary.500}",  "type": "color", "description": "Emphasized borders" },
+    "focus":   { "value": "#006cde","type": "color", "description": "Focus ring color — re-synced from light (nu.nl link blue)" },
+    "vibrant": {
+      "start": { "value": "#1f2544", "type": "color", "description": "Vibrant border start — flattened, re-synced from light (navy)" },
+      "end":   { "value": "#1f2544", "type": "color", "description": "Vibrant border end — flattened, re-synced from light (navy)" }
+    }
+  },
+
+  "feedback": {
+    "success":          { "value": "#2a8a3a", "type": "color", "description": "Success state — re-synced from light" },
+    "successSubtle":    { "value": "{success.100}", "type": "color", "description": "Success background" },
+    "successEmphasis":  { "value": "{success.400}", "type": "color", "description": "Success text" },
+    "warning":          { "value": "#d97706", "type": "color", "description": "Warning state — re-synced from light" },
+    "warningSubtle":    { "value": "{warning.100}", "type": "color", "description": "Warning background" },
+    "warningEmphasis":  { "value": "{warning.400}", "type": "color", "description": "Warning text" },
+    "error":            { "value": "#e00613",  "type": "color", "description": "Error state — re-synced from light (nu.nl breaking red)" },
+    "errorSubtle":      { "value": "{danger.100}",  "type": "color", "description": "Error background" },
+    "errorEmphasis":    { "value": "{danger.400}",  "type": "color", "description": "Error text" },
+    "info":             { "value": "#006cde",    "type": "color", "description": "Info state — re-synced from light (nu.nl link blue)" },
+    "infoSubtle":       { "value": "{info.100}",    "type": "color", "description": "Info background" },
+    "infoEmphasis":     { "value": "{info.400}",    "type": "color", "description": "Info text" }
+  },
+
+  "accent": {
+    "gradient": {
+      "start":      { "value": "{intent.action.default}", "type": "color", "description": "Accent gradient start — points at the dark-theme action ramp so background-clip:text labels (Tabs active tab) stay legible on the dark canvas (light-theme navy was 1.28:1)" },
+      "end":        { "value": "{intent.action.default}", "type": "color", "description": "Accent gradient end — points at the dark-theme action ramp (HC: solid, no actual gradient)" },
+      "hoverStart": { "value": "{intent.action.hover}",   "type": "color", "description": "Accent hover start — action.hover ramp step" },
+      "hoverEnd":   { "value": "{intent.action.hover}",   "type": "color", "description": "Accent hover end — action.hover ramp step" }
+    }
+  },
+
+  "intent": {
+    "action": {
+      "default":  { "value": "{secondary.500}", "type": "color", "description": "Primary CTA color" },
+      "hover":    { "value": "{secondary.400}", "type": "color", "description": "Primary CTA hover" },
+      "active":   { "value": "{secondary.600}", "type": "color", "description": "Primary CTA pressed" },
+      "disabled": { "value": "{primary.600}",   "type": "color", "description": "Disabled state" }
+    },
+    "secondary": {
+      "default": { "value": "transparent",   "type": "color", "description": "Secondary action bg" },
+      "hover":   { "value": "{primary.700}", "type": "color", "description": "Secondary action hover" },
+      "border":  { "value": "{primary.500}", "type": "color", "description": "Secondary action border" }
+    }
+  },
+
+  "focus": {
+    "ring": { "value": "#006cde", "type": "color", "description": "Focus ring color — re-synced from light (nu.nl link blue)" }
+  },
+
+  "brand": {
+    "primary":   { "value": "{primary.300}",   "type": "color", "description": "Primary brand color" },
+    "secondary": { "value": "#006cde", "type": "color", "description": "Secondary brand color (CTA) — re-synced from light (nu.nl link blue)" },
+    "accent":    { "value": "{accent.400}",    "type": "color", "description": "Accent brand color" },
+    "subtle":    { "value": "{primary.700}",   "type": "color", "description": "Subtle brand background" }
+  }
+}

package/tokens/themes/theme-dark/container.json

@@ -0,0 +1,9 @@
+{
+  "container": {
+    "max-width": {
+      "narrow": { "value": "720px", "type": "dimension", "description": "Long-form reading / forms / articles (~65ch comfortable line length)" },
+      "default": { "value": "1200px", "type": "dimension", "description": "Standard app shell" },
+      "wide": { "value": "1600px", "type": "dimension", "description": "Data-heavy / multi-column dashboards" }
+    }
+  }
+}

package/tokens/themes/theme-dark/radius.json

@@ -0,0 +1,10 @@
+{
+  "radius": {
+    "none": { "value": "{radius.0}", "type": "dimension", "description": "No rounding" },
+    "subtle": { "value": "{radius.1}", "type": "dimension", "description": "Subtle rounding" },
+    "default": { "value": "{radius.3}", "type": "dimension", "description": "Default border radius" },
+    "rounded": { "value": "{radius.4}", "type": "dimension", "description": "More rounded corners" },
+    "large": { "value": "{radius.5}", "type": "dimension", "description": "Large radius for cards" },
+    "pill": { "value": "{radius.full}", "type": "dimension", "description": "Fully rounded (pills, circles)" }
+  }
+}

package/tokens/themes/theme-dark/shadow.json

@@ -0,0 +1,9 @@
+{
+  "shadow": {
+    "xs": { "value": "{shadow.1}", "type": "shadow", "description": "Subtle depth - hover states" },
+    "s": { "value": "{shadow.2}", "type": "shadow", "description": "Low elevation - cards, buttons" },
+    "m": { "value": "{shadow.3}", "type": "shadow", "description": "Medium elevation - dropdowns" },
+    "l": { "value": "{shadow.4}", "type": "shadow", "description": "High elevation - modals" },
+    "xl": { "value": "{shadow.5}", "type": "shadow", "description": "Highest elevation - toasts" }
+  }
+}

package/tokens/themes/theme-dark/spacing.json

@@ -0,0 +1,44 @@
+{
+  "space": {
+    "3xs": { "value": "{spacing.1}", "type": "dimension", "description": "Canonical spacer 3xs (2px)" },
+    "2xs": { "value": "{spacing.2}", "type": "dimension", "description": "Canonical spacer 2xs (4px)" },
+    "xs": { "value": "{spacing.3}", "type": "dimension", "description": "Canonical spacer xs (6px)" },
+    "s": { "value": "{spacing.4}", "type": "dimension", "description": "Canonical spacer s (10px)" },
+    "m": { "value": "{spacing.5}", "type": "dimension", "description": "Canonical spacer m (16px)" },
+    "l": { "value": "{spacing.6}", "type": "dimension", "description": "Canonical spacer l (26px)" },
+    "xl": { "value": "{spacing.7}", "type": "dimension", "description": "Canonical spacer xl (42px)" },
+    "2xl": { "value": "{spacing.8}", "type": "dimension", "description": "Canonical spacer 2xl (68px)" },
+    "3xl": { "value": "{spacing.9}", "type": "dimension", "description": "Canonical spacer 3xl (110px)" },
+    "4xl": { "value": "{spacing.10}", "type": "dimension", "description": "Canonical spacer 4xl (178px)" }
+  },
+  "inset": {
+    "3xs": { "value": "{spacing.1}", "type": "dimension", "description": "Extra extra extra small inset padding" },
+    "2xs": { "value": "{spacing.2}", "type": "dimension", "description": "Extra extra small inset padding" },
+    "xs": { "value": "{spacing.3}", "type": "dimension", "description": "Extra small inset padding" },
+    "s": { "value": "{spacing.4}", "type": "dimension", "description": "Small inset padding" },
+    "m": { "value": "{spacing.5}", "type": "dimension", "description": "Medium inset padding" },
+    "l": { "value": "{spacing.6}", "type": "dimension", "description": "Large inset padding" },
+    "xl": { "value": "{spacing.7}", "type": "dimension", "description": "Extra large inset padding" },
+    "2xl": { "value": "{spacing.8}", "type": "dimension", "description": "Extra extra large inset padding" }
+  },
+  "stack": {
+    "3xs": { "value": "{spacing.1}", "type": "dimension", "description": "Vertical spacing between stacked items" },
+    "2xs": { "value": "{spacing.2}", "type": "dimension" },
+    "xs": { "value": "{spacing.3}", "type": "dimension" },
+    "s": { "value": "{spacing.4}", "type": "dimension" },
+    "m": { "value": "{spacing.5}", "type": "dimension" },
+    "l": { "value": "{spacing.6}", "type": "dimension" },
+    "xl": { "value": "{spacing.7}", "type": "dimension" },
+    "2xl": { "value": "{spacing.8}", "type": "dimension" }
+  },
+  "inline": {
+    "3xs": { "value": "{spacing.1}", "type": "dimension", "description": "Horizontal spacing between inline items" },
+    "2xs": { "value": "{spacing.2}", "type": "dimension" },
+    "xs": { "value": "{spacing.3}", "type": "dimension" },
+    "s": { "value": "{spacing.4}", "type": "dimension" },
+    "m": { "value": "{spacing.5}", "type": "dimension" },
+    "l": { "value": "{spacing.6}", "type": "dimension" },
+    "xl": { "value": "{spacing.7}", "type": "dimension" },
+    "2xl": { "value": "{spacing.8}", "type": "dimension" }
+  }
+}

package/tokens/themes/theme-high-contrast-solarized-dark/color.json

@@ -0,0 +1,90 @@
+{
+  "$comment": "Full semantic color set for theme-high-contrast-solarized-dark. Solarized base03 canvas (#002b36) + Solarized base3 text (#fdf6e3) → 13:1 (AAA). Accents brightened from canonical Solarized (yellow #b58900, blue #268bd2 etc.) to hit ≥7:1 vs base03 while preserving the Solarized identity. Disabled state uses Solarized base01 (#586e75) for visible-but-greyed semantics. Self-contained — not a diff against theme-dark or theme-high-contrast-light.",
+
+  "surface": {
+    "canvas":    { "value": "#002b36", "type": "color", "description": "Main page background — Solarized base03" },
+    "panel":     { "value": "#002b36", "type": "color", "description": "Card/panel background (collapses to canvas in HC — borders carry structure)" },
+    "elevated":  { "value": "#002b36", "type": "color", "description": "Elevated surface (no shadow elevation in HC — borders mark elevation)" },
+    "overlay":   { "value": "rgba(0, 43, 54, 0.85)", "type": "color", "description": "Modal overlay backdrop (translucent base03)" },
+    "muted":     { "value": "#002b36", "type": "color", "description": "Subtle/recessed background (collapses to canvas in HC; borders carry hierarchy)" },
+    "inverse":   { "value": "#fdf6e3", "type": "color", "description": "Light surface for contrast (tooltips, banners on dark) — Solarized base3" },
+    "highlight": { "value": "#073642", "type": "color", "description": "Selected/active background — Solarized base02 (subtle raise above canvas)" },
+    "gradient": {
+      "start": { "value": "#002b36", "type": "color", "description": "Gradient background start (HC has no gradient — solid base03)" },
+      "end":   { "value": "#002b36", "type": "color", "description": "Gradient background end (HC has no gradient — solid base03)" }
+    }
+  },
+
+  "text": {
+    "default":     { "value": "#fdf6e3", "type": "color", "description": "Primary text — Solarized base3, ~13:1 on base03 (AAA)" },
+    "primary":     { "value": "#fdf6e3", "type": "color", "description": "Primary text (alias)" },
+    "secondary":   { "value": "#fdf6e3", "type": "color", "description": "Secondary text (HC collapses tones — hierarchy via weight + spacing in component SCSS)" },
+    "muted":       { "value": "#fdf6e3", "type": "color", "description": "Helper/secondary text (HC collapses tones)" },
+    "subtle":      { "value": "#fdf6e3", "type": "color", "description": "Placeholder text (HC collapses tones)" },
+    "inverse":     { "value": "#002b36", "type": "color", "description": "Text on light backgrounds" },
+    "link":        { "value": "#5cdde0", "type": "color", "description": "Link text — brightened Solarized cyan, ~10:1 on base03 (AAA)" },
+    "linkHover":   { "value": "#fdf6e3", "type": "color", "description": "Link hover — always-underline; collapse to body text" },
+    "linkVisited": { "value": "#ff7fc5", "type": "color", "description": "Visited link — brightened Solarized magenta, ~6.8:1 on base03" },
+    "heading":     { "value": "#fdf6e3", "type": "color", "description": "Heading text" }
+  },
+
+  "border": {
+    "subtle":  { "value": "#fdf6e3", "type": "color", "description": "Subtle borders (HC: every element gets a real ≥2px border)" },
+    "default": { "value": "#fdf6e3", "type": "color", "description": "Default borders" },
+    "strong":  { "value": "#e8c100", "type": "color", "description": "Emphasised borders — brightened Solarized yellow, ~7.5:1 on base03" },
+    "focus":   { "value": "#e8c100", "type": "color", "description": "Focus ring colour — brightened Solarized yellow" },
+    "vibrant": {
+      "start": { "value": "#e8c100", "type": "color", "description": "Vibrant gradient border start (HC: solid yellow)" },
+      "end":   { "value": "#e8c100", "type": "color", "description": "Vibrant gradient border end (HC: solid yellow)" }
+    }
+  },
+
+  "feedback": {
+    "success":          { "value": "#b5c81f", "type": "color", "description": "Success — brightened Solarized green, ~7:1 on base03" },
+    "successSubtle":    { "value": "#1a2400", "type": "color", "description": "Success background — dark green wash on base03" },
+    "successEmphasis":  { "value": "#b5c81f", "type": "color", "description": "Success text" },
+    "warning":          { "value": "#ff944d", "type": "color", "description": "Warning — brightened Solarized orange, ~6.5:1 on base03" },
+    "warningSubtle":    { "value": "#3a1a00", "type": "color", "description": "Warning background — dark orange wash on base03" },
+    "warningEmphasis":  { "value": "#ff944d", "type": "color", "description": "Warning text" },
+    "error":            { "value": "#ff7060", "type": "color", "description": "Error — brightened Solarized red, ~5.5:1 on base03" },
+    "errorSubtle":      { "value": "#3a0e08", "type": "color", "description": "Error background — dark red wash on base03" },
+    "errorEmphasis":    { "value": "#ff7060", "type": "color", "description": "Error text" },
+    "info":             { "value": "#5cdde0", "type": "color", "description": "Info — brightened Solarized cyan, ~10:1 on base03 (AAA)" },
+    "infoSubtle":       { "value": "#073642", "type": "color", "description": "Info background — Solarized base02 wash" },
+    "infoEmphasis":     { "value": "#5cdde0", "type": "color", "description": "Info text" }
+  },
+
+  "accent": {
+    "gradient": {
+      "start":      { "value": "#6cb0ee", "type": "color", "description": "Accent gradient start — brightened Solarized blue, ~7:1 (HC: solid)" },
+      "end":        { "value": "#6cb0ee", "type": "color", "description": "Accent gradient end (HC: solid)" },
+      "hoverStart": { "value": "#fdf6e3", "type": "color", "description": "Accent gradient hover — flip to base3 cream for max contrast" },
+      "hoverEnd":   { "value": "#fdf6e3", "type": "color", "description": "Accent gradient hover (HC: solid)" }
+    }
+  },
+
+  "intent": {
+    "action": {
+      "default":  { "value": "#6cb0ee", "type": "color", "description": "Primary CTA — brightened Solarized blue, ~7:1 on base03" },
+      "hover":    { "value": "#fdf6e3", "type": "color", "description": "Primary CTA hover — flip to cream for max contrast" },
+      "active":   { "value": "#fdf6e3", "type": "color", "description": "Primary CTA pressed" },
+      "disabled": { "value": "#586e75", "type": "color", "description": "Disabled — Solarized base01, visible-but-greyed (~3:1)" }
+    },
+    "secondary": {
+      "default": { "value": "transparent", "type": "color", "description": "Secondary action bg" },
+      "hover":   { "value": "#073642", "type": "color", "description": "Secondary action hover — Solarized base02 wash" },
+      "border":  { "value": "#fdf6e3", "type": "color", "description": "Secondary action border" }
+    }
+  },
+
+  "focus": {
+    "ring": { "value": "#e8c100", "type": "color", "description": "Focus ring — brightened Solarized yellow, used at ≥3px width by consumers" }
+  },
+
+  "brand": {
+    "primary":   { "value": "#6cb0ee", "type": "color", "description": "Primary brand — brightened Solarized blue" },
+    "secondary": { "value": "#5cdde0", "type": "color", "description": "Secondary brand — brightened Solarized cyan" },
+    "accent":    { "value": "#e8c100", "type": "color", "description": "Accent brand — brightened Solarized yellow (focus accent)" },
+    "subtle":    { "value": "#073642", "type": "color", "description": "Subtle brand background — Solarized base02" }
+  }
+}

package/tokens/themes/theme-high-contrast-solarized-dark/container.json

@@ -0,0 +1,9 @@
+{
+  "container": {
+    "max-width": {
+      "narrow": { "value": "720px", "type": "dimension", "description": "Long-form reading / forms / articles (~65ch comfortable line length)" },
+      "default": { "value": "1200px", "type": "dimension", "description": "Standard app shell" },
+      "wide": { "value": "1600px", "type": "dimension", "description": "Data-heavy / multi-column dashboards" }
+    }
+  }
+}

package/tokens/themes/theme-high-contrast-solarized-dark/radius.json

@@ -0,0 +1,10 @@
+{
+  "radius": {
+    "none": { "value": "{radius.0}", "type": "dimension", "description": "No rounding" },
+    "subtle": { "value": "{radius.1}", "type": "dimension", "description": "Subtle rounding" },
+    "default": { "value": "{radius.3}", "type": "dimension", "description": "Default border radius" },
+    "rounded": { "value": "{radius.4}", "type": "dimension", "description": "More rounded corners" },
+    "large": { "value": "{radius.5}", "type": "dimension", "description": "Large radius for cards" },
+    "pill": { "value": "{radius.full}", "type": "dimension", "description": "Fully rounded (pills, circles)" }
+  }
+}

package/tokens/themes/theme-high-contrast-solarized-dark/shadow.json

@@ -0,0 +1,10 @@
+{
+  "$comment": "HC-Light shadows: every level resolves to `none`. Drop-shadows convey nothing in high-contrast mode (and forced-colors mode strips them anyway); replicate elevation with solid borders in component SCSS. Source: project_high_contrast_theme_research.md.",
+  "shadow": {
+    "xs": { "value": "none", "type": "shadow", "description": "Subtle depth (HC: no shadow)" },
+    "s":  { "value": "none", "type": "shadow", "description": "Low elevation (HC: no shadow)" },
+    "m":  { "value": "none", "type": "shadow", "description": "Medium elevation (HC: no shadow)" },
+    "l":  { "value": "none", "type": "shadow", "description": "High elevation (HC: no shadow)" },
+    "xl": { "value": "none", "type": "shadow", "description": "Highest elevation (HC: no shadow)" }
+  }
+}