@nebutra/design-tokens 0.1.0 → 0.1.1

package/README.md

@@ -86,6 +86,8 @@ A custom Style Dictionary transform (`name/nebutra/css`) maps DTCG paths to the
 | `elevation.xs`              | `--elevation-xs`        |
 | `brand.primary`             | `--brand-primary`       |
 | `brand.gradient.primary`    | `--brand-gradient`      |
+| `brand.gradient.logo`       | `--brand-gradient-logo` |
+| `brand.gradient.logo-reverse` | `--brand-gradient-logo-reverse` |
 | `size.container.text`       | `--container-text`      |
 | `size.radius.md`            | `--radius-md`           |
 | `duration.flow`             | `--duration-flow`       |

package/build/css/dark-dense.css

@@ -0,0 +1,32 @@
+/**
+ * @nebutra/design-tokens — generated from W3C DTCG tokens.
+ * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
+ */
+
+[data-theme="dark-dense"] {
+  --color-primary: oklch(0.696 0.17 162.5);
+  --color-primary-foreground: oklch(1 0 0);
+  --color-secondary: oklch(0.527 0.154 163.2);
+  --color-secondary-foreground: oklch(1 0 0);
+  --color-accent: oklch(0.765 0.163 163.4);
+  --color-accent-foreground: oklch(0.141 0.005 285.9);
+  --color-background: oklch(0.112 0 0);
+  --color-foreground: oklch(0.985 0 0);
+  --color-card: oklch(0.162 0.004 285.9);
+  --color-card-foreground: oklch(0.985 0 0);
+  --color-popover: oklch(0.162 0.004 285.9);
+  --color-popover-foreground: oklch(0.985 0 0);
+  --color-muted: oklch(0.215 0.006 285.9);
+  --color-muted-foreground: oklch(0.705 0.015 286);
+  --color-border: oklch(0.215 0.006 285.9);
+  --color-input: oklch(0.215 0.006 285.9);
+  --color-ring: oklch(0.696 0.17 162.5);
+  --color-primary-hover: color-mix(in oklch, oklch(0.696 0.17 162.5), white 15%);
+  --color-primary-active: color-mix(in oklch, oklch(0.696 0.17 162.5), black 10%);
+  --radius-sm: 0.125rem;
+  --radius-md: 0.25rem;
+  --radius-lg: 0.25rem;
+  --radius-xl: 0.375rem;
+  --font-sans: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
+  --font-heading: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
+}

package/build/css/dark.css

