@nebutra/tokens 0.1.3 → 3.0.0

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@nebutra/tokens",
-  "version": "0.1.3",
+  "version": "3.0.0",
   "description": "Unified theme tokens and theme-provider entry for Nebutra apps",
   "private": false,
+  "nebutra": {
+    "status": "foundation",
+    "graph": "core",
+    "productionReady": false
+  },
   "license": "MIT",
   "type": "module",
   "sideEffects": [
@@ -31,10 +36,16 @@
       "types": "./dist/brand-package/use-brand.d.ts",
       "import": "./dist/brand-package/use-brand.js",
       "default": "./dist/brand-package/use-brand.js"
+    },
+    "./values": {
+      "types": "./dist/values.d.ts",
+      "import": "./dist/values.js",
+      "default": "./dist/values.js"
     }
   },
   "dependencies": {
-    "@nebutra/design-tokens": "0.1.2"
+    "@nebutra/design-tokens": "3.0.0",
+    "@nebutra/fonts": "3.0.0"
   },
   "peerDependencies": {
     "react": "^19"
@@ -69,11 +80,12 @@
     "CHANGELOG.md"
   ],
   "scripts": {
-    "build": "node scripts/sync-styles.mjs && node scripts/emit-skins.mjs && tsup",
+    "build": "node scripts/sync-styles.mjs && node scripts/emit-values.mjs && node scripts/emit-skins.mjs && tsup",
     "sync": "node scripts/sync-styles.mjs",
     "emit-skins": "node scripts/emit-skins.mjs",
     "compile-brand": "node scripts/compile-brand.mjs",
     "typecheck": "tsc --noEmit",
-    "test": "tsx --test src/brand-package/__tests__/*.test.ts"
+    "test": "tsx --test src/brand-package/__tests__/*.test.ts src/__tests__/*.test.ts",
+    "emit-values": "node scripts/emit-values.mjs"
   }
 }

package/recipe.css

@@ -11,6 +11,14 @@
  * Tailwind utilities: bg-brand-mark / text-brand-mark (see @theme below).
  */
 
+@custom-variant hover {
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      @slot;
+    }
+  }
+}
+
 :root {
   /* ── Color roles (overridden by brand skins) ──────────────────── */
   --role-action: var(--primary);
@@ -53,12 +61,33 @@
   --control-font-size-md: 0.875rem; /* 14 */
   --control-font-size-lg: 1rem; /* 16 */
   --font-weight-medium: 500;
-  --font-weight-heading: 600;
+  /* 500, not 600: headings in DM Sans read confident at 500 and the measured
+     consensus caps heading weight at 400–510 (Linear 510, Vercel 400). */
+  --font-weight-heading: 500;
+
+  /*
+   * The boundary of an unchecked checkbox / radio. WCAG 1.4.11 wants 3:1 against
+   * the surface for a control's edge; --input and --border are hairlines at
+   * ~1.2:1 and left an empty checkbox all but invisible. Derived from each
+   * language's own foreground and background — the perceptual midpoint — rather
+   * than a scale step, because a skin's --neutral-8 can be a pale mix (Stripe's
+   * is): measured 3.4:1 light / 5.5:1 dark on House, and it holds per brand.
+   */
+  --control-border: color-mix(in oklab, hsl(var(--foreground)) 50%, hsl(var(--background)));
 
   /* ── Elevation (free CSS; brand package replaces these) ───────── */
-  --elevation-card: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  /* House: a card is a hairline (--edge-soft), not a lifted object. Measured
+     consensus — Vercel, OpenAI, Resend, Ramp ban card shadows outright; the
+     one float shadow is for overlays (--elevation-overlay). Seventeen call
+     sites were flattening Card by hand; a Brand Package can lift it again. */
+  --elevation-card: 0 0 #0000;
   --elevation-control: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.04));
   --elevation-raised: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  --elevation-overlay: var(
+    --shadow-xl,
+    0 20px 25px -5px rgb(0 0 0 / 0.1),
+    0 8px 10px -6px rgb(0 0 0 / 0.1)
+  );
 
   /* ── Badge default = brand mark (AI / identity chips; not CTA) ─── */
   --badge-default-bg: hsl(var(--brand-mark));
@@ -352,6 +381,11 @@
   inherits: true;
 }
 
