@nexub/tokens 2.9.0 → 3.1.0

package/bin/README.md

@@ -12,7 +12,7 @@ npx nexub-migrate --rules logical-classes --ignore 'src/legacy/**'
 
 | Rule | Does |
 | --- | --- |
-| `legacy-tokens` | `var(--color-text-primary)` → `var(--color-on-surface)`, `--color-{leap,bookub,payub,founderub}-500` → `--color-{brand}`, `--color-brand-primary-500` → `--color-primary`. Map is built from the installed `@nexub/themes` (`base.css` + `light.css`), else an embedded snapshot. Color-mix aliases (`--color-*-border`) are reported, not rewritten. `--color-text-disabled` is a role and is never touched; declarations (`--color-x: …`) are left alone. |
+| `legacy-tokens` | `var(--color-text-primary)` → `var(--color-on-surface)`, `--color-{leap,bookub,payub,founderub}-500` → `--color-{brand}`, `--color-brand-primary-500` → `--color-primary`. Also Tailwind colour utilities on legacy names: `bg-bg-default` → `bg-surface`, `text-text-primary/80` → `text-on-surface/80`. The map is a frozen table of the 2.9 aliases (3.0 removed them from `@nexub/themes`, `@nexub/tokens` and the Tailwind preset). Color-mix aliases (`--color-*-border`) are reported, not rewritten. Never touched: `--color-text-disabled` (a role) and `--color-ring-default`, `--color-ring-offset`, `--color-accent-500` (brand themes override them); declarations (`--color-x: …`) are left alone. |
 | `logical-classes` | `ml/mr` `pl/pr` `border-l/r` `rounded-l/r/tl/tr/bl/br` `text-left/right` → `ms/me` `ps/pe` `border-s/e` `rounded-s/e/ss/se/es/ee` `text-start/end`, keeping variants, `!` and `-`. `left-*`/`right-*` positions are reported only. |
 | `tw-animate` | Reports tailwindcss-animate classes (`animate-in`, `fade-in-0`, `zoom-in-95`, `slide-in-from-*` …). Use `nx-motion` / `nx-pop` / `nx-dialog` from `@nexub/themes/base`. |
 | `opacity-modifier` | Reports `bg-[var(--x)]/10` (Tailwind 3 emits nothing). `--fix` rewrites to `bg-[color-mix(in_srgb,var(--x)_10%,transparent)]`. |

package/bin/nexub-migrate.mjs

@@ -2,7 +2,6 @@
 // nexub-migrate — move app code onto current Nexub DS conventions.
 // Dependency-free (node: built-ins only), Node >= 20. See ./README.md.
 import { readFileSync, readdirSync, realpathSync, statSync, writeFileSync } from 'node:fs';