@@ -0,0 +1,247 @@
+/**
+ * @nebutra/design-tokens — generated from W3C DTCG tokens.
+ * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
+ */
+
+.dark {
+  --nebutra-blue-50: #f0f4ff;
+  --nebutra-blue-100: #dbe4ff;
+  --nebutra-blue-200: #bac8ff;
+  --nebutra-blue-300: #91a7ff;
+  --nebutra-blue-400: #5c7cfa;
+  --nebutra-blue-500: #0033fe; /** Base brand color — 云毓蓝 */
+  --nebutra-blue-600: #002ad4;
+  --nebutra-blue-700: #0021ab;
+  --nebutra-blue-800: #001882;
+  --nebutra-blue-900: #000f59;
+  --nebutra-blue-950: #000830;
+  --nebutra-cyan-50: #e6fff8;
+  --nebutra-cyan-100: #b3ffec;
+  --nebutra-cyan-200: #80ffe0;
+  --nebutra-cyan-300: #4dfcd4;
+  --nebutra-cyan-400: #1af7c8;
+  --nebutra-cyan-500: #0bf1c3; /** Base brand accent — 云毓青 */
+  --nebutra-cyan-600: #09c9a3;
+  --nebutra-cyan-700: #07a183;
+  --nebutra-cyan-800: #057963;
+  --nebutra-cyan-900: #035143;
+  --nebutra-cyan-950: #012923;
+  --nebutra-neutral-50: #f8fafc;
+  --nebutra-neutral-100: #f1f5f9;
+  --nebutra-neutral-200: #e2e8f0;
+  --nebutra-neutral-300: #cbd5e1;
+  --nebutra-neutral-400: #94a3b8;
+  --nebutra-neutral-500: #64748b;
+  --nebutra-neutral-600: #475569;
+  --nebutra-neutral-700: #334155;
+  --nebutra-neutral-800: #1e293b;
+  --nebutra-neutral-900: #0f172a;
+  --nebutra-neutral-950: #020617;
+  --nebutra-gray-50: #fafafa;
+  --nebutra-gray-100: #f5f5f5;
+  --nebutra-gray-200: #e5e5e5;
+  --nebutra-gray-300: #d4d4d4;
+  --nebutra-gray-400: #a3a3a3;
+  --nebutra-gray-500: #737373;
+  --nebutra-gray-600: #525252;
+  --nebutra-gray-700: #404040;
+  --nebutra-gray-800: #262626;
+  --nebutra-gray-900: #171717;
+  --nebutra-gray-950: #0a0a0a;
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-full: 9999px;
+  --radius-button: 0.5rem; /** 2026 button radius — Vercel/Linear/Cursor consensus */
+  --radius-card: 0.75rem; /** 2026 card radius */
+  --radius-panel: 1rem; /** 2026 bento/hero panel radius */
+  --duration-micro: 100ms; /** Micro-feedback: hover, focus, toggle, button press */
+  --duration-flow: 200ms; /** State flow: modal open, dropdown reveal, tab switch, default page transition */
+  --duration-reveal: 300ms; /** Content unveil: slide-in, expand, accordion, drawer */
+  --duration-cinematic: 500ms; /** Hero-grade entrance: landing reveal, large delight moments */
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --tracking-display: -0.04em; /** Hero H1 */
+  --tracking-heading: -0.03em; /** Section H2/H3 */
+  --tracking-tight: -0.015em; /** Body emphasis */
+  --leading-display: 1.05;
+  --leading-heading: 1.15;
+  --ring-hairline: inset 0 0 0 1px rgb(255 255 255 / 0.06); /** Hairline override — more visible on dark background */
+  --overlay-faint: rgb(255 255 255 / 0.06); /** Dark-mode faint overlay (6% white) — inverted from light */
+  --font-sans: "Geist", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "vivo Sans", sans-serif;
+  --font-display: "Geist", "Noto Sans SC", sans-serif;
+  --font-heading: "Geist", "Noto Sans SC", sans-serif;
+  --font-mono: "Geist Mono", "Fira Code", ui-monospace, Consolas, "Courier New", monospace;
+  --transition-duration: 200ms; /** Default transition duration — 200ms flow rail. */
+  --transition-easing: ease-out; /** ease-out keyword form (CSS-friendly). Equivalent to cubic-bezier(0,0,0.2,1). */
+  --brand-primary: #5c7cfa; /** Dark-mode brand primary — visible against dark surfaces (uses --blue-9 = nebutra-blue-400). */
+  --brand-accent: #1af7c8; /** Dark-mode brand accent — visible against dark surfaces (uses --cyan-9 = nebutra-cyan-400). */
+  --brand-tertiary: #8b5cf6;
+  --brand-gradient: linear-gradient(135deg, #254bfa 0%, #057963 100%); /** UI brand gradient — usage-adjusted from the locked VI blue/cyan anchors to reduce saturation and preserve white-text contrast. */
+  --brand-gradient-reverse: linear-gradient(135deg, #057963 0%, #254bfa 100%);
+  --brand-gradient-vertical: linear-gradient(180deg, #254bfa 0%, #057963 100%);
+  --brand-gradient-radial: radial-gradient(circle, #057963 0%, #254bfa 100%);
+  --brand-gradient-logo: linear-gradient(135deg, #0033fe 0%, #0bf1c3 100%); /** Logo/VI standard gradient. Use for brand assets only; product UI should use --brand-gradient. */
+  --brand-gradient-logo-reverse: linear-gradient(135deg, #0bf1c3 0%, #0033fe 100%);
+  --status-danger: #ef4444;
+  --status-warning: #f59e0b;
+  --status-success: #22c55e;
+  --status-info: #5c7cfa; /** Dark-mode info color — equals dark brand-primary. */
+  --container-text: 896px;
+  --container-content: 1152px;
+  --container-wide: 1400px;
+  --radius: 0.375rem; /** Geist-matching 6px */
+  --motion-duration-micro: 100ms;
+  --motion-duration-flow: 200ms;
+  --motion-duration-reveal: 300ms;
+  --motion-duration-cinematic: 500ms;
+  --focus-ring: 0 0 0 2px hsl(var(--ring) / 0.4); /** Single-layer translucent focus ring (2026 pattern). Legacy box-shadow consumers stay compatible; modern surfaces should prefer the global :focus-visible outline rule in static/base.css. */
+  --neutral-1: #020617;
+  --neutral-2: #0f172a;
+  --neutral-3: #1e293b;
+  --neutral-4: #334155;
+  --neutral-5: #475569;
+  --neutral-6: #171717;
+  --neutral-7: #262626;
+  --neutral-8: #404040;
+  --neutral-9: #94a3b8;
+  --neutral-10: #cbd5e1;
+  --neutral-11: #e2e8f0;
+  --neutral-12: #f8fafc;
+  --blue-1: #000830;
+  --blue-2: #000f59;
+  --blue-3: #001882;
+  --blue-4: #0021ab;
+  --blue-5: #002ad4;
+  --blue-6: #001882;
+  --blue-7: #0021ab;
+  --blue-8: #002ad4;
+  --blue-9: #5c7cfa;
+  --blue-10: #91a7ff;
+  --blue-11: #bac8ff;
+  --blue-12: #dbe4ff;
+  --cyan-1: #012923;
+  --cyan-2: #035143;
+  --cyan-3: #057963;
+  --cyan-4: #07a183;
+  --cyan-5: #09c9a3;
+  --cyan-6: #057963;
+  --cyan-7: #07a183;
+  --cyan-8: #09c9a3;
+  --cyan-9: #1af7c8;
+  --cyan-10: #4dfcd4;
+  --cyan-11: #80ffe0;
+  --cyan-12: #b3ffec;
+  --background: 222 47% 4%;
+  --foreground: 210 40% 98%;
+  --card: 222 47% 7%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222 47% 7%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 228 90% 72%;
+  --primary-foreground: 222 47% 4%;
+  --secondary: 217 33% 17%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217 33% 17%;
+  --muted-foreground: 215 20% 65%;
+  --accent: 228 100% 12%;
+  --accent-foreground: 228 95% 67%;
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 210 40% 98%;
+  --success: 142 76% 36%;
+  --success-foreground: 222 47% 4%;
+  --warning: 38 80% 45%;
+  --warning-foreground: 222 47% 4%;
+  --info: 228 95% 67%;
+  --info-foreground: 222 47% 4%;
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+  --ring: 0 0% 88%; /** Focus ring (dark mode) — neutral light gray. Mirrors light-mode neutral foreground choice. */
+  --sidebar: 222 47% 6%;
+  --sidebar-foreground: 210 40% 96%;
+  --sidebar-primary: 228 95% 67%;
+  --sidebar-primary-foreground: 222 47% 4%;
+  --sidebar-accent: 228 100% 12%;
+  --sidebar-accent-foreground: 228 95% 67%;
+  --sidebar-border: 0 0% 14.9%;
+  --sidebar-ring: 228 95% 67%;
+  --chart-1: 228 95% 67%;
+  --chart-2: 168 96% 54%;
+  --chart-3: 228 100% 82%;
+  --chart-4: 168 100% 75%;
+  --chart-5: 228 100% 50%;
+  --ds-blue-200: oklch(25.45% 0.0811 255.8);
+  --ds-blue-700: oklch(57.61% 0.2321 258.23);
+  --ds-blue-900: oklch(71.7% 0.1648 250.79360374054167);
+  --ds-red-200: oklch(25.93% 0.0834 19.02);
+  --ds-red-700: oklch(62.56% 0.2234 23.03);
+  --ds-red-900: oklch(69.96% 0.2136 22.03);
+  --ds-amber-200: oklch(24.95% 0.0642 64.78);
+  --ds-amber-700: oklch(81.87% 0.1969 76.46);
+  --ds-amber-900: oklch(77.21% 0.1991 64.28);
+  --ds-green-200: oklch(27.12% 0.0895 150.09);
+  --ds-green-700: oklch(64.58% 0.199 147.27);
+  --ds-green-900: oklch(73.1% 0.2158 148.29);
+  --ds-teal-300: oklch(31.5% 0.0767 180.99);
+  --ds-teal-700: oklch(64.92% 0.1403 181.95);
+  --ds-teal-900: oklch(74.56% 0.1765 182.8);
+  --ds-purple-200: oklch(25.91% 0.0921 314.41);
+  --ds-purple-700: oklch(55.5% 0.2186 306.12);
+  --ds-purple-900: oklch(69.87% 0.2037 309.51);
+  --ds-pink-300: oklch(31.15% 0.1067 355.93);
+  --ds-pink-700: oklch(63.52% 0.2346 1.01);
+  --ds-pink-900: oklch(69.36% 0.2223 3.91);
+  --ds-gray-100: hsla(0, 0%, 10%, 1);
+  --ds-gray-200: hsla(0, 0%, 12%, 1);
+  --ds-gray-500: hsla(0, 0%, 27%, 1);
+  --ds-gray-600: hsla(0, 0%, 53%, 1);
+  --ds-gray-700: hsla(0, 0%, 56%, 1);
+  --ds-gray-1000: hsla(0, 0%, 93%, 1);
+  --ds-background-100: hsla(0, 0%, 4%, 1);
+  --ds-trial-start: rgb(0, 112, 243);
+  --ds-trial-end: rgb(248, 28, 229);
+  --ds-turbo-start: #ff1e56;
+  --ds-turbo-end: #0096ff;
+  --elevation-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --elevation-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+  --elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+  --elevation-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
+  --elevation-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.6);
+  --elevation-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.8);
+  --elevation-brand: 0 0 0 1px rgb(92 124 250 / 0.25), 0 4px 20px -2px rgb(92 124 250 / 0.3);
+  --elevation-brand-lg: 0 0 0 1px rgb(92 124 250 / 0.3), 0 8px 40px -4px rgb(92 124 250 / 0.4);
+}
+
+.dark {
+  /* Gradient aliases — both --brand-gradient-* (canonical, CLAUDE.md) and --gradient-brand-* (legacy) are emitted. */
+  --gradient-brand: var(--brand-gradient);
+  --gradient-brand-hover: var(--brand-gradient-reverse);
+  --gradient-brand-vertical: var(--brand-gradient-vertical);
+  --gradient-brand-reverse: var(--brand-gradient-reverse);
+  --gradient-brand-radial: var(--brand-gradient-radial);
+  --gradient-brand-glow: var(--brand-gradient-radial);
+  --gradient-brand-logo: var(--brand-gradient-logo);
+  --gradient-brand-logo-reverse: var(--brand-gradient-logo-reverse);
+  --gradient-section: var(--brand-gradient-vertical);
+  --gradient-glow: var(--brand-gradient-radial);
+}
+
+@supports (color: oklch(0 0 0)) {
+  .dark {
+    /* oklch values for modern engines (2024+); sRGB hsla() fallback above. */
+    --ds-gray-100: oklch(0.232 0 0);
+    --ds-gray-200: oklch(0.259 0 0);
+    --ds-gray-500: oklch(0.409 0 0);
+    --ds-gray-600: oklch(0.59 0 0);
+    --ds-gray-700: oklch(0.598 0 0);
+    --ds-gray-1000: oklch(0.94 0 0);
+    --ds-background-100: oklch(0.143 0 0);
+  }
+}

package/build/css/gradient.css

@@ -0,0 +1,35 @@
+/**
+ * @nebutra/design-tokens — generated from W3C DTCG tokens.
+ * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
+ */
+
+[data-theme="gradient"] {
+  --color-primary: oklch(0.546 0.245 262.9);
+  --color-primary-foreground: oklch(1 0 0);
+  --color-secondary: oklch(0.707 0.165 254.6);
+  --color-secondary-foreground: oklch(1 0 0);
+  --color-accent: oklch(0.623 0.214 259.1);
+  --color-accent-foreground: oklch(1 0 0);
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.141 0.005 285.9);
+  --color-card: oklch(0.985 0 0);
+  --color-card-foreground: oklch(0.141 0.005 285.9);
+  --color-popover: oklch(1 0 0);
+  --color-popover-foreground: oklch(0.141 0.005 285.9);
+  --color-muted: oklch(0.967 0.001 286);
+  --color-muted-foreground: oklch(0.552 0.016 286);
+  --color-border: oklch(0.922 0.004 286);
+  --color-input: oklch(0.922 0.004 286);
+  --color-ring: oklch(0.546 0.245 262.9);
+  --color-primary-hover: color-mix(in oklch, oklch(0.546 0.245 262.9), black 10%);
+  --color-primary-active: color-mix(in oklch, oklch(0.546 0.245 262.9), black 20%);
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+}

package/build/css/light.css

@@ -0,0 +1,269 @@
+/**
+ * @nebutra/design-tokens — generated from W3C DTCG tokens.
+ * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
+ */
+
+:root {
+  --nebutra-blue-50: #f0f4ff;
+  --nebutra-blue-100: #dbe4ff;
+  --nebutra-blue-200: #bac8ff;
+  --nebutra-blue-300: #91a7ff;
+  --nebutra-blue-400: #5c7cfa;
+  --nebutra-blue-500: #0033fe; /** Base brand color — 云毓蓝 */
+  --nebutra-blue-600: #002ad4;
+  --nebutra-blue-700: #0021ab;
+  --nebutra-blue-800: #001882;
+  --nebutra-blue-900: #000f59;
+  --nebutra-blue-950: #000830;
+  --nebutra-cyan-50: #e6fff8;
+  --nebutra-cyan-100: #b3ffec;
+  --nebutra-cyan-200: #80ffe0;
+  --nebutra-cyan-300: #4dfcd4;
+  --nebutra-cyan-400: #1af7c8;
+  --nebutra-cyan-500: #0bf1c3; /** Base brand accent — 云毓青 */
+  --nebutra-cyan-600: #09c9a3;
+  --nebutra-cyan-700: #07a183;
+  --nebutra-cyan-800: #057963;
+  --nebutra-cyan-900: #035143;
+  --nebutra-cyan-950: #012923;
+  --nebutra-neutral-50: #f8fafc;
+  --nebutra-neutral-100: #f1f5f9;
+  --nebutra-neutral-200: #e2e8f0;
+  --nebutra-neutral-300: #cbd5e1;
+  --nebutra-neutral-400: #94a3b8;
+  --nebutra-neutral-500: #64748b;
+  --nebutra-neutral-600: #475569;
+  --nebutra-neutral-700: #334155;
+  --nebutra-neutral-800: #1e293b;
+  --nebutra-neutral-900: #0f172a;
+  --nebutra-neutral-950: #020617;
+  --nebutra-gray-50: #fafafa;
+  --nebutra-gray-100: #f5f5f5;
+  --nebutra-gray-200: #e5e5e5;
+  --nebutra-gray-300: #d4d4d4;
+  --nebutra-gray-400: #a3a3a3;
+  --nebutra-gray-500: #737373;
+  --nebutra-gray-600: #525252;
+  --nebutra-gray-700: #404040;
+  --nebutra-gray-800: #262626;
+  --nebutra-gray-900: #171717;
+  --nebutra-gray-950: #0a0a0a;
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-full: 9999px;
+  --radius-button: 0.5rem; /** 2026 button radius — Vercel/Linear/Cursor consensus */
+  --radius-card: 0.75rem; /** 2026 card radius */
+  --radius-panel: 1rem; /** 2026 bento/hero panel radius */
+  --duration-micro: 100ms; /** Micro-feedback: hover, focus, toggle, button press */
+  --duration-flow: 200ms; /** State flow: modal open, dropdown reveal, tab switch, default page transition */
+  --duration-reveal: 300ms; /** Content unveil: slide-in, expand, accordion, drawer */
+  --duration-cinematic: 500ms; /** Hero-grade entrance: landing reveal, large delight moments */
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --tracking-display: -0.04em; /** Hero H1 */
+  --tracking-heading: -0.03em; /** Section H2/H3 */
+  --tracking-tight: -0.015em; /** Body emphasis */
+  --leading-display: 1.05;
+  --leading-heading: 1.15;
+  --ring-hairline: inset 0 0 0 1px rgb(255 255 255 / 0.04); /** Etched-glass hairline (light mode value, dark mode override in themes/dark.json) */
+  --overlay-faint: rgb(0 0 0 / 0.06); /** Light-mode faint overlay (6% black) */
+  --font-sans: "Geist", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "vivo Sans", sans-serif;
+  --font-display: "Geist", "Noto Sans SC", sans-serif;
+  --font-heading: "Geist", "Noto Sans SC", sans-serif;
+  --font-mono: "Geist Mono", "Fira Code", ui-monospace, Consolas, "Courier New", monospace;
+  --transition-duration: 200ms; /** Default transition duration — 200ms flow rail. */
+  --transition-easing: ease-out; /** ease-out keyword form (CSS-friendly). Equivalent to cubic-bezier(0,0,0.2,1). */
+  --brand-primary: #0033fe; /** Brand primary — 云毓蓝 */
+  --brand-accent: #0bf1c3; /** Brand accent — 云毓青 */
+  --brand-tertiary: #8b5cf6;
+  --brand-gradient: linear-gradient(135deg, #254bfa 0%, #057963 100%); /** UI brand gradient — usage-adjusted from the locked VI blue/cyan anchors to reduce saturation and preserve white-text contrast. */
+  --brand-gradient-reverse: linear-gradient(135deg, #057963 0%, #254bfa 100%);
+  --brand-gradient-vertical: linear-gradient(180deg, #254bfa 0%, #057963 100%);
+  --brand-gradient-radial: radial-gradient(circle, #057963 0%, #254bfa 100%);
+  --brand-gradient-logo: linear-gradient(135deg, #0033fe 0%, #0bf1c3 100%); /** Logo/VI standard gradient. Use for brand assets only; product UI should use --brand-gradient. */
+  --brand-gradient-logo-reverse: linear-gradient(135deg, #0bf1c3 0%, #0033fe 100%);
+  --status-danger: #ef4444;
+  --status-warning: #f59e0b;
+  --status-success: #22c55e;
+  --status-info: #0033fe; /** VI: Info = Brand Blue */
+  --container-text: 896px;
+  --container-content: 1152px;
+  --container-wide: 1400px;
+  --radius: 0.375rem; /** Geist-matching 6px */
+  --motion-duration-micro: 100ms;
+  --motion-duration-flow: 200ms;
+  --motion-duration-reveal: 300ms;
+  --motion-duration-cinematic: 500ms;
+  --focus-ring: 0 0 0 2px hsl(var(--ring) / 0.4); /** Single-layer translucent focus ring (2026 pattern). Legacy box-shadow consumers stay compatible; modern surfaces should prefer the global :focus-visible outline rule in static/base.css. */
+  --neutral-1: #ffffff; /** app background */
+  --neutral-2: #f8fafc; /** subtle background */
+  --neutral-3: #f1f5f9; /** component bg default */
+  --neutral-4: #e2e8f0; /** component bg hover */
+  --neutral-5: #cbd5e1; /** component bg active */
+  --neutral-6: #e2e8f0; /** subtle border */
+  --neutral-7: #cbd5e1; /** default border */
+  --neutral-8: #94a3b8; /** hovered border */
+  --neutral-9: #64748b; /** solid fill */
+  --neutral-10: #475569; /** solid fill hover */
+  --neutral-11: #334155; /** secondary text */
+  --neutral-12: #0f172a; /** primary text */
+  --blue-1: #f0f4ff;
+  --blue-2: #dbe4ff;
+  --blue-3: #bac8ff;
+  --blue-4: #91a7ff;
+  --blue-5: #5c7cfa;
+  --blue-6: #bac8ff;
+  --blue-7: #91a7ff;
+  --blue-8: #5c7cfa;
+  --blue-9: #0033fe; /** solid fill — main brand */
+  --blue-10: #002ad4;
+  --blue-11: #0021ab;
+  --blue-12: #000f59;
+  --cyan-1: #e6fff8;
+  --cyan-2: #b3ffec;
+  --cyan-3: #80ffe0;
+  --cyan-4: #4dfcd4;
+  --cyan-5: #1af7c8;
+  --cyan-6: #80ffe0;
+  --cyan-7: #4dfcd4;
+  --cyan-8: #1af7c8;
+  --cyan-9: #0bf1c3;
+  --cyan-10: #09c9a3;
+  --cyan-11: #07a183;
+  --cyan-12: #035143;
+  --background: 0 0% 100%; /** HSL channel triple — consume via hsl(var(--background)) */
+  --foreground: 222 47% 11%;
+  --card: 0 0% 100%;
+  --card-foreground: 222 47% 11%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222 47% 11%;
+  --primary: 228 85% 56%; /** Softer brand blue #254bfa */
+  --primary-foreground: 0 0% 100%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 222 47% 11%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215 25% 45%;
+  --accent: 228 100% 97%;
+  --accent-foreground: 228 85% 56%; /** Softer brand blue — desaturated to match --primary, avoids 100% saturation glare on focus/accent */
+  --destructive: 0 84% 45%;
+  --destructive-foreground: 0 0% 100%;
+  --success: 142 71% 29%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 222 47% 11%;
+  --info: 228 85% 56%;
+  --info-foreground: 0 0% 100%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 222 47% 11%; /** Focus ring — neutral foreground (Vercel/Linear/Cursor 2026 pattern). Brand blue is reserved for selected/active states; focus indication is chrome and stays neutral. Consumed by global :focus-visible outline as hsl(var(--ring) / 0.5). */
+  --sidebar: 210 40% 98%;
+  --sidebar-foreground: 215 25% 27%;
+  --sidebar-primary: 228 85% 56%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 228 100% 97%;
+  --sidebar-accent-foreground: 228 85% 56%;
+  --sidebar-border: 214 32% 91%;
+  --sidebar-ring: 228 85% 56%;
+  --chart-1: 228 100% 50%;
+  --chart-2: 168 91% 49%;
+  --chart-3: 263 70% 66%;
+  --chart-4: 168 91% 70%;
+  --chart-5: 228 100% 35%;
+  --ds-blue-200: oklch(96.29% 0.0195 250.59);
+  --ds-blue-700: oklch(57.61% 0.2508 258.23);
+  --ds-blue-900: oklch(53.18% 0.2399 256.9900584162342);
+  --ds-red-200: oklch(95.41% 0.0299 14.252646656611997);
+  --ds-red-700: oklch(62.56% 0.2524 23.03);
+  --ds-red-900: oklch(54.99% 0.232 25.29);
+  --ds-amber-200: oklch(96.81% 0.0495 90.24227879900472);
+  --ds-amber-700: oklch(81.87% 0.1969 76.46);
+  --ds-amber-900: oklch(52.79% 0.1496 54.65);
+  --ds-green-200: oklch(96.92% 0.037 147.15);
+  --ds-green-700: oklch(64.58% 0.1746 147.27);
+  --ds-green-900: oklch(51.75% 0.1453 147.65);
+  --ds-teal-300: oklch(94.92% 0.0478 182.07);
+  --ds-teal-700: oklch(64.92% 0.1572 181.95);
+  --ds-teal-900: oklch(52.08% 0.1251 182.93);
+  --ds-purple-200: oklch(96.73% 0.0228 309.8);
+  --ds-purple-700: oklch(55.5% 0.3008 306.12);
+  --ds-purple-900: oklch(47.18% 0.2579 304);
+  --ds-pink-300: oklch(93.83% 0.0451 356.29);
+  --ds-pink-700: oklch(63.52% 0.238 1.01);
+  --ds-pink-900: oklch(53.5% 0.2058 2.84);
+  --ds-gray-100: hsla(0, 0%, 95%, 1);
+  --ds-gray-200: hsla(0, 0%, 92%, 1);
+  --ds-gray-500: hsla(0, 0%, 79%, 1);
+  --ds-gray-600: hsla(0, 0%, 66%, 1);
+  --ds-gray-700: hsla(0, 0%, 56%, 1);
+  --ds-gray-1000: hsla(0, 0%, 9%, 1);
+  --ds-background-100: hsla(0, 0%, 100%, 1);
+  --ds-trial-start: rgb(0, 112, 243);
+  --ds-trial-end: rgb(248, 28, 229);
+  --ds-turbo-start: #ff1e56;
+  --ds-turbo-end: #0096ff;
+  --elevation-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --elevation-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --elevation-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --elevation-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --elevation-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --elevation-brand: 0 0 0 1px rgb(0 51 254 / 0.15), 0 4px 20px -2px rgb(0 51 254 / 0.2);
+  --elevation-brand-lg: 0 0 0 1px rgb(0 51 254 / 0.2), 0 8px 40px -4px rgb(0 51 254 / 0.3);
+}
+
+:root {
+  /* Wide-gamut bridge: default to sRGB, upgrade to Display-P3 when available. */
+  --nebutra-brand-blue: var(--nebutra-blue-500);
+  --nebutra-brand-cyan: var(--nebutra-cyan-500);
+}
+
+:root {
+  /* Gradient aliases — both --brand-gradient-* (canonical, CLAUDE.md) and --gradient-brand-* (legacy) are emitted. */
+  --gradient-brand: var(--brand-gradient);
+  --gradient-brand-hover: var(--brand-gradient-reverse);
+  --gradient-brand-vertical: var(--brand-gradient-vertical);
+  --gradient-brand-reverse: var(--brand-gradient-reverse);
+  --gradient-brand-radial: var(--brand-gradient-radial);
+  --gradient-brand-glow: var(--brand-gradient-radial);
+  --gradient-brand-logo: var(--brand-gradient-logo);
+  --gradient-brand-logo-reverse: var(--brand-gradient-logo-reverse);
+  --gradient-section: var(--brand-gradient-vertical);
+  --gradient-glow: var(--brand-gradient-radial);
+}
+
+:root {
+  /* Composite tokens — combine duration + easing for shorthand use. */
+  --transition: 150ms ease-out;
+  --focus-ring: 0 0 0 2px hsl(var(--ring) / 0.4);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  :root {
+    /* Richer brand values on Display-P3 hardware; sRGB fallback above. */
+    --nebutra-blue-500: color(display-p3 0.03 0.19 0.99);
+    --nebutra-cyan-500: color(display-p3 0.07 0.94 0.79);
+    --nebutra-brand-blue: color(display-p3 0.03 0.19 0.99);
+    --nebutra-brand-cyan: color(display-p3 0.07 0.94 0.79);
+  }
+}
+
+@supports (color: oklch(0 0 0)) {
+  :root {
+    /* oklch values for modern engines (2024+); sRGB hsla() fallback above. */
+    --ds-gray-100: oklch(0.953 0 0);
+    --ds-gray-200: oklch(0.929 0 0);
+    --ds-gray-500: oklch(0.81 0 0);
+    --ds-gray-600: oklch(0.69 0 0);
+    --ds-gray-700: oklch(0.598 0 0);
+    --ds-gray-1000: oklch(0.215 0 0);
+    --ds-background-100: oklch(1 0 0);
+  }
+}

package/build/css/minimal.css

@@ -0,0 +1,36 @@
+/**
+ * @nebutra/design-tokens — generated from W3C DTCG tokens.
+ * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
+ */
+
+[data-theme="minimal"] {
+  --color-primary: oklch(0.21 0.006 285.9);
+  --color-primary-foreground: oklch(1 0 0);
+  --color-secondary: oklch(0.442 0.017 285.9);
+  --color-secondary-foreground: oklch(1 0 0);
+  --color-accent: oklch(0.552 0.016 286);
+  --color-accent-foreground: oklch(1 0 0);
+  --color-background: oklch(0.985 0 0);
+  --color-foreground: oklch(0.141 0.005 285.9);
+  --color-card: oklch(1 0 0);
+  --color-card-foreground: oklch(0.141 0.005 285.9);
+  --color-popover: oklch(1 0 0);
+  --color-popover-foreground: oklch(0.141 0.005 285.9);
+  --color-muted: oklch(0.967 0.001 286);
+  --color-muted-foreground: oklch(0.552 0.016 286);
+  --color-border: oklch(0.922 0.004 286);
+  --color-input: oklch(0.922 0.004 286);
+  --color-ring: oklch(0.21 0.006 285.9);
+  --color-primary-hover: color-mix(in oklch, oklch(0.21 0.006 285.9), white 20%);
+  --color-primary-active: color-mix(in oklch, oklch(0.21 0.006 285.9), white 10%);
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-heading: "Playfair Display", ui-serif, Georgia, serif;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.07);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.07);
+}

package/build/css/neon.css

@@ -0,0 +1,49 @@
+/**
+ * @nebutra/design-tokens — generated from W3C DTCG tokens.
+ * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
+ */
+
+@theme {
+  --color-primary: oklch(0.452 0.313 264.1);
+  --color-primary-foreground: oklch(1 0 0);
+  --color-secondary: oklch(0.715 0.143 215.2);
+  --color-secondary-foreground: oklch(1 0 0);
+  --color-accent: oklch(0.714 0.203 264.1);
+  --color-accent-foreground: oklch(0.141 0.005 285.9);
+  --color-background: oklch(0.141 0.005 285.9);
+  --color-foreground: oklch(0.985 0 0);
+  --color-card: oklch(0.212 0.006 285.9);
+  --color-card-foreground: oklch(0.985 0 0);
+  --color-popover: oklch(0.212 0.006 285.9);
+  --color-popover-foreground: oklch(0.985 0 0);
+  --color-muted: oklch(0.274 0.006 286);
+  --color-muted-foreground: oklch(0.705 0.015 286);
+  --color-border: oklch(0.274 0.006 286);
+  --color-input: oklch(0.274 0.006 286);
+  --color-ring: oklch(0.452 0.313 264.1);
+  --color-destructive: oklch(0.577 0.245 27.3);
+  --color-destructive-foreground: oklch(1 0 0);
+  --color-success: oklch(0.723 0.219 149.6);
+  --color-success-foreground: oklch(1 0 0);
+  --color-warning: oklch(0.769 0.189 70.1);
+  --color-warning-foreground: oklch(0.141 0.005 285.9);
+  --color-info: oklch(0.623 0.214 259.1);
+  --color-info-foreground: oklch(1 0 0);
+  --color-primary-hover: color-mix(in oklch, oklch(0.452 0.313 264.1), white 15%);
+  --color-primary-active: color-mix(in oklch, oklch(0.452 0.313 264.1), black 10%);
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
+  --font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5);
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
+}