+@property --elevation-overlay {
+  syntax: "*";
+  inherits: true;
+}
+
 /* ── Genuinely untypeable: bare HSL channel triplets ──────────────────────────
  * These carry channels ("222 47% 11%"), not colours — they exist to be wrapped
  * as `hsl(var(--brand-mark))` / `hsl(var(--brand-mark) / 0.08)`, which is what

package/skins/cosmos.css

@@ -0,0 +1,239 @@
+/**
+ * Brand carrier skin: Cosmos (cosmos) v2.0.0
+ * darkDefault=false dualMode=true button=solid
+ * fonts=0 mode=global
+ * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
+ */
+
+:root,
+html[data-brand="cosmos"] {
+  /* ── Color roles (carrier) ── */
+  --role-canvas: 30 20% 96%;
+  --role-canvas-fg: 0 0% 5%;
+  --role-surface: 0 0% 100%;
+  --role-surface-fg: 0 0% 5%;
+  --role-action: 0 0% 5%;
+  --role-action-fg: 30 20% 96%;
+  --role-quiet: 0 0% 100%;
+  --role-quiet-fg: 0 0% 5%;
+  --role-muted: 30 20% 96%;
+  --role-muted-fg: 12 2% 42%;
+  --role-border: 30 5% 85%;
+  --role-input: 30 5% 85%;
+  --role-ring: 0 0% 5%;
+  --role-brand: 0 0% 5%;
+  --role-brand-fg: 30 20% 96%;
+  --brand-mark: 0 0% 5%;
+  --brand-mark-foreground: 30 20% 96%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 30 20% 96%;
+  --foreground: 0 0% 5%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 5%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 5%;
+  --primary: 0 0% 5%;
+  --primary-foreground: 30 20% 96%;
+  --secondary: 0 0% 100%;
+  --secondary-foreground: 0 0% 5%;
+  --muted: 30 20% 96%;
+  --muted-foreground: 12 2% 42%;
+  --accent: 0 0% 5%;
+  --accent-foreground: 30 20% 96%;
+  --destructive: 4 76% 40%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 30 5% 85%;
+  --input: 30 5% 85%;
+  --ring: 0 0% 5%;
+  --success: 134 62% 40%;
+  --success-foreground: 0 0% 100%;
+  --info: 12 2% 42%;
+  --info-foreground: 0 0% 100%;
+  --sidebar: 0 0% 100%;
+  --sidebar-foreground: 0 0% 5%;
+  --sidebar-primary: 0 0% 5%;
+  --sidebar-primary-foreground: 30 20% 96%;
+  --sidebar-accent: 0 0% 5%;
+  --sidebar-accent-foreground: 30 20% 96%;
+  --sidebar-border: 30 5% 85%;
+  --sidebar-ring: 0 0% 5%;
+  --brand-primary: hsl(0 0% 5%);
+  --brand-accent: hsl(0 0% 5%);
+  --brand-accent-foreground: hsl(30 20% 96%);
+  --brand-tertiary: hsl(0 0% 5%);
+  --brand-gradient: hsl(var(--primary));
+  --brand-gradient-reverse: hsl(var(--primary));
+  --brand-gradient-vertical: hsl(var(--primary));
+  --brand-gradient-radial: hsl(var(--primary));
+
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(30 20% 96%);
+  --neutral-2: hsl(0 0% 100%);
+  --neutral-3: color-mix(in oklab, hsl(30 5% 85%) 20%, hsl(0 0% 100%));
+  --neutral-4: color-mix(in oklab, hsl(30 5% 85%) 40%, hsl(0 0% 100%));
+  --neutral-5: color-mix(in oklab, hsl(30 5% 85%) 60%, hsl(0 0% 100%));
+  --neutral-6: color-mix(in oklab, hsl(30 5% 85%) 80%, hsl(0 0% 100%));
+  --neutral-7: hsl(30 5% 85%);
+  --neutral-8: color-mix(in oklab, hsl(12 2% 42%) 25%, hsl(30 5% 85%));
+  --neutral-9: color-mix(in oklab, hsl(12 2% 42%) 50%, hsl(30 5% 85%));
+  --neutral-10: color-mix(in oklab, hsl(12 2% 42%) 75%, hsl(30 5% 85%));
+  --neutral-11: hsl(12 2% 42%);
+  --neutral-12: hsl(0 0% 5%);
+
+  /* Recipe (action language + free elev/radii) */
+  /* Shape slots */
+  --btn-default-radius: 16px;
+  --radius-button: 16px;
+  --radius-buttons: 16px;
+  --radius-md: min(16px, 16px);
+  --radius-card: 16px;
+  --radius-lg: 16px;
+  --radius-badge: 16px;
+  --badge-default-radius: 16px;
+  --radius-inputs: 16px;
+  --input-radius: 16px;
+  --radius-pill: 9999px;
+
+  /* Free elevation (carrier-provided CSS shadows) */
+  --elevation-card: 0 0 #0000;
+  --elevation-control: 0 0 #0000;
+  --elevation-raised: 0 0 #0000;
+  --elevation-xs: 0 0 #0000;
+  --elevation-sm: 0 0 #0000;
+  --elevation-md: 0 0 #0000;
+  --elevation-lg: 0 0 #0000;
+  --btn-default-shadow: 0 0 #0000;
+  --btn-default-bg: hsl(var(--primary));
+  --btn-default-fg: hsl(var(--primary-foreground));
+  --btn-default-border-width: 0px;
+  --btn-default-border: transparent;
+  --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
+  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
+  --badge-default-bg: hsl(var(--secondary));
+  --badge-default-fg: hsl(var(--secondary-foreground));
+  --badge-default-border: transparent;
+  --badge-default-hover-bg: color-mix(in srgb, hsl(var(--secondary)) 90%, white);
+
+  /* Typography */
+  --font-sans:
+    var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia, var(--font-misans, "MiSans"),
+    "PingFang SC", ui-serif, serif;
+  --font-cn:
+    var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia, var(--font-misans, "MiSans"),
+    "PingFang SC", ui-serif, serif;
+  --font-heading:
+    var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia, var(--font-misans, "MiSans"),
+    "PingFang SC", ui-serif, serif;
+  --font-display:
+    var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia, var(--font-misans, "MiSans"),
+    "PingFang SC", ui-serif, serif;
+  --font-mono: var(--font-jetbrains-mono), "JetBrains Mono", ui-monospace, monospace;
+  --font-weight-heading: 350;
+
+  /* Motion */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-micro: 80ms;
+  --motion-duration-micro: 80ms;
+  --duration-flow: 180ms;
+  --motion-duration-flow: 180ms;
+  --duration-reveal: 180ms;
+  --motion-duration-reveal: 180ms;
+  --duration-cinematic: 320ms;
+  --motion-duration-cinematic: 320ms;
+
+  /* Spacing */
+  --space-source-xs: 0.5rem;
+  --space-source-sm: 1rem;
+  --space-source-md: 1.25rem;
+  --space-source-lg: 1.5rem;
+  --space-source-xl: 2rem;
+  --space-source-2xl: 3rem;
+
+  /* Taxonomy / decorative (not product CTA) */
+  --brand-category-linen-canvas: #f7f5f3;
+  --brand-category-ink-black: #0d0d0d;
+  --brand-category-paper-white: #ffffff;
+  --brand-category-stone: #6e6a69;
+  --brand-category-pebble: #9a9796;
+}
+
+.dark,
+html.dark[data-brand="cosmos"] {
+  /* ── Color roles (carrier) ── */
+  --role-canvas: 0 0% 5%;
+  --role-canvas-fg: 30 20% 96%;
+  --role-surface: 0 0% 11%;
+  --role-surface-fg: 30 20% 96%;
+  --role-action: 30 20% 96%;
+  --role-action-fg: 0 0% 5%;
+  --role-quiet: 0 0% 14%;
+  --role-quiet-fg: 30 20% 96%;
+  --role-muted: 0 0% 11%;
+  --role-muted-fg: 15 2% 60%;
+  --role-border: 0 1% 18%;
+  --role-input: 0 1% 18%;
+  --role-ring: 30 20% 96%;
+  --role-brand: 30 20% 96%;
+  --role-brand-fg: 0 0% 5%;
+  --brand-mark: 30 20% 96%;
+  --brand-mark-foreground: 0 0% 5%;
+
+  /* ── shadcn bridge (primary = action CTA) ── */
+  --background: 0 0% 5%;
+  --foreground: 30 20% 96%;
+  --card: 0 0% 11%;
+  --card-foreground: 30 20% 96%;
+  --popover: 0 0% 11%;
+  --popover-foreground: 30 20% 96%;
+  --primary: 30 20% 96%;
+  --primary-foreground: 0 0% 5%;
+  --secondary: 0 0% 14%;
+  --secondary-foreground: 30 20% 96%;
+  --muted: 0 0% 11%;
+  --muted-foreground: 15 2% 60%;
+  --accent: 30 20% 96%;
+  --accent-foreground: 0 0% 5%;
+  --destructive: 4 76% 40%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 1% 18%;
+  --input: 0 1% 18%;
+  --ring: 30 20% 96%;
+  --success: 134 62% 40%;
+  --success-foreground: 0 0% 100%;
+  --info: 12 2% 42%;
+  --info-foreground: 0 0% 100%;
+  --sidebar: 0 0% 11%;
+  --sidebar-foreground: 30 20% 96%;
+  --sidebar-primary: 30 20% 96%;
+  --sidebar-primary-foreground: 0 0% 5%;
+  --sidebar-accent: 30 20% 96%;
+  --sidebar-accent-foreground: 0 0% 5%;
+  --sidebar-border: 0 1% 18%;
+  --sidebar-ring: 30 20% 96%;
+  --brand-primary: hsl(30 20% 96%);
+  --brand-accent: hsl(30 20% 96%);
+  --brand-accent-foreground: hsl(0 0% 5%);
+  --brand-tertiary: hsl(30 20% 96%);
+  --brand-gradient: hsl(var(--primary));
+  --brand-gradient-reverse: hsl(var(--primary));
+  --brand-gradient-vertical: hsl(var(--primary));
+  --brand-gradient-radial: hsl(var(--primary));
+
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(0 0% 5%);
+  --neutral-2: hsl(0 0% 11%);
+  --neutral-3: color-mix(in oklab, hsl(0 1% 18%) 20%, hsl(0 0% 11%));
+  --neutral-4: color-mix(in oklab, hsl(0 1% 18%) 40%, hsl(0 0% 11%));
+  --neutral-5: color-mix(in oklab, hsl(0 1% 18%) 60%, hsl(0 0% 11%));
+  --neutral-6: color-mix(in oklab, hsl(0 1% 18%) 80%, hsl(0 0% 11%));
+  --neutral-7: hsl(0 1% 18%);
+  --neutral-8: color-mix(in oklab, hsl(15 2% 60%) 25%, hsl(0 1% 18%));
+  --neutral-9: color-mix(in oklab, hsl(15 2% 60%) 50%, hsl(0 1% 18%));
+  --neutral-10: color-mix(in oklab, hsl(15 2% 60%) 75%, hsl(0 1% 18%));
+  --neutral-11: hsl(15 2% 60%);
+  --neutral-12: hsl(30 20% 96%);
+}