-import { createRequire } from 'node:module';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { parseArgs } from 'node:util';
@@ -13,7 +12,9 @@ const SKIP_DIRS = new Set(['node_modules', 'dist', 'build', '.next', 'out', 'cov
 const MAX_BYTES = 1024 * 1024;
 
 // ─── legacy-tokens: alias map ────────────────────────────────────────────────
-const NEVER = new Set(['--color-text-disabled']); // the disabled-state role, not a legacy alias
+// Not legacy aliases: the disabled-state role, and three tokens brand themes override
+// ([data-product] sets ring-default to its tertiary and accent-500 to its scale).
+const NEVER = new Set(['--color-text-disabled', '--color-ring-default', '--color-ring-offset', '--color-accent-500']);
 const BRAND = {
   '--color-leap-500': '--color-leap',
   '--color-bookub-500': '--color-bookub',
@@ -52,8 +53,8 @@ export function buildAliasMap(cssTexts) {
   return { aliases, mix };
 }
 
-// Snapshot of buildAliasMap([@nexub/themes base.css, light.css]) at 1.8.0 — used when
-// @nexub/themes is not installed. bin/nexub-migrate.test.mjs fails if it drifts from source.
+// buildAliasMap([@nexub/themes 2.9 base.css, light.css]), frozen: 3.0 removed these
+// aliases from @nexub/themes, so this table is the only record of them.
 export const SNAPSHOT = /* SNAPSHOT:BEGIN */ {
   "aliases": {
     "--color-leap-500": "--color-leap",
@@ -82,7 +83,6 @@ export const SNAPSHOT = /* SNAPSHOT:BEGIN */ {
     "--color-text-success": "--color-on-success-container",
     "--color-text-warning": "--color-on-warning-container",
     "--color-text-danger": "--color-on-error-container",
-    "--color-accent-500": "--color-primary",
     "--color-bg-default": "--color-surface",
     "--color-bg-subtle": "--color-surface-container-low",
     "--color-bg-muted": "--color-surface-container-high",
@@ -98,8 +98,6 @@ export const SNAPSHOT = /* SNAPSHOT:BEGIN */ {
     "--color-border-subtle": "--color-surface-container-high",
     "--color-border-strong": "--color-outline",
     "--color-border-inverse": "--color-inverse-on-surface",
-    "--color-ring-default": "--color-primary",
-    "--color-ring-offset": "--color-surface",
     "--color-surface-muted": "--color-surface-container-low",
     "--color-surface-raised": "--color-surface-elevated",
     "--color-surface-sunken": "--color-surface-container-high",
@@ -130,17 +128,6 @@ export const SNAPSHOT = /* SNAPSHOT:BEGIN */ {
   }
 } /* SNAPSHOT:END */;
 
-export function loadAliasMap(cwd = process.cwd()) {
-  for (const from of [path.join(cwd, 'package.json'), import.meta.url]) {
-    try {
-      const req = createRequire(from);
-      const css = ['base', 'light'].map((f) => readFileSync(req.resolve(`@nexub/themes/${f}`), 'utf8'));
-      return { ...buildAliasMap(css), source: '@nexub/themes' };
-    } catch { /* not resolvable from here */ }
-  }
-  return { ...SNAPSHOT, source: 'snapshot' };
-}
-
 // ─── class-string contexts ───────────────────────────────────────────────────
 /**
  * Find string-literal bodies in JS/TS source. Handles '…', "…", `…${…}…` (static chunks
@@ -219,6 +206,9 @@ const LOGICAL = [
 const POSITION = /^(left|right)-/;
 const TW_ANIMATE = /^(animate-(in|out)|(fade|zoom|spin)-(in|out)(-.+)?|slide-(in-from|out-to)-.+)$/;
 const OPACITY = /^([\w-]+)-\[var\((--[\w-]+)\)\]\/(\d+)$/;
+// Tailwind colour utilities on a legacy name (bg-bg-default, text-text-primary/80):
+// the preset and tailwind.css dropped these in 3.0. Same utility, role name.
+const COLOR_UTILITY = /^(bg|text|border(?:-[xyselrtb])?|ring|ring-offset|outline|divide|fill|stroke|from|via|to|decoration|shadow|accent|caret|placeholder)-([a-z][\w-]*?)(\/\d+)?$/;
 
 /** Split `md:hover:!-ml-2` into { prefix: 'md:hover:', imp: '!', neg: '-', base: 'ml-2' }. */
 function splitToken(tok) {
@@ -236,7 +226,7 @@ function splitToken(tok) {
   return { prefix: tok.slice(0, cut), imp, neg, base: rest.slice(neg.length) };
 }
 
-function rewriteClassText(text, seg, offset, rules, fix, report) {
+function rewriteClassText(text, seg, offset, rules, fix, report, aliasMap) {
   return text.replace(/\S+/g, (tok, off) => {
     if ((seg.openLeft && off === 0) || (seg.openRight && off + tok.length === text.length)) return tok; // glued to ${…}
     const at = offset + off;
@@ -246,6 +236,12 @@ function rewriteClassText(text, seg, offset, rules, fix, report) {
       for (const [re, fn] of LOGICAL) if (re.test(next)) { next = next.replace(re, fn); break; }
       if (POSITION.test(base)) report(at, 'logical-classes', `"${tok}" is a physical position; review for start-/end- (not auto-fixed)`);
     }
+    if (rules.has('legacy-tokens')) {
+      const m = COLOR_UTILITY.exec(next);
+      const name = m && `--color-${m[2]}`;
+      if (m && aliasMap.aliases[name]) next = `${m[1]}-${aliasMap.aliases[name].slice('--color-'.length)}${m[3] ?? ''}`;
+      else if (m && aliasMap.mix[name]) report(at, 'legacy-tokens', `"${tok}" uses ${name}, a color-mix alias (${aliasMap.mix[name]}); rewrite by hand`);
+    }
     if (rules.has('tw-animate') && TW_ANIMATE.test(base)) {
       report(at, 'tw-animate', `"${tok}" is a tailwindcss-animate class; use nx-motion / nx-pop / nx-dialog from @nexub/themes/base`);
     }
@@ -385,12 +381,12 @@ function migrateComponents(src) {
 export function migrateSource(src, { ext, rules = new Set(RULES), fix = false, aliasMap = SNAPSHOT }) {
   const items = [];
   let text = src;
-  if (['logical-classes', 'tw-animate', 'opacity-modifier'].some((r) => rules.has(r))) {
+  if (['logical-classes', 'tw-animate', 'opacity-modifier', 'legacy-tokens'].some((r) => rules.has(r))) {
     let out = '';
     let last = 0;
     for (const seg of classSegments(src, ext)) {
       out += src.slice(last, seg.start) + rewriteClassText(src.slice(seg.start, seg.end), seg, seg.start, rules, fix,
-        (at, rule, message) => items.push({ at, rule, message }));
+        (at, rule, message) => items.push({ at, rule, message }), aliasMap);
       last = seg.end;
     }
     text = out + src.slice(last);
@@ -457,7 +453,8 @@ Options:
 
 Rules:
   legacy-tokens      var(--color-text-primary) -> var(--color-on-surface), brand -500 -> role;
-                     color-mix aliases (e.g. --color-semantic-success-border) reported
+                     Tailwind utilities too (bg-bg-default -> bg-surface, text-text-primary
+                     -> text-on-surface); color-mix aliases (--color-semantic-success-border) reported
   logical-classes    ml/mr, pl/pr, border-l/r, rounded-l/r/tl/tr/bl/br, text-left/right
                      -> ms/me, ps/pe, border-s/e, rounded-s/e/ss/se/es/ee, text-start/end;
                      left-/right- positions reported
@@ -492,11 +489,10 @@ export function run(argv, { cwd = process.cwd(), stdout = (s) => process.stdout.
   const unknown = [...rules].filter((r) => !RULES.includes(r));
   if (unknown.length) { stderr(`Unknown rule(s): ${unknown.join(', ')}. Known: ${RULES.join(', ')}\n`); return 2; }
 
-  const aliasMap = rules.has('legacy-tokens') ? loadAliasMap(cwd) : SNAPSHOT;
   const results = [];
   for (const abs of collectFiles(positionals.length ? positionals : ['src'], { cwd, ignore: o.ignore ?? [] })) {
     const src = readFileSync(abs, 'utf8');
-    const { output, manual } = migrateSource(src, { ext: path.extname(abs), rules, fix: !!o.fix, aliasMap });
+    const { output, manual } = migrateSource(src, { ext: path.extname(abs), rules, fix: !!o.fix });
     const a = src.split('\n');
     const b = output.split('\n');
     const changes = a.flatMap((line, i) => (line === b[i] ? [] : [{ line: i + 1, before: line, after: b[i] }]));
@@ -511,7 +507,7 @@ export function run(argv, { cwd = process.cwd(), stdout = (s) => process.stdout.
   };
 
   if (o.json) {
-    stdout(`${JSON.stringify({ written: !!o.write, aliasSource: aliasMap.source ?? 'snapshot', results, totals }, null, 2)}\n`);
+    stdout(`${JSON.stringify({ written: !!o.write, aliasSource: 'snapshot', results, totals }, null, 2)}\n`);
   } else {
     for (const r of results) {
       stdout(`--- ${r.file}\n+++ ${r.file}\n`);

package/dist/css/rem.css

@@ -1,83 +1 @@
-/* @nexub/tokens/css/rem: import after @nexub/tokens/css (and @nexub/themes). */
-:root {
-  --spacing-1: 0.25rem;
-  --spacing-2: 0.5rem;
-  --spacing-3: 0.75rem;
-  --spacing-4: 1rem;
-  --spacing-5: 1.25rem;
-  --spacing-6: 1.5rem;
-  --spacing-7: 1.75rem;
-  --spacing-8: 2rem;
-  --spacing-9: 2.25rem;
-  --spacing-10: 2.5rem;
-  --spacing-11: 2.75rem;
-  --spacing-12: 3rem;
-  --spacing-14: 3.5rem;
-  --spacing-16: 4rem;
-  --spacing-20: 5rem;
-  --spacing-24: 6rem;
-  --spacing-28: 7rem;
-  --spacing-32: 8rem;
-  --spacing-40: 10rem;
-  --spacing-48: 12rem;
-  --spacing-56: 14rem;
-  --spacing-64: 16rem;
-  --spacing-0-5: 0.125rem;
-  --spacing-1-5: 0.375rem;
-  --spacing-2-5: 0.625rem;
-  --spacing-3-5: 0.875rem;
-  --radius-xs: 0.125rem;
-  --radius-sm: 0.25rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-2xl: 1.5rem;
-  --radius-3xl: 2rem;
-  --shape-field: 0.75rem;
-  --shape-container: 1rem;
-  --shape-overlay: 1.5rem;
-  --shape-tooltip: 0.5rem;
-  --shape-min: 0.25rem;
-  --size-control-xs: 1.5rem;
-  --size-control-sm: 2rem;
-  --size-control-md: 2.5rem;
-  --size-control-lg: 3rem;
-  --size-control-xl: 3.5rem;
-  --type-display-lg-size: 3.5rem;
-  --type-display-lg-lineHeight: 3.75rem;
-  --type-display-md-size: 2.75rem;
-  --type-display-md-lineHeight: 3rem;
-  --type-display-sm-size: 2.25rem;
-  --type-display-sm-lineHeight: 2.5rem;
-  --type-headline-lg-size: 2rem;
-  --type-headline-lg-lineHeight: 2.375rem;
-  --type-headline-md-size: 1.75rem;
-  --type-headline-md-lineHeight: 2.125rem;
-  --type-headline-sm-size: 1.5rem;
-  --type-headline-sm-lineHeight: 1.875rem;
-  --type-title-lg-size: 1.25rem;
-  --type-title-lg-lineHeight: 1.75rem;
-  --type-title-md-size: 1rem;
-  --type-title-md-lineHeight: 1.5rem;
-  --type-title-sm-size: 0.875rem;
-  --type-title-sm-lineHeight: 1.25rem;
-  --type-body-lg-size: 1.125rem;
-  --type-body-lg-lineHeight: 1.75rem;
-  --type-body-md-size: 1rem;
-  --type-body-md-lineHeight: 1.5rem;
-  --type-body-sm-size: 0.875rem;
-  --type-body-sm-lineHeight: 1.25rem;
-  --type-label-lg-size: 0.875rem;
-  --type-label-lg-lineHeight: 1.25rem;
-  --type-label-md-size: 0.8125rem;
-  --type-label-md-lineHeight: 1.125rem;
-  --type-label-sm-size: 0.75rem;
-  --type-label-sm-lineHeight: 1rem;
-}
-[data-density='compact'] {
-  --size-control-xs: 1.25rem;
-  --size-control-sm: 1.5rem;
-  --size-control-md: 2rem;
-  --size-control-lg: 2.5rem;
-  --size-control-xl: 3rem;
-}
+/* @nexub/tokens/css/rem: since 3.0 @nexub/tokens/css is in rem by default, so this file is empty. Kept so existing imports keep working. */

package/dist/css/variables.css

@@ -515,42 +515,7 @@
   --color-neutral-950: #080d19;
   --color-neutral-1000: #000000;
   --color-surface-warm: #fefce8;
-  --color-surface-muted: #f8fafc;
-  --color-surface-raised: #ffffff;
-  --color-surface-sunken: #f1f5f9;
-  --color-surface-inverse: #0f172a;
-  --color-semantic-success-default: #10b981;
-  --color-semantic-success-bg: #ecfdf5;
-  --color-semantic-success-border: #a7f3d0;
-  --color-semantic-success-strong: #047857;
-  --color-semantic-error-default: #ef4444;
-  --color-semantic-error-bg: #fef2f2;
-  --color-semantic-error-border: #fecaca;
-  --color-semantic-error-strong: #b91c1c;
-  --color-semantic-warning-default: #f59e0b;
-  --color-semantic-warning-bg: #fffbeb;
-  --color-semantic-warning-border: #fde68a;
-  --color-semantic-warning-strong: #b45309;
-  --color-semantic-info-default: #4099f1;
-  --color-semantic-info-bg: #eff6ff;
-  --color-semantic-info-border: #bfdbfe;
-  --color-semantic-info-strong: #1d4ed8;
-  --color-text-primary: #0f172a;
-  --color-text-secondary: #334155;
-  --color-text-muted: #64748b;
-  --color-text-subtle: #94a3b8;
-  --color-text-inverse: #f8fafc;
-  --color-text-link: #2563eb;
   --color-text-disabled: #94a3b8;
-  --color-bg-default: #ffffff;
-  --color-bg-subtle: #f8fafc;
-  --color-bg-muted: #f1f5f9;
-  --color-bg-raised: #ffffff;
-  --color-bg-inverse: #0f172a;
-  --color-border-default: #e2e8f0;
-  --color-border-subtle: #f1f5f9;
-  --color-border-strong: #94a3b8;
-  --color-border-inverse: #334155;
   --color-ring-default: #4099f1;
   --color-ring-offset: #ffffff;
   --color-chart-1: #4099f1;
@@ -603,6 +568,20 @@
   --gradient-surface-soft: linear-gradient(135deg, rgba(64,153,241,0.04) 0%, rgba(28,206,102,0.03) 100%);
   --gradient-surface-muted: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
   --gradient-eyebrow-chip: linear-gradient(90deg, rgba(64,153,241,0.12) 0%, rgba(28,206,102,0.08) 100%);
+  --marketing-hero-ambient: radial-gradient(ellipse 80% 50% at 50% -20%, light-dark(rgb(64 153 241 / 0.12), rgb(64 153 241 / 0.08)) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%, light-dark(rgb(28 206 102 / 0.06), transparent) 0%, transparent 50%); /** Hero backdrop, layered over the page surface */
+  --marketing-button-gradient: linear-gradient(180deg, var(--color-palette-primary-45) 0%, var(--color-palette-primary-40) 100%); /** Button variant="hero" (primary tones 45 → 40; 50 fails AA with white text) */
+  --marketing-button-gradient-hover: linear-gradient(180deg, var(--color-palette-primary-45) 0%, var(--color-palette-primary-35) 100%);
+  --marketing-button-fg: var(--color-palette-primary-100); /** Text on the hero button gradient (AA on both stops) */
+  --marketing-button-shadow: 0 14px 30px -12px color-mix(in srgb, var(--color-palette-primary-40) 65%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.22); /** Hero button glow. At most one glowing button per screen. */
+  --marketing-button-shadow-hover: 0 20px 36px -12px color-mix(in srgb, var(--color-palette-primary-40) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.25);
+  --marketing-eyebrow-gradient: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 4%, var(--color-surface-container-lowest)) 0%, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-container-lowest)) 100%); /** EyebrowChip variant="gradient" */
+  --marketing-card-radius: 24px; /** Card variant="showcase" */
+  --marketing-card-shadow: 0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 18px 40px -28px rgb(15 23 42 / 0.38);
+  --marketing-card-shadow-hover: 0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 30px 60px -28px rgb(15 23 42 / 0.48);
+  --marketing-float-shadow: 0 0 0 1px light-dark(rgb(26 28 30 / 0.05), rgb(255 255 255 / 0.08)), 0 24px 50px -22px rgb(15 23 42 / 0.45); /** Floating cards over a hero visual */
+  --marketing-accent-line: linear-gradient(90deg, var(--color-primary) 0%, var(--color-bookub) 35%, var(--color-founderub) 70%, var(--color-payub) 100%); /** Brand accent line: Nexub and the product colours */
+  --marketing-lift: -6px; /** Card hover lift */
+  --marketing-button-lift: -2px; /** Hero button hover lift */
   --duration-instant: 0s;
   --duration-fast: 0.15s;
   --duration-normal: 0.2s;
@@ -615,13 +594,13 @@
   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
   --radius-none: 0px;
-  --radius-xs: 2px;
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-  --radius-2xl: 24px;
-  --radius-3xl: 32px;
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  --radius-3xl: 2rem;
   --radius-full: 9999px;
   --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
   --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
@@ -637,16 +616,16 @@
   --shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px #4099f1;
   --shadow-lift: 0 4px 12px -2px rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.08);
   --shape-control: 9999px; /** Capsule: Button, IconButton, Chip, SegmentedControl, Switch, Badge */
-  --shape-field: 12px; /** Input, Select, Textarea, Combobox */
-  --shape-container: 16px; /** Card, Popover, Menu, Toast */
-  --shape-overlay: 24px; /** Dialog, Sheet, CommandPalette */
-  --shape-tooltip: 8px; /** Tooltip, Kbd */
-  --shape-min: 4px; /** Floor for concentric inner radii: max(min, outer - padding) */
-  --size-control-xs: 24px;
-  --size-control-sm: 32px;
-  --size-control-md: 40px;
-  --size-control-lg: 48px;
-  --size-control-xl: 56px;
+  --shape-field: 0.75rem; /** Input, Select, Textarea, Combobox */
+  --shape-container: 1rem; /** Card, Popover, Menu, Toast */
+  --shape-overlay: 1.5rem; /** Dialog, Sheet, CommandPalette */
+  --shape-tooltip: 0.5rem; /** Tooltip, Kbd */
+  --shape-min: 0.25rem; /** Floor for concentric inner radii: max(min, outer - padding) */
+  --size-control-xs: 1.5rem;
+  --size-control-sm: 2rem;
+  --size-control-md: 2.5rem;
+  --size-control-lg: 3rem;
+  --size-control-xl: 3.5rem;
   --size-icon-xs: 12px;
   --size-icon-sm: 16px;
   --size-icon-md: 20px;
@@ -661,39 +640,40 @@
   --size-nav-sidebar: 256px;
   --size-nav-sidebar-collapsed: 64px;
   --spacing-0: 0px;
-  --spacing-1: 4px;
-  --spacing-2: 8px;
-  --spacing-3: 12px;
-  --spacing-4: 16px;
-  --spacing-5: 20px;
-  --spacing-6: 24px;
-  --spacing-7: 28px;
-  --spacing-8: 32px;
-  --spacing-9: 36px;
-  --spacing-10: 40px;
-  --spacing-11: 44px;
-  --spacing-12: 48px;
-  --spacing-14: 56px;
-  --spacing-16: 64px;
-  --spacing-20: 80px;
-  --spacing-24: 96px;
-  --spacing-28: 112px;
-  --spacing-32: 128px;
-  --spacing-40: 160px;
-  --spacing-48: 192px;
-  --spacing-56: 224px;
-  --spacing-64: 256px;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-7: 1.75rem;
+  --spacing-8: 2rem;
+  --spacing-9: 2.25rem;
+  --spacing-10: 2.5rem;
+  --spacing-11: 2.75rem;
+  --spacing-12: 3rem;
+  --spacing-14: 3.5rem;
+  --spacing-16: 4rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+  --spacing-28: 7rem;
+  --spacing-32: 8rem;
+  --spacing-40: 10rem;
+  --spacing-48: 12rem;
+  --spacing-56: 14rem;
+  --spacing-64: 16rem;
   --spacing-px: 1px;
-  --spacing-0-5: 2px;
-  --spacing-1-5: 6px;
-  --spacing-2-5: 10px;
-  --spacing-3-5: 14px;
+  --spacing-0-5: 0.125rem;
+  --spacing-1-5: 0.375rem;
+  --spacing-2-5: 0.625rem;
+  --spacing-3-5: 0.875rem;
   --container-sm: 640px;
   --container-md: 768px;
   --container-lg: 1024px;
   --container-xl: 1280px;
   --container-2xl: 1536px;
-  --container-nexub: 1440px;
+  --container-nexub: 1440px; /** App shell width */
+  --container-marketing: 1280px; /** Marketing pages (Container size="marketing") */
   --container-prose: 65ch;
   --font-family-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif; /** UI face (body, title, label roles) */
   --font-family-display: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', 'Inter Variable', ui-sans-serif, system-ui, sans-serif; /** Brand face (display, headline roles) */
@@ -757,64 +737,68 @@
   --text-code-lineHeight: 1.6;
   --text-code-letterSpacing: 0;
   --text-code-weight: 400;
-  --type-display-lg-size: 56px;
-  --type-display-lg-lineHeight: 60px;
+  --type-display-xl-size: 4rem;
+  --type-display-xl-lineHeight: 4.25rem;
+  --type-display-xl-letterSpacing: -0.045em;
+  --type-display-xl-weight: 800;
+  --type-display-lg-size: 3.5rem;
+  --type-display-lg-lineHeight: 3.75rem;
   --type-display-lg-letterSpacing: -0.03em;
   --type-display-lg-weight: 700;
-  --type-display-md-size: 44px;
-  --type-display-md-lineHeight: 48px;
+  --type-display-md-size: 2.75rem;
+  --type-display-md-lineHeight: 3rem;
   --type-display-md-letterSpacing: -0.025em;
   --type-display-md-weight: 700;
-  --type-display-sm-size: 36px;
-  --type-display-sm-lineHeight: 40px;
+  --type-display-sm-size: 2.25rem;
+  --type-display-sm-lineHeight: 2.5rem;
   --type-display-sm-letterSpacing: -0.02em;
   --type-display-sm-weight: 700;
-  --type-headline-lg-size: 32px;
-  --type-headline-lg-lineHeight: 38px;
+  --type-headline-lg-size: 2rem;
+  --type-headline-lg-lineHeight: 2.375rem;
   --type-headline-lg-letterSpacing: -0.02em;
   --type-headline-lg-weight: 600;
-  --type-headline-md-size: 28px;
-  --type-headline-md-lineHeight: 34px;
+  --type-headline-md-size: 1.75rem;
+  --type-headline-md-lineHeight: 2.125rem;
   --type-headline-md-letterSpacing: -0.015em;
   --type-headline-md-weight: 600;
-  --type-headline-sm-size: 24px;
-  --type-headline-sm-lineHeight: 30px;
+  --type-headline-sm-size: 1.5rem;
+  --type-headline-sm-lineHeight: 1.875rem;
   --type-headline-sm-letterSpacing: -0.01em;
   --type-headline-sm-weight: 600;
-  --type-title-lg-size: 20px;
-  --type-title-lg-lineHeight: 28px;
+  --type-title-lg-size: 1.25rem;
+  --type-title-lg-lineHeight: 1.75rem;
   --type-title-lg-letterSpacing: -0.01em;
   --type-title-lg-weight: 600;
-  --type-title-md-size: 16px;
-  --type-title-md-lineHeight: 24px;
+  --type-title-md-size: 1rem;
+  --type-title-md-lineHeight: 1.5rem;
   --type-title-md-letterSpacing: -0.005em;
   --type-title-md-weight: 600;
-  --type-title-sm-size: 14px;
-  --type-title-sm-lineHeight: 20px;
+  --type-title-sm-size: 0.875rem;
+  --type-title-sm-lineHeight: 1.25rem;
   --type-title-sm-letterSpacing: 0em;
   --type-title-sm-weight: 600;
-  --type-body-lg-size: 18px;
-  --type-body-lg-lineHeight: 28px;
+  --type-body-lg-size: 1.125rem;
+  --type-body-lg-lineHeight: 1.75rem;
   --type-body-lg-letterSpacing: -0.011em;
   --type-body-lg-weight: 400;
-  --type-body-md-size: 16px;
-  --type-body-md-lineHeight: 24px;
+  --type-body-md-size: 1rem;
+  --type-body-md-lineHeight: 1.5rem;
   --type-body-md-letterSpacing: -0.011em;
   --type-body-md-weight: 400;
-  --type-body-sm-size: 14px;
-  --type-body-sm-lineHeight: 20px;
+  --type-body-sm-size: 0.875rem;
+  --type-body-sm-lineHeight: 1.25rem;
   --type-body-sm-letterSpacing: -0.006em;
   --type-body-sm-weight: 400;
-  --type-label-lg-size: 14px;
-  --type-label-lg-lineHeight: 20px;
+  --type-label-lg-size: 0.875rem;
+  --type-label-lg-lineHeight: 1.25rem;
   --type-label-lg-letterSpacing: 0em;
   --type-label-lg-weight: 500;
-  --type-label-md-size: 13px;
-  --type-label-md-lineHeight: 18px;
+  --type-label-md-size: 0.8125rem;
+  --type-label-md-lineHeight: 1.125rem;
   --type-label-md-letterSpacing: 0em;
   --type-label-md-weight: 500;
-  --type-label-sm-size: 12px;
-  --type-label-sm-lineHeight: 16px;
+  --type-label-sm-size: 0.75rem;
+  --type-label-sm-lineHeight: 1rem;
   --type-label-sm-letterSpacing: 0.01em;
   --type-label-sm-weight: 500;
   --z-hide: -1;

package/dist/js/generated/native.d.ts

@@ -649,6 +649,13 @@ export declare const native: {
         };
     };
     readonly type: {
+        readonly "display-xl": {
+            readonly family: "display";
+            readonly weight: 800;
+            readonly size: 64;
+            readonly lineHeight: 68;
+            readonly letterSpacing: -2.88;
+        };
         readonly "display-lg": {
             readonly family: "display";
             readonly weight: 700;

package/dist/js/generated/native.js

@@ -651,6 +651,13 @@ export const native = {
         }
     },
     "type": {
+        "display-xl": {
+            "family": "display",
+            "weight": 800,
+            "size": 64,
+            "lineHeight": 68,
+            "letterSpacing": -2.88
+        },
         "display-lg": {
             "family": "display",
             "weight": 700,

package/dist/js/generated/tokens.d.ts

@@ -557,59 +557,10 @@ export declare const tokens: {
         };
         readonly surface: {
             readonly warm: "#fefce8";
-            readonly muted: "#f8fafc";
-            readonly raised: "#ffffff";
-            readonly sunken: "#f1f5f9";
-            readonly inverse: "#0f172a";
-        };
-        readonly semantic: {
-            readonly success: {
-                readonly default: "#10b981";
-                readonly bg: "#ecfdf5";
-                readonly border: "#a7f3d0";
-                readonly strong: "#047857";
-            };
-            readonly error: {
-                readonly default: "#ef4444";
-                readonly bg: "#fef2f2";
-                readonly border: "#fecaca";
-                readonly strong: "#b91c1c";
-            };
-            readonly warning: {
-                readonly default: "#f59e0b";
-                readonly bg: "#fffbeb";
-                readonly border: "#fde68a";
-                readonly strong: "#b45309";
-            };
-            readonly info: {
-                readonly default: "#4099f1";
-                readonly bg: "#eff6ff";
-                readonly border: "#bfdbfe";
-                readonly strong: "#1d4ed8";
-            };
         };
         readonly text: {
-            readonly primary: "#0f172a";
-            readonly secondary: "#334155";
-            readonly muted: "#64748b";
-            readonly subtle: "#94a3b8";
-            readonly inverse: "#f8fafc";
-            readonly link: "#2563eb";
             readonly disabled: "#94a3b8";
         };
-        readonly bg: {
-            readonly default: "#ffffff";
-            readonly subtle: "#f8fafc";
-            readonly muted: "#f1f5f9";
-            readonly raised: "#ffffff";
-            readonly inverse: "#0f172a";
-        };
-        readonly border: {
-            readonly default: "#e2e8f0";
-            readonly subtle: "#f1f5f9";
-            readonly strong: "#94a3b8";
-            readonly inverse: "#334155";
-        };
         readonly ring: {
             readonly default: "#4099f1";
             readonly offset: "#ffffff";
@@ -703,6 +654,22 @@ export declare const tokens: {
         readonly "surface-muted": "linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%)";
         readonly "eyebrow-chip": "linear-gradient(90deg, rgba(64,153,241,0.12) 0%, rgba(28,206,102,0.08) 100%)";
     };
+    readonly marketing: {
+        readonly "hero-ambient": "radial-gradient(ellipse 80% 50% at 50% -20%, light-dark(rgb(64 153 241 / 0.12), rgb(64 153 241 / 0.08)) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%, light-dark(rgb(28 206 102 / 0.06), transparent) 0%, transparent 50%)";
+        readonly "button-gradient": "linear-gradient(180deg, var(--color-palette-primary-45) 0%, var(--color-palette-primary-40) 100%)";
+        readonly "button-gradient-hover": "linear-gradient(180deg, var(--color-palette-primary-45) 0%, var(--color-palette-primary-35) 100%)";
+        readonly "button-fg": "var(--color-palette-primary-100)";
+        readonly "button-shadow": "0 14px 30px -12px color-mix(in srgb, var(--color-palette-primary-40) 65%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.22)";
+        readonly "button-shadow-hover": "0 20px 36px -12px color-mix(in srgb, var(--color-palette-primary-40) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.25)";
+        readonly "eyebrow-gradient": "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 4%, var(--color-surface-container-lowest)) 0%, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-container-lowest)) 100%)";
+        readonly "card-radius": "24px";
+        readonly "card-shadow": "0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 18px 40px -28px rgb(15 23 42 / 0.38)";
+        readonly "card-shadow-hover": "0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 30px 60px -28px rgb(15 23 42 / 0.48)";
+        readonly "float-shadow": "0 0 0 1px light-dark(rgb(26 28 30 / 0.05), rgb(255 255 255 / 0.08)), 0 24px 50px -22px rgb(15 23 42 / 0.45)";
+        readonly "accent-line": "linear-gradient(90deg, var(--color-primary) 0%, var(--color-bookub) 35%, var(--color-founderub) 70%, var(--color-payub) 100%)";
+        readonly lift: "-6px";
+        readonly "button-lift": "-2px";
+    };
     readonly duration: {
         readonly instant: "0ms";
         readonly fast: "150ms";
@@ -817,6 +784,7 @@ export declare const tokens: {
         readonly xl: "1280px";
         readonly "2xl": "1536px";
         readonly nexub: "1440px";
+        readonly marketing: "1280px";
         readonly prose: "65ch";
     };
     readonly font: {
@@ -916,6 +884,12 @@ export declare const tokens: {
         };
     };
     readonly type: {
+        readonly "display-xl": {
+            readonly size: "64px";
+            readonly lineHeight: "68px";
+            readonly letterSpacing: "-0.045em";
+            readonly weight: "800";
+        };
         readonly "display-lg": {
             readonly size: "56px";
             readonly lineHeight: "60px";

package/dist/js/generated/tokens.js

@@ -558,60 +558,11 @@ export const tokens = {
             "1000": "#000000"
         },
         "surface": {
-            "warm": "#fefce8",
-            "muted": "#f8fafc",
-            "raised": "#ffffff",
-            "sunken": "#f1f5f9",
-            "inverse": "#0f172a"
-        },
-        "semantic": {
-            "success": {
-                "default": "#10b981",
-                "bg": "#ecfdf5",
-                "border": "#a7f3d0",
-                "strong": "#047857"
-            },
-            "error": {
-                "default": "#ef4444",
-                "bg": "#fef2f2",
-                "border": "#fecaca",
-                "strong": "#b91c1c"
-            },
-            "warning": {
-                "default": "#f59e0b",
-                "bg": "#fffbeb",
-                "border": "#fde68a",
-                "strong": "#b45309"
-            },
-            "info": {
-                "default": "#4099f1",
-                "bg": "#eff6ff",
-                "border": "#bfdbfe",
-                "strong": "#1d4ed8"
-            }
+            "warm": "#fefce8"
         },
         "text": {
-            "primary": "#0f172a",
-            "secondary": "#334155",
-            "muted": "#64748b",
-            "subtle": "#94a3b8",
-            "inverse": "#f8fafc",
-            "link": "#2563eb",
             "disabled": "#94a3b8"
         },
-        "bg": {
-            "default": "#ffffff",
-            "subtle": "#f8fafc",
-            "muted": "#f1f5f9",
-            "raised": "#ffffff",
-            "inverse": "#0f172a"
-        },
-        "border": {
-            "default": "#e2e8f0",
-            "subtle": "#f1f5f9",
-            "strong": "#94a3b8",
-            "inverse": "#334155"
-        },
         "ring": {
             "default": "#4099f1",
             "offset": "#ffffff"
@@ -705,6 +656,22 @@ export const tokens = {
         "surface-muted": "linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%)",
         "eyebrow-chip": "linear-gradient(90deg, rgba(64,153,241,0.12) 0%, rgba(28,206,102,0.08) 100%)"
     },
+    "marketing": {
+        "hero-ambient": "radial-gradient(ellipse 80% 50% at 50% -20%, light-dark(rgb(64 153 241 / 0.12), rgb(64 153 241 / 0.08)) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%, light-dark(rgb(28 206 102 / 0.06), transparent) 0%, transparent 50%)",
+        "button-gradient": "linear-gradient(180deg, var(--color-palette-primary-45) 0%, var(--color-palette-primary-40) 100%)",
+        "button-gradient-hover": "linear-gradient(180deg, var(--color-palette-primary-45) 0%, var(--color-palette-primary-35) 100%)",
+        "button-fg": "var(--color-palette-primary-100)",
+        "button-shadow": "0 14px 30px -12px color-mix(in srgb, var(--color-palette-primary-40) 65%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.22)",
+        "button-shadow-hover": "0 20px 36px -12px color-mix(in srgb, var(--color-palette-primary-40) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.25)",
+        "eyebrow-gradient": "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 4%, var(--color-surface-container-lowest)) 0%, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-container-lowest)) 100%)",
+        "card-radius": "24px",
+        "card-shadow": "0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 18px 40px -28px rgb(15 23 42 / 0.38)",
+        "card-shadow-hover": "0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 30px 60px -28px rgb(15 23 42 / 0.48)",
+        "float-shadow": "0 0 0 1px light-dark(rgb(26 28 30 / 0.05), rgb(255 255 255 / 0.08)), 0 24px 50px -22px rgb(15 23 42 / 0.45)",
+        "accent-line": "linear-gradient(90deg, var(--color-primary) 0%, var(--color-bookub) 35%, var(--color-founderub) 70%, var(--color-payub) 100%)",
+        "lift": "-6px",
+        "button-lift": "-2px"
+    },
     "duration": {
         "instant": "0ms",
         "fast": "150ms",
@@ -819,6 +786,7 @@ export const tokens = {
         "xl": "1280px",
         "2xl": "1536px",
         "nexub": "1440px",
+        "marketing": "1280px",
         "prose": "65ch"
     },
     "font": {
@@ -918,6 +886,12 @@ export const tokens = {
         }
     },
     "type": {
+        "display-xl": {
+            "size": "64px",
+            "lineHeight": "68px",
+            "letterSpacing": "-0.045em",
+            "weight": "800"
+        },
         "display-lg": {
             "size": "56px",
             "lineHeight": "60px",

package/dist/json/tokens.json

@@ -511,42 +511,7 @@
   "color-neutral-950": "#080d19",
   "color-neutral-1000": "#000000",
   "color-surface-warm": "#fefce8",
-  "color-surface-muted": "#f8fafc",
-  "color-surface-raised": "#ffffff",
-  "color-surface-sunken": "#f1f5f9",
-  "color-surface-inverse": "#0f172a",
-  "color-semantic-success-default": "#10b981",
-  "color-semantic-success-bg": "#ecfdf5",
-  "color-semantic-success-border": "#a7f3d0",
-  "color-semantic-success-strong": "#047857",
-  "color-semantic-error-default": "#ef4444",
-  "color-semantic-error-bg": "#fef2f2",
-  "color-semantic-error-border": "#fecaca",
-  "color-semantic-error-strong": "#b91c1c",
-  "color-semantic-warning-default": "#f59e0b",
-  "color-semantic-warning-bg": "#fffbeb",
-  "color-semantic-warning-border": "#fde68a",
-  "color-semantic-warning-strong": "#b45309",
-  "color-semantic-info-default": "#4099f1",
-  "color-semantic-info-bg": "#eff6ff",
-  "color-semantic-info-border": "#bfdbfe",
-  "color-semantic-info-strong": "#1d4ed8",
-  "color-text-primary": "#0f172a",
-  "color-text-secondary": "#334155",
-  "color-text-muted": "#64748b",
-  "color-text-subtle": "#94a3b8",
-  "color-text-inverse": "#f8fafc",
-  "color-text-link": "#2563eb",
   "color-text-disabled": "#94a3b8",
-  "color-bg-default": "#ffffff",
-  "color-bg-subtle": "#f8fafc",
-  "color-bg-muted": "#f1f5f9",
-  "color-bg-raised": "#ffffff",
-  "color-bg-inverse": "#0f172a",
-  "color-border-default": "#e2e8f0",
-  "color-border-subtle": "#f1f5f9",
-  "color-border-strong": "#94a3b8",
-  "color-border-inverse": "#334155",
   "color-ring-default": "#4099f1",
   "color-ring-offset": "#ffffff",
   "color-chart-1": "#4099f1",
@@ -599,6 +564,20 @@
   "gradient-surface-soft": "linear-gradient(135deg, rgba(64,153,241,0.04) 0%, rgba(28,206,102,0.03) 100%)",
   "gradient-surface-muted": "linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%)",
   "gradient-eyebrow-chip": "linear-gradient(90deg, rgba(64,153,241,0.12) 0%, rgba(28,206,102,0.08) 100%)",
+  "marketing-hero-ambient": "radial-gradient(ellipse 80% 50% at 50% -20%, light-dark(rgb(64 153 241 / 0.12), rgb(64 153 241 / 0.08)) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%, light-dark(rgb(28 206 102 / 0.06), transparent) 0%, transparent 50%)",
+  "marketing-button-gradient": "linear-gradient(180deg, var(--color-palette-primary-45) 0%, var(--color-palette-primary-40) 100%)",
+  "marketing-button-gradient-hover": "linear-gradient(180deg, var(--color-palette-primary-45) 0%, var(--color-palette-primary-35) 100%)",
+  "marketing-button-fg": "var(--color-palette-primary-100)",
+  "marketing-button-shadow": "0 14px 30px -12px color-mix(in srgb, var(--color-palette-primary-40) 65%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.22)",
+  "marketing-button-shadow-hover": "0 20px 36px -12px color-mix(in srgb, var(--color-palette-primary-40) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.25)",
+  "marketing-eyebrow-gradient": "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 4%, var(--color-surface-container-lowest)) 0%, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-container-lowest)) 100%)",
+  "marketing-card-radius": "24px",
+  "marketing-card-shadow": "0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 18px 40px -28px rgb(15 23 42 / 0.38)",
+  "marketing-card-shadow-hover": "0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 30px 60px -28px rgb(15 23 42 / 0.48)",
+  "marketing-float-shadow": "0 0 0 1px light-dark(rgb(26 28 30 / 0.05), rgb(255 255 255 / 0.08)), 0 24px 50px -22px rgb(15 23 42 / 0.45)",
+  "marketing-accent-line": "linear-gradient(90deg, var(--color-primary) 0%, var(--color-bookub) 35%, var(--color-founderub) 70%, var(--color-payub) 100%)",
+  "marketing-lift": "-6px",
+  "marketing-button-lift": "-2px",
   "duration-instant": "0ms",
   "duration-fast": "150ms",
   "duration-normal": "200ms",
@@ -690,6 +669,7 @@
   "container-xl": "1280px",
   "container-2xl": "1536px",
   "container-nexub": "1440px",
+  "container-marketing": "1280px",
   "container-prose": "65ch",
   "font-family-sans": "'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif",
   "font-family-display": "'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', 'Inter Variable', ui-sans-serif, system-ui, sans-serif",
@@ -753,6 +733,10 @@
   "text-code-lineHeight": "1.6",
   "text-code-letterSpacing": "0",
   "text-code-weight": "400",
+  "type-display-xl-size": "64px",
+  "type-display-xl-lineHeight": "68px",
+  "type-display-xl-letterSpacing": "-0.045em",
+  "type-display-xl-weight": "800",
   "type-display-lg-size": "56px",
   "type-display-lg-lineHeight": "60px",
   "type-display-lg-letterSpacing": "-0.03em",

package/dist/tailwind/preset.js

@@ -45,11 +45,7 @@ const preset = {
         "founderub-container": "var(--color-founderub-container)",
         "on-founderub-container": "var(--color-on-founderub-container)",
         "surface": {
-          "warm": "var(--color-surface-warm)",
-          "muted": "var(--color-surface-muted)",
-          "raised": "var(--color-surface-raised)",
-          "sunken": "var(--color-surface-sunken)",
-          "inverse": "var(--color-surface-inverse)"
+          "warm": "var(--color-surface-warm)"
         },
         "surface-dim": "var(--color-surface-dim)",
         "surface-bright": "var(--color-surface-bright)",
@@ -627,54 +623,9 @@ const preset = {
           "950": "var(--color-neutral-950)",
           "1000": "var(--color-neutral-1000)"
         },
-        "semantic": {
-          "success": {
-            "default": "var(--color-semantic-success-default)",
-            "bg": "var(--color-semantic-success-bg)",
-            "border": "var(--color-semantic-success-border)",
-            "strong": "var(--color-semantic-success-strong)"
-          },
-          "error": {
-            "default": "var(--color-semantic-error-default)",
-            "bg": "var(--color-semantic-error-bg)",
-            "border": "var(--color-semantic-error-border)",
-            "strong": "var(--color-semantic-error-strong)"
-          },
-          "warning": {
-            "default": "var(--color-semantic-warning-default)",
-            "bg": "var(--color-semantic-warning-bg)",
-            "border": "var(--color-semantic-warning-border)",
-            "strong": "var(--color-semantic-warning-strong)"
-          },
-          "info": {
-            "default": "var(--color-semantic-info-default)",
-            "bg": "var(--color-semantic-info-bg)",
-            "border": "var(--color-semantic-info-border)",
-            "strong": "var(--color-semantic-info-strong)"
-          }
-        },
         "text": {
-          "primary": "var(--color-text-primary)",
-          "secondary": "var(--color-text-secondary)",
-          "muted": "var(--color-text-muted)",
-          "subtle": "var(--color-text-subtle)",
-          "inverse": "var(--color-text-inverse)",
-          "link": "var(--color-text-link)",
           "disabled": "var(--color-text-disabled)"
         },
-        "bg": {
-          "default": "var(--color-bg-default)",
-          "subtle": "var(--color-bg-subtle)",
-          "muted": "var(--color-bg-muted)",
-          "raised": "var(--color-bg-raised)",
-          "inverse": "var(--color-bg-inverse)"
-        },
-        "border": {
-          "default": "var(--color-border-default)",
-          "subtle": "var(--color-border-subtle)",
-          "strong": "var(--color-border-strong)",
-          "inverse": "var(--color-border-inverse)"
-        },
         "ring": {
           "default": "var(--color-ring-default)",
           "offset": "var(--color-ring-offset)"
@@ -744,6 +695,7 @@ const preset = {
         "container-xl": "var(--container-xl)",
         "container-2xl": "var(--container-2xl)",
         "container-nexub": "var(--container-nexub)",
+        "container-marketing": "var(--container-marketing)",
         "container-prose": "var(--container-prose)"
       },
       "borderRadius": {
@@ -805,6 +757,14 @@ const preset = {
         "tamil": "var(--font-family-tamil)"
       },
       "fontSize": {
+        "display-xl": [
+          "var(--type-display-xl-size)",
+          {
+            "lineHeight": "var(--type-display-xl-lineHeight)",
+            "letterSpacing": "var(--type-display-xl-letterSpacing)",
+            "fontWeight": "var(--type-display-xl-weight)"
+          }
+        ],
         "display-lg": [
           "var(--type-display-lg-size)",
           {

package/dist/tailwind/theme.css

@@ -43,10 +43,6 @@
   --color-founderub-container: var(--color-founderub-container);
   --color-on-founderub-container: var(--color-on-founderub-container);
   --color-surface-warm: var(--color-surface-warm);
-  --color-surface-muted: var(--color-surface-muted);
-  --color-surface-raised: var(--color-surface-raised);
-  --color-surface-sunken: var(--color-surface-sunken);
-  --color-surface-inverse: var(--color-surface-inverse);
   --color-surface-dim: var(--color-surface-dim);
   --color-surface-bright: var(--color-surface-bright);
   --color-surface-container-lowest: var(--color-surface-container-lowest);
@@ -579,38 +575,7 @@
   --color-neutral-900: var(--color-neutral-900);
   --color-neutral-950: var(--color-neutral-950);
   --color-neutral-1000: var(--color-neutral-1000);
-  --color-semantic-success-default: var(--color-semantic-success-default);
-  --color-semantic-success-bg: var(--color-semantic-success-bg);
-  --color-semantic-success-border: var(--color-semantic-success-border);
-  --color-semantic-success-strong: var(--color-semantic-success-strong);
-  --color-semantic-error-default: var(--color-semantic-error-default);
-  --color-semantic-error-bg: var(--color-semantic-error-bg);
-  --color-semantic-error-border: var(--color-semantic-error-border);
-  --color-semantic-error-strong: var(--color-semantic-error-strong);
-  --color-semantic-warning-default: var(--color-semantic-warning-default);
-  --color-semantic-warning-bg: var(--color-semantic-warning-bg);
-  --color-semantic-warning-border: var(--color-semantic-warning-border);
-  --color-semantic-warning-strong: var(--color-semantic-warning-strong);
-  --color-semantic-info-default: var(--color-semantic-info-default);
-  --color-semantic-info-bg: var(--color-semantic-info-bg);
-  --color-semantic-info-border: var(--color-semantic-info-border);
-  --color-semantic-info-strong: var(--color-semantic-info-strong);
-  --color-text-primary: var(--color-text-primary);
-  --color-text-secondary: var(--color-text-secondary);
-  --color-text-muted: var(--color-text-muted);
-  --color-text-subtle: var(--color-text-subtle);
-  --color-text-inverse: var(--color-text-inverse);
-  --color-text-link: var(--color-text-link);
   --color-text-disabled: var(--color-text-disabled);
-  --color-bg-default: var(--color-bg-default);
-  --color-bg-subtle: var(--color-bg-subtle);
-  --color-bg-muted: var(--color-bg-muted);
-  --color-bg-raised: var(--color-bg-raised);
-  --color-bg-inverse: var(--color-bg-inverse);
-  --color-border-default: var(--color-border-default);
-  --color-border-subtle: var(--color-border-subtle);
-  --color-border-strong: var(--color-border-strong);
-  --color-border-inverse: var(--color-border-inverse);
   --color-ring-default: var(--color-ring-default);
   --color-ring-offset: var(--color-ring-offset);
   --color-chart-1: var(--color-chart-1);
@@ -674,6 +639,7 @@
   --spacing-container-xl: var(--container-xl);
   --spacing-container-2xl: var(--container-2xl);
   --spacing-container-nexub: var(--container-nexub);
+  --spacing-container-marketing: var(--container-marketing);
   --spacing-container-prose: var(--container-prose);
   --radius-none: var(--radius-none);
   --radius-xs: var(--radius-xs);
@@ -725,6 +691,10 @@
   --font-mono: var(--font-family-mono);
   --font-devanagari: var(--font-family-devanagari);
   --font-tamil: var(--font-family-tamil);
+  --text-display-xl: var(--type-display-xl-size);
+  --text-display-xl--line-height: var(--type-display-xl-lineHeight);
+  --text-display-xl--letter-spacing: var(--type-display-xl-letterSpacing);
+  --text-display-xl--font-weight: var(--type-display-xl-weight);
   --text-display-lg: var(--type-display-lg-size);
   --text-display-lg--line-height: var(--type-display-lg-lineHeight);
   --text-display-lg--letter-spacing: var(--type-display-lg-letterSpacing);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/tokens",
-  "version": "2.9.0",
+  "version": "3.1.0",
   "description": "Design tokens for Nexub Design System — colours, typography, spacing, radii, shadows, and motion as CSS variables, Tailwind presets and React Native objects.",
   "type": "module",
   "license": "MIT",