package/skins/gsap.css

@@ -1,25 +1,10 @@
 /**
  * Brand carrier skin: GSAP (gsap) v1.0.0
  * darkDefault=true dualMode=false button=gradient-stroke
- * fonts=2 mode=global
+ * fonts=0 mode=global
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
  */
 
-/* Brand font faces */
-@font-face {
-  font-family: "Mori";
-  src: url("/brand-assets/mori-regular.woff2") format("woff2");
-  font-weight: 400;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Mori";
-  src: url("/brand-assets/mori-semibold.woff2") format("woff2");
-  font-weight: 600;
-  font-display: swap;
-}
-
 :root,
 .dark,
 html[data-brand="gsap"] {
@@ -70,17 +55,35 @@ html[data-brand="gsap"] {
   --sidebar-accent-foreground: 54 100% 94%;
   --sidebar-border: 70 5% 25%;
   --sidebar-ring: 137 92% 47%;
+  --brand-primary: hsl(137 92% 47%);
+  --brand-accent: hsl(137 92% 47%);
+  --brand-accent-foreground: hsl(150 7% 6%);
+  --brand-tertiary: hsl(137 92% 47%);
   --brand-gradient: hsl(var(--primary));
   --brand-gradient-reverse: hsl(var(--primary));
   --brand-gradient-vertical: hsl(var(--primary));
   --brand-gradient-radial: hsl(var(--primary));
 
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(150 7% 6%);
+  --neutral-2: hsl(0 0% 10%);
+  --neutral-3: color-mix(in oklab, hsl(70 5% 25%) 20%, hsl(0 0% 10%));
+  --neutral-4: color-mix(in oklab, hsl(70 5% 25%) 40%, hsl(0 0% 10%));
+  --neutral-5: color-mix(in oklab, hsl(70 5% 25%) 60%, hsl(0 0% 10%));
+  --neutral-6: color-mix(in oklab, hsl(70 5% 25%) 80%, hsl(0 0% 10%));
+  --neutral-7: hsl(70 5% 25%);
+  --neutral-8: color-mix(in oklab, hsl(60 6% 46%) 25%, hsl(70 5% 25%));
+  --neutral-9: color-mix(in oklab, hsl(60 6% 46%) 50%, hsl(70 5% 25%));
+  --neutral-10: color-mix(in oklab, hsl(60 6% 46%) 75%, hsl(70 5% 25%));
+  --neutral-11: hsl(60 6% 46%);
+  --neutral-12: hsl(54 100% 94%);
+
   /* Recipe (action language + free elev/radii) */
   /* Shape slots */
   --btn-default-radius: 100px;
   --radius-button: 100px;
   --radius-buttons: 100px;
-  --radius-md: 100px;
+  --radius-md: min(100px, 8px);
   --radius-card: 8px;
   --radius-lg: 8px;
   --radius-badge: 9999px;
@@ -120,9 +123,18 @@ html[data-brand="gsap"] {
   --control-font-size-md: 0.8125rem;
 
   /* Typography */
-  --font-sans: "Mori", "Inter Tight", "DM Sans", ui-sans-serif, system-ui, sans-serif;
-  --font-heading: "Mori", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "Mori", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
+  --font-sans:
+    var(--font-reg-inter-tight), "Mori", "Inter Tight", "DM Sans", var(--font-misans, "MiSans"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-cn:
+    var(--font-reg-inter-tight), "Mori", "Inter Tight", "DM Sans", var(--font-misans, "MiSans"),
+    "PingFang SC", ui-sans-serif, system-ui, sans-serif;
+  --font-heading:
+    var(--font-reg-inter-tight), "Mori", "Inter Tight", var(--font-misans, "MiSans"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
+  --font-display:
+    var(--font-reg-inter-tight), "Mori", "Inter Tight", var(--font-misans, "MiSans"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
   --font-weight-heading: 600;
 
   /* Motion */

package/skins/linear.css

@@ -1,19 +1,10 @@
 /**
  * Brand carrier skin: Linear (linear) v1.0.0
  * darkDefault=true dualMode=true button=solid
- * fonts=1 mode=global
+ * fonts=0 mode=global
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
  */
 
-/* Brand font faces */
-@font-face {
-  font-family: "Inter Variable";
-  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2")
-    format("woff2");
-  font-weight: 100 900;
-  font-display: swap;
-}
-
 :root,
 html[data-brand="linear"] {
   /* ── Color roles (carrier) ── */
@@ -28,7 +19,7 @@ html[data-brand="linear"] {
   --role-muted: 220 14% 96%;
   --role-muted-fg: 218 5% 41%;
   --role-border: 220 13% 91%;
-  --role-input: 0 0% 100%;
+  --role-input: 220 13% 91%;
   --role-ring: 64 89% 54%;
 
   /* ── shadcn bridge (primary = action CTA) ── */
@@ -49,7 +40,7 @@ html[data-brand="linear"] {
   --destructive: 0 79% 63%;
   --destructive-foreground: 0 0% 100%;
   --border: 220 13% 91%;
-  --input: 0 0% 100%;
+  --input: 220 13% 91%;
   --ring: 64 89% 54%;
   --success: 134 62% 40%;
   --success-foreground: 0 0% 100%;
@@ -63,17 +54,35 @@ html[data-brand="linear"] {
   --sidebar-accent-foreground: 210 11% 4%;
   --sidebar-border: 220 13% 91%;
   --sidebar-ring: 64 89% 54%;
+  --brand-primary: hsl(64 89% 54%);
+  --brand-accent: hsl(64 89% 54%);
+  --brand-accent-foreground: hsl(210 11% 4%);
+  --brand-tertiary: hsl(64 89% 54%);
   --brand-gradient: hsl(var(--primary));
   --brand-gradient-reverse: hsl(var(--primary));
   --brand-gradient-vertical: hsl(var(--primary));
   --brand-gradient-radial: hsl(var(--primary));
 
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(0 0% 100%);
+  --neutral-2: hsl(0 0% 98%);
+  --neutral-3: color-mix(in oklab, hsl(220 13% 91%) 20%, hsl(0 0% 98%));
+  --neutral-4: color-mix(in oklab, hsl(220 13% 91%) 40%, hsl(0 0% 98%));
+  --neutral-5: color-mix(in oklab, hsl(220 13% 91%) 60%, hsl(0 0% 98%));
+  --neutral-6: color-mix(in oklab, hsl(220 13% 91%) 80%, hsl(0 0% 98%));
+  --neutral-7: hsl(220 13% 91%);
+  --neutral-8: color-mix(in oklab, hsl(218 5% 41%) 25%, hsl(220 13% 91%));
+  --neutral-9: color-mix(in oklab, hsl(218 5% 41%) 50%, hsl(220 13% 91%));
+  --neutral-10: color-mix(in oklab, hsl(218 5% 41%) 75%, hsl(220 13% 91%));
+  --neutral-11: hsl(218 5% 41%);
+  --neutral-12: hsl(210 11% 4%);
+
   /* Recipe (action language + free elev/radii) */
   /* Shape slots */
   --btn-default-radius: 6px;
   --radius-button: 6px;
   --radius-buttons: 6px;
-  --radius-md: 6px;
+  --radius-md: min(6px, 12px);
   --radius-card: 12px;
   --radius-lg: 12px;
   --radius-badge: 9999px;
@@ -113,10 +122,20 @@ html[data-brand="linear"] {
   --control-font-size-md: 0.8125rem;
 
   /* Typography */
-  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-heading: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: "Berkeley Mono", "JetBrains Mono", ui-monospace, monospace;
+  --font-sans:
+    var(--font-inter), "Inter Variable", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
+  --font-cn:
+    var(--font-inter), "Inter Variable", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
+  --font-heading:
+    var(--font-inter), "Inter Variable", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
+  --font-display:
+    var(--font-inter), "Inter Variable", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
+  --font-mono:
+    var(--font-jetbrains-mono), "Berkeley Mono", "JetBrains Mono", ui-monospace, monospace;
   --font-weight-heading: 510;
 
   /* Motion */
@@ -191,8 +210,26 @@ html.dark[data-brand="linear"] {
   --sidebar-accent-foreground: 218 21% 85%;
   --sidebar-border: 223 9% 15%;
   --sidebar-ring: 64 89% 54%;
+  --brand-primary: hsl(64 89% 54%);
+  --brand-accent: hsl(64 89% 54%);
+  --brand-accent-foreground: hsl(210 11% 4%);
+  --brand-tertiary: hsl(64 89% 54%);
   --brand-gradient: hsl(var(--primary));
   --brand-gradient-reverse: hsl(var(--primary));
   --brand-gradient-vertical: hsl(var(--primary));
   --brand-gradient-radial: hsl(var(--primary));
+
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(210 11% 4%);
+  --neutral-2: hsl(210 6% 6%);
+  --neutral-3: color-mix(in oklab, hsl(223 9% 15%) 20%, hsl(210 6% 6%));
+  --neutral-4: color-mix(in oklab, hsl(223 9% 15%) 40%, hsl(210 6% 6%));
+  --neutral-5: color-mix(in oklab, hsl(223 9% 15%) 60%, hsl(210 6% 6%));
+  --neutral-6: color-mix(in oklab, hsl(223 9% 15%) 80%, hsl(210 6% 6%));
+  --neutral-7: hsl(223 9% 15%);
+  --neutral-8: color-mix(in oklab, hsl(218 5% 41%) 25%, hsl(223 9% 15%));
+  --neutral-9: color-mix(in oklab, hsl(218 5% 41%) 50%, hsl(223 9% 15%));
+  --neutral-10: color-mix(in oklab, hsl(218 5% 41%) 75%, hsl(223 9% 15%));
+  --neutral-11: hsl(218 5% 41%);
+  --neutral-12: hsl(0 0% 100%);
 }

package/skins/notion.css

@@ -1,26 +1,10 @@
 /**
  * Brand carrier skin: Notion (notion) v1.0.0
  * darkDefault=false dualMode=false button=solid
- * fonts=2 mode=global
+ * fonts=0 mode=global
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
  */
 
-/* Brand font faces */
-@font-face {
-  font-family: "NotionInter";
-  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2")
-    format("woff2");
-  font-weight: 100 900;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Lyon Text";
-  src: url("/brand-assets/lyon-text-regular.woff2") format("woff2");
-  font-weight: 400;
-  font-display: swap;
-}
-
 :root,
 html[data-brand="notion"] {
   /* ── Color roles (carrier) ── */
@@ -33,9 +17,9 @@ html[data-brand="notion"] {
   --role-quiet: 208 92% 95%;
   --role-quiet-fg: 208 100% 44%;
   --role-muted: 208 92% 95%;
-  --role-muted-fg: 0 0% 46%;
+  --role-muted-fg: 0 0% 43%;
   --role-border: 30 5% 88%;
-  --role-input: 0 0% 100%;
+  --role-input: 30 5% 88%;
   --role-ring: 208 100% 44%;
   --role-brand: 0 0% 0%;
   --role-brand-fg: 0 0% 100%;
@@ -54,13 +38,13 @@ html[data-brand="notion"] {
   --secondary: 208 92% 95%;
   --secondary-foreground: 208 100% 44%;
   --muted: 208 92% 95%;
-  --muted-foreground: 0 0% 46%;
+  --muted-foreground: 0 0% 43%;
   --accent: 0 0% 0%;
   --accent-foreground: 0 0% 100%;
   --destructive: 7 92% 58%;
   --destructive-foreground: 0 0% 100%;
   --border: 30 5% 88%;
-  --input: 0 0% 100%;
+  --input: 30 5% 88%;
   --ring: 208 100% 44%;
   --warning: 40 100% 53%;
   --warning-foreground: 0 0% 0%;
@@ -74,17 +58,35 @@ html[data-brand="notion"] {
   --sidebar-accent-foreground: 0 0% 100%;
   --sidebar-border: 30 5% 88%;
   --sidebar-ring: 208 100% 44%;
+  --brand-primary: hsl(0 0% 0%);
+  --brand-accent: hsl(208 100% 44%);
+  --brand-accent-foreground: hsl(0 0% 100%);
+  --brand-tertiary: hsl(208 100% 44%);
   --brand-gradient: hsl(var(--primary));
   --brand-gradient-reverse: hsl(var(--primary));
   --brand-gradient-vertical: hsl(var(--primary));
   --brand-gradient-radial: hsl(var(--primary));
 
+  /* ── Neutral ramp, anchored on this language's roles ── */
+  --neutral-1: hsl(30 10% 96%);
+  --neutral-2: hsl(0 0% 100%);
+  --neutral-3: color-mix(in oklab, hsl(30 5% 88%) 20%, hsl(0 0% 100%));
+  --neutral-4: color-mix(in oklab, hsl(30 5% 88%) 40%, hsl(0 0% 100%));
+  --neutral-5: color-mix(in oklab, hsl(30 5% 88%) 60%, hsl(0 0% 100%));
+  --neutral-6: color-mix(in oklab, hsl(30 5% 88%) 80%, hsl(0 0% 100%));
+  --neutral-7: hsl(30 5% 88%);
+  --neutral-8: color-mix(in oklab, hsl(0 0% 43%) 25%, hsl(30 5% 88%));
+  --neutral-9: color-mix(in oklab, hsl(0 0% 43%) 50%, hsl(30 5% 88%));
+  --neutral-10: color-mix(in oklab, hsl(0 0% 43%) 75%, hsl(30 5% 88%));
+  --neutral-11: hsl(0 0% 43%);
+  --neutral-12: hsl(0 0% 0%);
+
   /* Recipe (action language + free elev/radii) */
   /* Shape slots */
   --btn-default-radius: 8px;
   --radius-button: 8px;
   --radius-buttons: 8px;
-  --radius-md: 8px;
+  --radius-md: min(8px, 12px);
   --radius-card: 12px;
   --radius-lg: 12px;
   --radius-badge: 9999px;
@@ -114,9 +116,18 @@ html[data-brand="notion"] {
   --badge-default-hover-bg: color-mix(in srgb, hsl(var(--secondary)) 90%, white);
 
   /* Typography */
-  --font-sans: "NotionInter", "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-heading: "NotionInter", "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "NotionInter", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-sans:
+    var(--font-inter), "NotionInter", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
+  --font-cn:
+    var(--font-inter), "NotionInter", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
+  --font-heading:
+    var(--font-inter), "NotionInter", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
+  --font-display:
+    var(--font-inter), "NotionInter", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
+    ui-sans-serif, system-ui, sans-serif;
   --font-weight-heading: 700;
 
   /* Motion */