rift-ds 1.4.0 → 1.5.0

package/README.md

@@ -16,7 +16,7 @@ An open source React design system built for AI products and coding agents: comp
 - **One package, zero dependencies.** React is the only required peer dependency; recharts is optional and only for the charts entry. No configuration API, no providers, no build-tool integration: theming is plain CSS custom properties, so it works in any bundler, in any stack, beside anything you already use.
 - **Free, open source, consumed your way.** MIT end to end, no pro tier, no paywalled components. Install the npm package, pull single components as source through the shadcn CLI, or clone the repo and own every line; all three are first-class paths.
 - **A few primitives re-theme everything.** Every semantic token chains to a primitive, so a handful of overrides cascade through every component, the charts, and the ambient background, in both colour modes. Your brand is a short CSS block, not a fork.
-- **The shipped themes prove it.** Each one is the same system under different primitives, saved as a complete look: colour modes, a type pairing with self-hosted fonts, radius, density, motion, elevation, the chart palette. Setting `data-brand` on the root element applies all of it with zero runtime JavaScript, the build holds every theme's action colours to WCAG AA in both modes, and the playground builds yours the same way.
+- **The shipped themes prove it.** Each one is the same system under different primitives, saved as a complete look: colour modes, a type pairing with self-hosted fonts, type weight and tracking, icon weight, radius, density, motion, elevation, the chart palette. Setting `data-brand` on the root element applies all of it with zero runtime JavaScript, the build holds every theme's action colours to WCAG AA in both modes, and the playground builds yours the same way.
 - **The AI product set is in the box.** Composer, streaming chat thread, tool calls, reasoning, thread panel and tabs: the components an assistant UI needs, the same set this repo's own site chat is built from.
 - **Legible to coding agents.** One command installs the agent skill and prints the MCP connect line, and the MCP tools and per-component markdown are generated from the same JSDoc that builds the shipped `.d.ts`: an agent reads the exact contract npm ships, no key, no account.
 - **Docs that cannot lie.** Every count, list, and prop table is generated from source registries and build-validated; CI fails on drift, and every component story ships through an accessibility audit. What the docs say is what ships.

package/components/ContextMenu/ContextMenu.css

@@ -114,6 +114,31 @@
   background-color: var(--color-action-passive-bg-hover);
 }
 
+/* States — selected: the current choice of a set. DropdownMenu.css owns
+   the recipe (passive wash held, full-strength text and icon, trailing
+   check); the two menus share the entry model, so they share the look. */
+.ds-context-menu__item--selected {
+  background-color: var(--color-action-passive-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.ds-context-menu__item--selected:hover,
+.ds-context-menu__item--selected.ds-context-menu__item--focused {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+.ds-context-menu__item--selected .ds-context-menu__item-icon {
+  color: var(--color-icon-primary);
+}
+
+.ds-context-menu__check {
+  --icon-size: var(--icon-size-500);
+  color: var(--color-icon-primary);
+  margin-left: auto;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
 /* States — disabled */
 .ds-context-menu__item--disabled {
   opacity: 0.4;

package/components/ContextMenu/ContextMenu.js

@@ -121,14 +121,17 @@ const SubEntry = ({
   const itemClasses = [
     `${baseClass}__item`,
     entry.disabled ? `${baseClass}__item--disabled` : "",
-    entry.destructive ? `${baseClass}__item--destructive` : ""
+    entry.destructive ? `${baseClass}__item--destructive` : "",
+    entry.selected ? `${baseClass}__item--selected` : ""
   ].filter(Boolean).join(" ");
+  const isChoice = entry.selected !== void 0;
   return /* @__PURE__ */ jsxs(
     "li",
     {
       id: itemId,
       className: itemClasses,
-      role: "menuitem",
+      role: isChoice ? "menuitemradio" : "menuitem",
+      "aria-checked": isChoice ? entry.selected : void 0,
       "aria-disabled": entry.disabled || void 0,
       onClick: (e) => {
         e.stopPropagation();
@@ -142,7 +145,8 @@ const SubEntry = ({
           entry.icon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon material-symbols-rounded`, "aria-hidden": "true", children: entry.icon }),
           entry.label
         ] }),
-        entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut })
+        entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut }),
+        entry.selected && /* @__PURE__ */ jsx("span", { className: `${baseClass}__check material-symbols-rounded`, "aria-hidden": "true", children: "check" })
       ]
     }
   );
@@ -321,14 +325,17 @@ const ContextMenu = React.forwardRef(
         `${baseClass}__item`,
         isFocused ? `${baseClass}__item--focused` : "",
         entry.disabled ? `${baseClass}__item--disabled` : "",
-        entry.destructive ? `${baseClass}__item--destructive` : ""
+        entry.destructive ? `${baseClass}__item--destructive` : "",
+        entry.selected ? `${baseClass}__item--selected` : ""
       ].filter(Boolean).join(" ");
+      const isChoice = entry.selected !== void 0;
       return /* @__PURE__ */ jsxs(
         "li",
         {
           id: `${generatedId}-item-${myIndex}`,
           className: itemClasses,
-          role: "menuitem",
+          role: isChoice ? "menuitemradio" : "menuitem",
+          "aria-checked": isChoice ? entry.selected : void 0,
           "aria-disabled": entry.disabled || void 0,
           onClick: (e) => {
             e.stopPropagation();
@@ -349,7 +356,8 @@ const ContextMenu = React.forwardRef(
               ),
               entry.label
             ] }),
-            entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut })
+            entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut }),
+            entry.selected && /* @__PURE__ */ jsx("span", { className: `${baseClass}__check material-symbols-rounded`, "aria-hidden": "true", children: "check" })
           ]
         },
         `item-${index}`

package/components/DropdownMenu/DropdownMenu.css

@@ -145,6 +145,35 @@
   background-color: var(--color-action-passive-bg-hover);
 }
 
+/* ============================================
+   SELECTED ITEM
+   The current choice of a set: the passive wash held down, text and icon
+   at full strength, and a trailing check — three cues, none of them the
+   action colour, which a menu row has no claim on.
+   ============================================ */
+
+.ds-dropdown-menu__item--selected {
+  background-color: var(--color-action-passive-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.ds-dropdown-menu__item--selected:hover,
+.ds-dropdown-menu__item--selected.ds-dropdown-menu__item--focused {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+.ds-dropdown-menu__item--selected .ds-dropdown-menu__item-icon {
+  color: var(--color-icon-primary);
+}
+
+.ds-dropdown-menu__check {
+  --icon-size: var(--icon-size-500);
+  color: var(--color-icon-primary);
+  margin-left: auto;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
 /* ============================================
    DISABLED ITEM
    ============================================ */

package/components/DropdownMenu/DropdownMenu.d.ts

@@ -11,6 +11,8 @@ export interface DropdownMenuItem {
     disabled?: boolean;
     /** Destructive / danger styling (red text) for delete, remove, etc. */
     destructive?: boolean;
+    /** Marks the item as the current choice of a set: it holds the passive wash and a trailing check, and is announced as a checked radio item. Leave undefined on plain action items; pass `false` on the unchosen members of a set so they are announced as radio items too. Ignored on an item that opens a sub-menu. */
+    selected?: boolean;
     /** Click handler */
     onClick?: () => void;
     /** Nested sub-menu items */

package/components/DropdownMenu/DropdownMenu.js

@@ -120,14 +120,17 @@ const MenuPanel = ({
     const itemClasses = [
       `${baseClass}__item`,
       entry.disabled ? `${baseClass}__item--disabled` : "",
-      entry.destructive ? `${baseClass}__item--destructive` : ""
+      entry.destructive ? `${baseClass}__item--destructive` : "",
+      entry.selected ? `${baseClass}__item--selected` : ""
     ].filter(Boolean).join(" ");
+    const isChoice = entry.selected !== void 0;
     return /* @__PURE__ */ jsxs(
       "li",
       {
         id: entryId,
         className: itemClasses,
-        role: "menuitem",
+        role: isChoice ? "menuitemradio" : "menuitem",
+        "aria-checked": isChoice ? entry.selected : void 0,
         "aria-disabled": entry.disabled || void 0,
         onClick: (e) => {
           e.stopPropagation();
@@ -141,7 +144,8 @@ const MenuPanel = ({
             entry.icon && (typeof entry.icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon material-symbols-rounded`, "aria-hidden": "true", children: entry.icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon`, "aria-hidden": "true", children: entry.icon })),
             entry.label
           ] }),
-          entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut })
+          entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut }),
+          entry.selected && /* @__PURE__ */ jsx("span", { className: `${baseClass}__check material-symbols-rounded`, "aria-hidden": "true", children: "check" })
         ]
       },
       `item-${index}`
@@ -253,7 +257,7 @@ const DropdownMenu = ({
   };
   useEffect(() => {
     if (isOpen && focusedIndex >= 0 && panelRef.current) {
-      const allItems = panelRef.current.querySelectorAll(`[role="menuitem"]`);
+      const allItems = panelRef.current.querySelectorAll(`[role="menuitem"], [role="menuitemradio"]`);
       const el = allItems[focusedIndex];
       el?.scrollIntoView({ block: "nearest" });
     }
@@ -291,14 +295,17 @@ const DropdownMenu = ({
       `${baseClass}__item`,
       isFocused ? `${baseClass}__item--focused` : "",
       entry.disabled ? `${baseClass}__item--disabled` : "",
-      entry.destructive ? `${baseClass}__item--destructive` : ""
+      entry.destructive ? `${baseClass}__item--destructive` : "",
+      entry.selected ? `${baseClass}__item--selected` : ""
     ].filter(Boolean).join(" ");
+    const isChoice = entry.selected !== void 0;
     return /* @__PURE__ */ jsxs(
       "li",
       {
         id: `${generatedId}-item-${myIndex}`,
         className: itemClasses,
-        role: "menuitem",
+        role: isChoice ? "menuitemradio" : "menuitem",
+        "aria-checked": isChoice ? entry.selected : void 0,
         "aria-disabled": entry.disabled || void 0,
         onClick: (e) => {
           e.stopPropagation();
@@ -312,7 +319,8 @@ const DropdownMenu = ({
             entry.icon && (typeof entry.icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon material-symbols-rounded`, "aria-hidden": "true", children: entry.icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__item-icon`, "aria-hidden": "true", children: entry.icon })),
             entry.label
           ] }),
-          entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut })
+          entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut }),
+          entry.selected && /* @__PURE__ */ jsx("span", { className: `${baseClass}__check material-symbols-rounded`, "aria-hidden": "true", children: "check" })
         ]
       },
       `item-${index}`

package/components/Quote/Quote.css

@@ -36,8 +36,8 @@
 
 /* ============================================
    VARIANT — PULL (large display quote)
-   Display type per the weight-contrast rule —
-   no border, the scale is the emphasis.
+   Display-tier type: no border, the scale is
+   the emphasis.
    ============================================ */
 
 .ds-quote--pull .ds-quote__text {

package/components/ShaderField/useShaderField.d.ts

@@ -22,7 +22,7 @@ export interface ShaderParams {
     /**
      * How much the composition resists shrinking with the container, 0–1.
      *
-     * At 0 — the default, and the behaviour a CSS blob layer has — the whole
+     * At 0 — the behaviour a CSS blob layer has — the whole
      * field is fitted to whatever width it is given, so a phone shows the
      * entire composition at phone scale: every source small, and more of them
      * crowded into view than the look was built for. At 1 the field holds the
@@ -31,9 +31,9 @@ export interface ShaderParams {
      * keeping some of the shrink so colours still bleed together on a small
      * screen. Above the reference width it does nothing.
      *
-     * Raise it for a full-viewport background, which is read on a phone as a
-     * scene rather than a diagram; leave it at 0 wherever the point is to see
-     * the whole composition, such as a small demo tile.
+     * The default sits between the two, which suits a full-viewport background,
+     * read on a phone as a scene rather than a diagram; set it to 0 wherever
+     * the point is to see the whole composition, such as a small demo tile.
      */
     crop: number;
 }

package/components/Stat/Stat.css

@@ -13,8 +13,8 @@
 }
 
 /* ============================================
-   VALUE — display weight (300), per the
-   weight-contrast rule for display numerals
+   VALUE — the display tier's weight (300 in the
+   base theme), so numerals follow the theme
    ============================================ */
 
 .ds-stat__value {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rift-ds",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "An AI-ready React design system: accessible components on composable tokens, light/dark theming, and CSS-variable overrides.",
   "author": {
     "name": "Robert Ritacca",

package/tokens/presets/contrast.css

@@ -21,7 +21,7 @@
   font-weight: 300 700;
   font-display: swap;
   src: url('../../fonts/presets/ibm-plex-sans-300-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 html[data-brand="contrast"] {
@@ -70,14 +70,14 @@ html[data-brand="contrast"] {
   --primitive-green-09: #007750;
   --primitive-green-10: #00462F;
   --primitive-green-11: #003624;
-  --primitive-neutral-00: #F5F7FF;
-  --primitive-neutral-00-a01: rgba(245, 247, 255, 0.01);
-  --primitive-neutral-00-a60: rgba(245, 247, 255, 0.6);
-  --primitive-neutral-00-a90: rgba(245, 247, 255, 0.9);
-  --primitive-neutral-01: #E7EAF2;
-  --primitive-neutral-01-a01: rgba(231, 234, 242, 0.01);
-  --primitive-neutral-01-a60: rgba(231, 234, 242, 0.6);
-  --primitive-neutral-01-a82: rgba(231, 234, 242, 0.82);
+  --primitive-neutral-00: #FAFBFF;
+  --primitive-neutral-00-a01: rgba(250, 251, 255, 0.01);
+  --primitive-neutral-00-a60: rgba(250, 251, 255, 0.6);
+  --primitive-neutral-00-a90: rgba(250, 251, 255, 0.9);
+  --primitive-neutral-01: #ECEDF1;
+  --primitive-neutral-01-a01: rgba(236, 237, 241, 0.01);
+  --primitive-neutral-01-a60: rgba(236, 237, 241, 0.6);
+  --primitive-neutral-01-a82: rgba(236, 237, 241, 0.82);
   --primitive-neutral-02: #CDD0D8;
   --primitive-neutral-02-a80: rgba(205, 208, 216, 0.8);
   --primitive-neutral-03: #B4B7BF;

package/tokens/presets/coral.css

@@ -21,7 +21,7 @@
   font-weight: 300 700;
   font-display: swap;
   src: url('../../fonts/presets/dm-sans-300-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
@@ -75,7 +75,7 @@
   font-weight: 300;
   font-display: swap;
   src: url('../../fonts/presets/poppins-300-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
@@ -84,7 +84,7 @@
   font-weight: 400;
   font-display: swap;
   src: url('../../fonts/presets/poppins-400-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
@@ -93,7 +93,7 @@
   font-weight: 500;
   font-display: swap;
   src: url('../../fonts/presets/poppins-500-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
@@ -102,7 +102,7 @@
   font-weight: 600;
   font-display: swap;
   src: url('../../fonts/presets/poppins-600-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
@@ -111,7 +111,7 @@
   font-weight: 700;
   font-display: swap;
   src: url('../../fonts/presets/poppins-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 html[data-brand="coral"] {

package/tokens/presets/forest.css

@@ -21,7 +21,7 @@
   font-weight: 300 700;
   font-display: swap;
   src: url('../../fonts/presets/dm-sans-300-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
@@ -39,7 +39,7 @@
   font-weight: 300 700;
   font-display: swap;
   src: url('../../fonts/presets/montserrat-300-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 html[data-brand="forest"] {
@@ -94,14 +94,14 @@ html[data-brand="forest"] {
   --primitive-green-09: #133023;
   --primitive-green-10: #0B1C14;
   --primitive-green-11: #091610;
-  --primitive-neutral-00: #F2F5F3;
-  --primitive-neutral-00-a01: rgba(242, 245, 243, 0.01);
-  --primitive-neutral-00-a60: rgba(242, 245, 243, 0.6);
-  --primitive-neutral-00-a90: rgba(242, 245, 243, 0.9);
-  --primitive-neutral-01: #E5E8E6;
-  --primitive-neutral-01-a01: rgba(229, 232, 230, 0.01);
-  --primitive-neutral-01-a60: rgba(229, 232, 230, 0.6);
-  --primitive-neutral-01-a82: rgba(229, 232, 230, 0.82);
+  --primitive-neutral-00: #F8FAF9;
+  --primitive-neutral-00-a01: rgba(248, 250, 249, 0.01);
+  --primitive-neutral-00-a60: rgba(248, 250, 249, 0.6);
+  --primitive-neutral-00-a90: rgba(248, 250, 249, 0.9);
+  --primitive-neutral-01: #EBECEC;
+  --primitive-neutral-01-a01: rgba(235, 236, 236, 0.01);
+  --primitive-neutral-01-a60: rgba(235, 236, 236, 0.6);
+  --primitive-neutral-01-a82: rgba(235, 236, 236, 0.82);
   --primitive-neutral-02: #CBCECD;
   --primitive-neutral-02-a80: rgba(203, 206, 205, 0.8);
   --primitive-neutral-03: #B3B6B5;

package/tokens/presets/gold.css

@@ -6,6 +6,24 @@
  * Regenerate: node scripts/generate-preset-stylesheets.mjs
  * Import after tokens.css, then set data-brand="gold" on <html>.
  */
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 300 800;
+  font-display: swap;
+  src: url('../../fonts/presets/manrope-300-800-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Manrope';
+  font-style: normal;
+  font-weight: 300 800;
+  font-display: swap;
+  src: url('../../fonts/presets/manrope-300-800-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
 @font-face {
   font-family: 'Space Grotesk';
   font-style: normal;
@@ -21,7 +39,7 @@
   font-weight: 300 700;
   font-display: swap;
   src: url('../../fonts/presets/space-grotesk-300-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 html[data-brand="gold"] {
@@ -46,7 +64,33 @@ html[data-brand="gold"] {
   --color-core-ui-secondary: var(--primitive-yellow-10);
   --color-input-border-hover: var(--primitive-yellow-08);
   --color-input-border-selected: var(--primitive-yellow-07);
-  --font-family-primary: 'Space Grotesk', sans-serif;
+  --font-caption-letter-spacing: -0.01em;
+  --font-display-1-letter-spacing: 0.01em;
+  --font-display-1-weight: 500;
+  --font-display-2-letter-spacing: 0.005em;
+  --font-display-2-weight: 500;
+  --font-family-heading: 'Space Grotesk', sans-serif;
+  --font-family-primary: 'Manrope', sans-serif;
+  --font-heading-1-letter-spacing: 0.005em;
+  --font-heading-1-weight: 700;
+  --font-heading-2-letter-spacing: 0.005em;
+  --font-heading-2-weight: 700;
+  --font-heading-3-letter-spacing: 0.005em;
+  --font-heading-3-weight: 700;
+  --font-mega-1-letter-spacing: 0.01em;
+  --font-mega-1-weight: 500;
+  --font-mega-2-letter-spacing: 0.01em;
+  --font-mega-2-weight: 500;
+  --font-overline-letter-spacing: 0.07em;
+  --font-paragraph-emphasis-letter-spacing: -0.02em;
+  --font-paragraph-letter-spacing: -0.01em;
+  --font-paragraph-sm-emphasis-letter-spacing: -0.01em;
+  --font-paragraph-sm-letter-spacing: -0.01em;
+  --font-sub-display-letter-spacing: 0.005em;
+  --font-sub-display-weight: 500;
+  --font-title-body-letter-spacing: -0.02em;
+  --font-title-body-weight: 700;
+  --material-symbols-weight: 500;
   --motion-duration-base: 180ms;
   --motion-duration-deliberate: 360ms;
   --motion-duration-fast: 135ms;
@@ -65,6 +109,16 @@ html[data-brand="gold"] {
   --primitive-blue-09: #1B2C71;
   --primitive-blue-10: #0F193E;
   --primitive-blue-11: #0A112B;
+  --primitive-gap-050: 2px;
+  --primitive-gap-100: 4px;
+  --primitive-gap-1000: 38px;
+  --primitive-gap-1500: 57px;
+  --primitive-gap-200: 8px;
+  --primitive-gap-2000: 76px;
+  --primitive-gap-300: 11px;
+  --primitive-gap-3000: 114px;
+  --primitive-gap-400: 15px;
+  --primitive-gap-500: 19px;
   --primitive-green-00: #F8FDFB;
   --primitive-green-01: #EFFAF6;
   --primitive-green-02: #D1F1E6;
@@ -77,14 +131,14 @@ html[data-brand="gold"] {
   --primitive-green-09: #1A6A50;
   --primitive-green-10: #0F3E2F;
   --primitive-green-11: #0C3024;
-  --primitive-neutral-00: #FFFDF9;
-  --primitive-neutral-00-a01: rgba(255, 253, 249, 0.01);
-  --primitive-neutral-00-a60: rgba(255, 253, 249, 0.6);
-  --primitive-neutral-00-a90: rgba(255, 253, 249, 0.9);
-  --primitive-neutral-01: #F2F0EB;
-  --primitive-neutral-01-a01: rgba(242, 240, 235, 0.01);
-  --primitive-neutral-01-a60: rgba(242, 240, 235, 0.6);
-  --primitive-neutral-01-a82: rgba(242, 240, 235, 0.82);
+  --primitive-neutral-00: #FFFEFC;
+  --primitive-neutral-00-a01: rgba(255, 254, 252, 0.01);
+  --primitive-neutral-00-a60: rgba(255, 254, 252, 0.6);
+  --primitive-neutral-00-a90: rgba(255, 254, 252, 0.9);
+  --primitive-neutral-01: #F1F0EE;
+  --primitive-neutral-01-a01: rgba(241, 240, 238, 0.01);
+  --primitive-neutral-01-a60: rgba(241, 240, 238, 0.6);
+  --primitive-neutral-01-a82: rgba(241, 240, 238, 0.82);
   --primitive-neutral-02: #D8D6D2;
   --primitive-neutral-02-a80: rgba(216, 214, 210, 0.8);
   --primitive-neutral-03: #BFBDB9;
@@ -117,6 +171,15 @@ html[data-brand="gold"] {
   --primitive-orange-09: #8A5321;
   --primitive-orange-10: #523214;
   --primitive-orange-11: #3D250F;
+  --primitive-padding-050: 2px;
+  --primitive-padding-100: 4px;
+  --primitive-padding-1000: 38px;
+  --primitive-padding-150: 6px;
+  --primitive-padding-1500: 57px;
+  --primitive-padding-200: 8px;
+  --primitive-padding-300: 11px;
+  --primitive-padding-400: 15px;
+  --primitive-padding-500: 19px;
   --primitive-purple-00: #FCFAFE;
   --primitive-purple-01: #F6F2FD;
   --primitive-purple-02: #E2D2F9;
@@ -185,7 +248,33 @@ html[data-brand="gold"][data-theme="dark"] {
   --color-core-ui-secondary: var(--primitive-yellow-09);
   --color-input-border-hover: var(--primitive-yellow-08);
   --color-input-border-selected: var(--primitive-yellow-08);
-  --font-family-primary: 'Space Grotesk', sans-serif;
+  --font-caption-letter-spacing: -0.01em;
+  --font-display-1-letter-spacing: 0.01em;
+  --font-display-1-weight: 500;
+  --font-display-2-letter-spacing: 0.005em;
+  --font-display-2-weight: 500;
+  --font-family-heading: 'Space Grotesk', sans-serif;
+  --font-family-primary: 'Manrope', sans-serif;
+  --font-heading-1-letter-spacing: 0.005em;
+  --font-heading-1-weight: 700;
+  --font-heading-2-letter-spacing: 0.005em;
+  --font-heading-2-weight: 700;
+  --font-heading-3-letter-spacing: 0.005em;
+  --font-heading-3-weight: 700;
+  --font-mega-1-letter-spacing: 0.01em;
+  --font-mega-1-weight: 500;
+  --font-mega-2-letter-spacing: 0.01em;
+  --font-mega-2-weight: 500;
+  --font-overline-letter-spacing: 0.07em;
+  --font-paragraph-emphasis-letter-spacing: -0.02em;
+  --font-paragraph-letter-spacing: -0.01em;
+  --font-paragraph-sm-emphasis-letter-spacing: -0.01em;
+  --font-paragraph-sm-letter-spacing: -0.01em;
+  --font-sub-display-letter-spacing: 0.005em;
+  --font-sub-display-weight: 500;
+  --font-title-body-letter-spacing: -0.02em;
+  --font-title-body-weight: 700;
+  --material-symbols-weight: 500;
   --motion-duration-base: 180ms;
   --motion-duration-deliberate: 360ms;
   --motion-duration-fast: 135ms;
@@ -204,6 +293,16 @@ html[data-brand="gold"][data-theme="dark"] {
   --primitive-blue-09: #1B2C71;
   --primitive-blue-10: #0F193E;
   --primitive-blue-11: #0A112B;
+  --primitive-gap-050: 2px;
+  --primitive-gap-100: 4px;
+  --primitive-gap-1000: 38px;
+  --primitive-gap-1500: 57px;
+  --primitive-gap-200: 8px;
+  --primitive-gap-2000: 76px;
+  --primitive-gap-300: 11px;
+  --primitive-gap-3000: 114px;
+  --primitive-gap-400: 15px;
+  --primitive-gap-500: 19px;
   --primitive-green-00: #F8FDFB;
   --primitive-green-01: #EFFAF6;
   --primitive-green-02: #D1F1E6;
@@ -256,6 +355,15 @@ html[data-brand="gold"][data-theme="dark"] {
   --primitive-orange-09: #8A5321;
   --primitive-orange-10: #523214;
   --primitive-orange-11: #3D250F;
+  --primitive-padding-050: 2px;
+  --primitive-padding-100: 4px;
+  --primitive-padding-1000: 38px;
+  --primitive-padding-150: 6px;
+  --primitive-padding-1500: 57px;
+  --primitive-padding-200: 8px;
+  --primitive-padding-300: 11px;
+  --primitive-padding-400: 15px;
+  --primitive-padding-500: 19px;
   --primitive-purple-00: #FCFAFE;
   --primitive-purple-01: #F6F2FD;
   --primitive-purple-02: #E2D2F9;

package/tokens/presets/mono.css

@@ -21,7 +21,7 @@
   font-weight: 300 700;
   font-display: swap;
   src: url('../../fonts/presets/inter-300-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
@@ -39,7 +39,7 @@
   font-weight: 300 700;
   font-display: swap;
   src: url('../../fonts/presets/montserrat-300-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 html[data-brand="mono"] {

package/tokens/presets/pink.css

@@ -7,39 +7,39 @@
  * Import after tokens.css, then set data-brand="pink" on <html>.
  */
 @font-face {
-  font-family: 'Inter';
+  font-family: 'Nunito';
   font-style: normal;
-  font-weight: 300 700;
+  font-weight: 300 800;
   font-display: swap;
-  src: url('../../fonts/presets/inter-300-700-latin.woff2') format('woff2');
+  src: url('../../fonts/presets/nunito-300-800-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
-  font-family: 'Inter';
+  font-family: 'Nunito';
   font-style: normal;
-  font-weight: 300 700;
+  font-weight: 300 800;
   font-display: swap;
-  src: url('../../fonts/presets/inter-300-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  src: url('../../fonts/presets/nunito-300-800-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
-  font-family: 'Fraunces';
+  font-family: 'Fredoka';
   font-style: normal;
   font-weight: 300 700;
   font-display: swap;
-  src: url('../../fonts/presets/fraunces-300-700-latin.woff2') format('woff2');
+  src: url('../../fonts/presets/fredoka-300-700-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
-  font-family: 'Fraunces';
+  font-family: 'Fredoka';
   font-style: normal;
   font-weight: 300 700;
   font-display: swap;
-  src: url('../../fonts/presets/fraunces-300-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  src: url('../../fonts/presets/fredoka-300-700-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 html[data-brand="pink"] {
@@ -64,8 +64,29 @@ html[data-brand="pink"] {
   --color-core-ui-secondary: var(--primitive-red-10);
   --color-input-border-hover: var(--primitive-red-05);
   --color-input-border-selected: var(--primitive-red-07);
-  --font-family-heading: 'Fraunces', serif;
-  --font-family-primary: 'Inter', sans-serif;
+  --font-caption-letter-spacing: 0.005em;
+  --font-display-1-letter-spacing: 0.025em;
+  --font-display-1-weight: 400;
+  --font-display-2-letter-spacing: 0.02em;
+  --font-display-2-weight: 400;
+  --font-family-heading: 'Fredoka', sans-serif;
+  --font-family-primary: 'Nunito', sans-serif;
+  --font-heading-1-letter-spacing: 0.02em;
+  --font-heading-2-letter-spacing: 0.02em;
+  --font-heading-3-letter-spacing: 0.02em;
+  --font-mega-1-letter-spacing: 0.025em;
+  --font-mega-1-weight: 400;
+  --font-mega-2-letter-spacing: 0.025em;
+  --font-mega-2-weight: 400;
+  --font-overline-letter-spacing: 0.085em;
+  --font-paragraph-emphasis-letter-spacing: -0.005em;
+  --font-paragraph-letter-spacing: 0.005em;
+  --font-paragraph-sm-emphasis-letter-spacing: 0.005em;
+  --font-paragraph-sm-letter-spacing: 0.005em;
+  --font-sub-display-letter-spacing: 0.02em;
+  --font-sub-display-weight: 400;
+  --font-title-body-letter-spacing: -0.005em;
+  --material-symbols-weight: 400;
   --motion-duration-base: 180ms;
   --motion-duration-deliberate: 360ms;
   --motion-duration-fast: 135ms;
@@ -84,6 +105,16 @@ html[data-brand="pink"] {
   --primitive-blue-09: #283885;
   --primitive-blue-10: #161F4A;
   --primitive-blue-11: #0F1533;
+  --primitive-gap-050: 2px;
+  --primitive-gap-100: 4px;
+  --primitive-gap-1000: 42px;
+  --primitive-gap-1500: 63px;
+  --primitive-gap-200: 8px;
+  --primitive-gap-2000: 84px;
+  --primitive-gap-300: 13px;
+  --primitive-gap-3000: 126px;
+  --primitive-gap-400: 17px;
+  --primitive-gap-500: 21px;
   --primitive-green-00: #F8FEFB;
   --primitive-green-01: #EFFCF6;
   --primitive-green-02: #D1F7E5;
@@ -96,14 +127,14 @@ html[data-brand="pink"] {
   --primitive-green-09: #1A794D;
   --primitive-green-10: #0F472D;
   --primitive-green-11: #0C3723;
-  --primitive-neutral-00: #FCF1F7;
-  --primitive-neutral-00-a01: rgba(252, 241, 247, 0.01);
-  --primitive-neutral-00-a60: rgba(252, 241, 247, 0.6);
-  --primitive-neutral-00-a90: rgba(252, 241, 247, 0.9);
-  --primitive-neutral-01: #EFE4EA;
-  --primitive-neutral-01-a01: rgba(239, 228, 234, 0.01);
-  --primitive-neutral-01-a60: rgba(239, 228, 234, 0.6);
-  --primitive-neutral-01-a82: rgba(239, 228, 234, 0.82);
+  --primitive-neutral-00: #FEF8FB;
+  --primitive-neutral-00-a01: rgba(254, 248, 251, 0.01);
+  --primitive-neutral-00-a60: rgba(254, 248, 251, 0.6);
+  --primitive-neutral-00-a90: rgba(254, 248, 251, 0.9);
+  --primitive-neutral-01: #F0EAEE;
+  --primitive-neutral-01-a01: rgba(240, 234, 238, 0.01);
+  --primitive-neutral-01-a60: rgba(240, 234, 238, 0.6);
+  --primitive-neutral-01-a82: rgba(240, 234, 238, 0.82);
   --primitive-neutral-02: #D6CAD1;
   --primitive-neutral-02-a80: rgba(214, 202, 209, 0.8);
   --primitive-neutral-03: #BDB2B8;
@@ -136,6 +167,15 @@ html[data-brand="pink"] {
   --primitive-orange-09: #8A4221;
   --primitive-orange-10: #522714;
   --primitive-orange-11: #3D1D0F;
+  --primitive-padding-050: 2px;
+  --primitive-padding-100: 4px;
+  --primitive-padding-1000: 42px;
+  --primitive-padding-150: 6px;
+  --primitive-padding-1500: 63px;
+  --primitive-padding-200: 8px;
+  --primitive-padding-300: 13px;
+  --primitive-padding-400: 17px;
+  --primitive-padding-500: 21px;
   --primitive-purple-00: #FDFAFF;
   --primitive-purple-01: #F9F2FE;
   --primitive-purple-02: #ECD2FB;
@@ -217,8 +257,29 @@ html[data-brand="pink"][data-theme="dark"] {
   --color-core-ui-secondary: var(--primitive-red-09);
   --color-input-border-hover: var(--primitive-red-08);
   --color-input-border-selected: var(--primitive-red-08);
-  --font-family-heading: 'Fraunces', serif;
-  --font-family-primary: 'Inter', sans-serif;
+  --font-caption-letter-spacing: 0.005em;
+  --font-display-1-letter-spacing: 0.025em;
+  --font-display-1-weight: 400;
+  --font-display-2-letter-spacing: 0.02em;
+  --font-display-2-weight: 400;
+  --font-family-heading: 'Fredoka', sans-serif;
+  --font-family-primary: 'Nunito', sans-serif;
+  --font-heading-1-letter-spacing: 0.02em;
+  --font-heading-2-letter-spacing: 0.02em;
+  --font-heading-3-letter-spacing: 0.02em;
+  --font-mega-1-letter-spacing: 0.025em;
+  --font-mega-1-weight: 400;
+  --font-mega-2-letter-spacing: 0.025em;
+  --font-mega-2-weight: 400;
+  --font-overline-letter-spacing: 0.085em;
+  --font-paragraph-emphasis-letter-spacing: -0.005em;
+  --font-paragraph-letter-spacing: 0.005em;
+  --font-paragraph-sm-emphasis-letter-spacing: 0.005em;
+  --font-paragraph-sm-letter-spacing: 0.005em;
+  --font-sub-display-letter-spacing: 0.02em;
+  --font-sub-display-weight: 400;
+  --font-title-body-letter-spacing: -0.005em;
+  --material-symbols-weight: 400;
   --motion-duration-base: 180ms;
   --motion-duration-deliberate: 360ms;
   --motion-duration-fast: 135ms;
@@ -237,6 +298,16 @@ html[data-brand="pink"][data-theme="dark"] {
   --primitive-blue-09: #283885;
   --primitive-blue-10: #161F4A;
   --primitive-blue-11: #0F1533;
+  --primitive-gap-050: 2px;
+  --primitive-gap-100: 4px;
+  --primitive-gap-1000: 42px;
+  --primitive-gap-1500: 63px;
+  --primitive-gap-200: 8px;
+  --primitive-gap-2000: 84px;
+  --primitive-gap-300: 13px;
+  --primitive-gap-3000: 126px;
+  --primitive-gap-400: 17px;
+  --primitive-gap-500: 21px;
   --primitive-green-00: #F8FEFB;
   --primitive-green-01: #EFFCF6;
   --primitive-green-02: #D1F7E5;
@@ -289,6 +360,15 @@ html[data-brand="pink"][data-theme="dark"] {
   --primitive-orange-09: #8A4221;
   --primitive-orange-10: #522714;
   --primitive-orange-11: #3D1D0F;
+  --primitive-padding-050: 2px;
+  --primitive-padding-100: 4px;
+  --primitive-padding-1000: 42px;
+  --primitive-padding-150: 6px;
+  --primitive-padding-1500: 63px;
+  --primitive-padding-200: 8px;
+  --primitive-padding-300: 13px;
+  --primitive-padding-400: 17px;
+  --primitive-padding-500: 21px;
   --primitive-purple-00: #FDFAFF;
   --primitive-purple-01: #F9F2FE;
   --primitive-purple-02: #ECD2FB;

package/tokens/presets/terminal.css

@@ -57,7 +57,7 @@
   font-weight: 300;
   font-display: swap;
   src: url('../../fonts/presets/ibm-plex-mono-300-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
@@ -66,7 +66,7 @@
   font-weight: 400;
   font-display: swap;
   src: url('../../fonts/presets/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
@@ -75,7 +75,7 @@
   font-weight: 500;
   font-display: swap;
   src: url('../../fonts/presets/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
@@ -84,7 +84,7 @@
   font-weight: 600;
   font-display: swap;
   src: url('../../fonts/presets/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
@@ -93,7 +93,7 @@
   font-weight: 700;
   font-display: swap;
   src: url('../../fonts/presets/ibm-plex-mono-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 html[data-brand="terminal"] {
@@ -137,14 +137,14 @@ html[data-brand="terminal"] {
   --primitive-blue-09: #162F55;
   --primitive-blue-10: #0C1A2F;
   --primitive-blue-11: #091221;
-  --primitive-neutral-00: #F5FDFB;
-  --primitive-neutral-00-a01: rgba(245, 253, 251, 0.01);
-  --primitive-neutral-00-a60: rgba(245, 253, 251, 0.6);
-  --primitive-neutral-00-a90: rgba(245, 253, 251, 0.9);
-  --primitive-neutral-01: #E8F0EE;
-  --primitive-neutral-01-a01: rgba(232, 240, 238, 0.01);
-  --primitive-neutral-01-a60: rgba(232, 240, 238, 0.6);
-  --primitive-neutral-01-a82: rgba(232, 240, 238, 0.82);
+  --primitive-neutral-00: #FAFEFD;
+  --primitive-neutral-00-a01: rgba(250, 254, 253, 0.01);
+  --primitive-neutral-00-a60: rgba(250, 254, 253, 0.6);
+  --primitive-neutral-00-a90: rgba(250, 254, 253, 0.9);
+  --primitive-neutral-01: #ECF0EF;
+  --primitive-neutral-01-a01: rgba(236, 240, 239, 0.01);
+  --primitive-neutral-01-a60: rgba(236, 240, 239, 0.6);
+  --primitive-neutral-01-a82: rgba(236, 240, 239, 0.82);
   --primitive-neutral-02: #CED6D4;
   --primitive-neutral-02-a80: rgba(206, 214, 212, 0.8);
   --primitive-neutral-03: #B5BDBB;

package/tokens/presets/violet.css

@@ -7,39 +7,39 @@
  * Import after tokens.css, then set data-brand="violet" on <html>.
  */
 @font-face {
-  font-family: 'Work Sans';
+  font-family: 'Plus Jakarta Sans';
   font-style: normal;
-  font-weight: 300 700;
+  font-weight: 300 800;
   font-display: swap;
-  src: url('../../fonts/presets/work-sans-300-700-latin.woff2') format('woff2');
+  src: url('../../fonts/presets/plus-jakarta-sans-300-800-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
-  font-family: 'Work Sans';
+  font-family: 'Plus Jakarta Sans';
   font-style: normal;
-  font-weight: 300 700;
+  font-weight: 300 800;
   font-display: swap;
-  src: url('../../fonts/presets/work-sans-300-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  src: url('../../fonts/presets/plus-jakarta-sans-300-800-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
-  font-family: 'Lora';
+  font-family: 'Playfair Display';
   font-style: normal;
-  font-weight: 400 700;
+  font-weight: 400 800;
   font-display: swap;
-  src: url('../../fonts/presets/lora-400-700-latin.woff2') format('woff2');
+  src: url('../../fonts/presets/playfair-display-400-800-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
-  font-family: 'Lora';
+  font-family: 'Playfair Display';
   font-style: normal;
-  font-weight: 400 700;
+  font-weight: 400 800;
   font-display: swap;
-  src: url('../../fonts/presets/lora-400-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  src: url('../../fonts/presets/playfair-display-400-800-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 html[data-brand="violet"] {
@@ -63,8 +63,33 @@ html[data-brand="violet"] {
   --color-core-ui-secondary: var(--primitive-purple-11);
   --color-input-border-hover: var(--primitive-purple-06);
   --color-input-border-selected: var(--primitive-purple-08);
-  --font-family-heading: 'Lora', serif;
-  --font-family-primary: 'Work Sans', sans-serif;
+  --font-caption-letter-spacing: -0.005em;
+  --font-display-1-letter-spacing: 0.015em;
+  --font-display-1-weight: 400;
+  --font-display-2-letter-spacing: 0.01em;
+  --font-display-2-weight: 400;
+  --font-family-heading: 'Playfair Display', serif;
+  --font-family-primary: 'Plus Jakarta Sans', sans-serif;
+  --font-heading-1-letter-spacing: 0.01em;
+  --font-heading-1-weight: 500;
+  --font-heading-2-letter-spacing: 0.01em;
+  --font-heading-2-weight: 500;
+  --font-heading-3-letter-spacing: 0.01em;
+  --font-heading-3-weight: 500;
+  --font-mega-1-letter-spacing: 0.015em;
+  --font-mega-1-weight: 400;
+  --font-mega-2-letter-spacing: 0.015em;
+  --font-mega-2-weight: 400;
+  --font-overline-letter-spacing: 0.075em;
+  --font-paragraph-emphasis-letter-spacing: -0.015em;
+  --font-paragraph-letter-spacing: -0.005em;
+  --font-paragraph-sm-emphasis-letter-spacing: -0.005em;
+  --font-paragraph-sm-letter-spacing: -0.005em;
+  --font-sub-display-letter-spacing: 0.01em;
+  --font-sub-display-weight: 400;
+  --font-title-body-letter-spacing: -0.015em;
+  --font-title-body-weight: 500;
+  --material-symbols-weight: 300;
   --primitive-blue-00: #FBFBFE;
   --primitive-blue-01: #F6F6FD;
   --primitive-blue-02: #E6E7F9;
@@ -77,6 +102,16 @@ html[data-brand="violet"] {
   --primitive-blue-09: #303471;
   --primitive-blue-10: #1B1D3E;
   --primitive-blue-11: #12142B;
+  --primitive-gap-050: 2px;
+  --primitive-gap-100: 4px;
+  --primitive-gap-1000: 42px;
+  --primitive-gap-1500: 63px;
+  --primitive-gap-200: 8px;
+  --primitive-gap-2000: 84px;
+  --primitive-gap-300: 13px;
+  --primitive-gap-3000: 126px;
+  --primitive-gap-400: 17px;
+  --primitive-gap-500: 21px;
   --primitive-green-00: #F9FCFC;
   --primitive-green-01: #F0F9F7;
   --primitive-green-02: #D5EDE8;
@@ -89,14 +124,14 @@ html[data-brand="violet"] {
   --primitive-green-09: #236153;
   --primitive-green-10: #143930;
   --primitive-green-11: #102C26;
-  --primitive-neutral-00: #FAF6FE;
-  --primitive-neutral-00-a01: rgba(250, 246, 254, 0.01);
-  --primitive-neutral-00-a60: rgba(250, 246, 254, 0.6);
-  --primitive-neutral-00-a90: rgba(250, 246, 254, 0.9);
-  --primitive-neutral-01: #EDE9F1;
-  --primitive-neutral-01-a01: rgba(237, 233, 241, 0.01);
-  --primitive-neutral-01-a60: rgba(237, 233, 241, 0.6);
-  --primitive-neutral-01-a82: rgba(237, 233, 241, 0.82);
+  --primitive-neutral-00: #FDFAFF;
+  --primitive-neutral-00-a01: rgba(253, 250, 255, 0.01);
+  --primitive-neutral-00-a60: rgba(253, 250, 255, 0.6);
+  --primitive-neutral-00-a90: rgba(253, 250, 255, 0.9);
+  --primitive-neutral-01: #EFEDF1;
+  --primitive-neutral-01-a01: rgba(239, 237, 241, 0.01);
+  --primitive-neutral-01-a60: rgba(239, 237, 241, 0.6);
+  --primitive-neutral-01-a82: rgba(239, 237, 241, 0.82);
   --primitive-neutral-02: #D3CFD7;
   --primitive-neutral-02-a80: rgba(211, 207, 215, 0.8);
   --primitive-neutral-03: #BBB6BF;
@@ -129,6 +164,15 @@ html[data-brand="violet"] {
   --primitive-orange-09: #754235;
   --primitive-orange-10: #462820;
   --primitive-orange-11: #341D17;
+  --primitive-padding-050: 2px;
+  --primitive-padding-100: 4px;
+  --primitive-padding-1000: 42px;
+  --primitive-padding-150: 6px;
+  --primitive-padding-1500: 63px;
+  --primitive-padding-200: 8px;
+  --primitive-padding-300: 13px;
+  --primitive-padding-400: 17px;
+  --primitive-padding-500: 21px;
   --primitive-radius-050: 3px;
   --primitive-radius-100: 6px;
   --primitive-radius-1200: 67px;
@@ -198,8 +242,33 @@ html[data-brand="violet"][data-theme="dark"] {
   --color-core-ui-secondary: var(--primitive-purple-09);
   --color-input-border-hover: var(--primitive-purple-09);
   --color-input-border-selected: var(--primitive-purple-09);
-  --font-family-heading: 'Lora', serif;
-  --font-family-primary: 'Work Sans', sans-serif;
+  --font-caption-letter-spacing: -0.005em;
+  --font-display-1-letter-spacing: 0.015em;
+  --font-display-1-weight: 400;
+  --font-display-2-letter-spacing: 0.01em;
+  --font-display-2-weight: 400;
+  --font-family-heading: 'Playfair Display', serif;
+  --font-family-primary: 'Plus Jakarta Sans', sans-serif;
+  --font-heading-1-letter-spacing: 0.01em;
+  --font-heading-1-weight: 500;
+  --font-heading-2-letter-spacing: 0.01em;
+  --font-heading-2-weight: 500;
+  --font-heading-3-letter-spacing: 0.01em;
+  --font-heading-3-weight: 500;
+  --font-mega-1-letter-spacing: 0.015em;
+  --font-mega-1-weight: 400;
+  --font-mega-2-letter-spacing: 0.015em;
+  --font-mega-2-weight: 400;
+  --font-overline-letter-spacing: 0.075em;
+  --font-paragraph-emphasis-letter-spacing: -0.015em;
+  --font-paragraph-letter-spacing: -0.005em;
+  --font-paragraph-sm-emphasis-letter-spacing: -0.005em;
+  --font-paragraph-sm-letter-spacing: -0.005em;
+  --font-sub-display-letter-spacing: 0.01em;
+  --font-sub-display-weight: 400;
+  --font-title-body-letter-spacing: -0.015em;
+  --font-title-body-weight: 500;
+  --material-symbols-weight: 300;
   --primitive-blue-00: #FBFBFE;
   --primitive-blue-01: #F6F6FD;
   --primitive-blue-02: #E6E7F9;
@@ -212,6 +281,16 @@ html[data-brand="violet"][data-theme="dark"] {
   --primitive-blue-09: #303471;
   --primitive-blue-10: #1B1D3E;
   --primitive-blue-11: #12142B;
+  --primitive-gap-050: 2px;
+  --primitive-gap-100: 4px;
+  --primitive-gap-1000: 42px;
+  --primitive-gap-1500: 63px;
+  --primitive-gap-200: 8px;
+  --primitive-gap-2000: 84px;
+  --primitive-gap-300: 13px;
+  --primitive-gap-3000: 126px;
+  --primitive-gap-400: 17px;
+  --primitive-gap-500: 21px;
   --primitive-green-00: #F9FCFC;
   --primitive-green-01: #F0F9F7;
   --primitive-green-02: #D5EDE8;
@@ -264,6 +343,15 @@ html[data-brand="violet"][data-theme="dark"] {
   --primitive-orange-09: #754235;
   --primitive-orange-10: #462820;
   --primitive-orange-11: #341D17;
+  --primitive-padding-050: 2px;
+  --primitive-padding-100: 4px;
+  --primitive-padding-1000: 42px;
+  --primitive-padding-150: 6px;
+  --primitive-padding-1500: 63px;
+  --primitive-padding-200: 8px;
+  --primitive-padding-300: 13px;
+  --primitive-padding-400: 17px;
+  --primitive-padding-500: 21px;
   --primitive-radius-050: 3px;
   --primitive-radius-100: 6px;
   --primitive-radius-1200: 67px;

package/tokens/presets/warm.css

@@ -21,7 +21,7 @@
   font-weight: 300 700;
   font-display: swap;
   src: url('../../fonts/presets/source-sans-3-300-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
@@ -39,7 +39,7 @@
   font-weight: 400 700;
   font-display: swap;
   src: url('../../fonts/presets/lora-400-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 html[data-brand="warm"] {
@@ -90,14 +90,14 @@ html[data-brand="warm"] {
   --primitive-green-09: #265E46;
   --primitive-green-10: #163729;
   --primitive-green-11: #112A20;
-  --primitive-neutral-00: #FAF6F2;
-  --primitive-neutral-00-a01: rgba(250, 246, 242, 0.01);
-  --primitive-neutral-00-a60: rgba(250, 246, 242, 0.6);
-  --primitive-neutral-00-a90: rgba(250, 246, 242, 0.9);
-  --primitive-neutral-01: #EDE9E5;
-  --primitive-neutral-01-a01: rgba(237, 233, 229, 0.01);
-  --primitive-neutral-01-a60: rgba(237, 233, 229, 0.6);
-  --primitive-neutral-01-a82: rgba(237, 233, 229, 0.82);
+  --primitive-neutral-00: #FCFAF8;
+  --primitive-neutral-00-a01: rgba(252, 250, 248, 0.01);
+  --primitive-neutral-00-a60: rgba(252, 250, 248, 0.6);
+  --primitive-neutral-00-a90: rgba(252, 250, 248, 0.9);
+  --primitive-neutral-01: #EFEDEB;
+  --primitive-neutral-01-a01: rgba(239, 237, 235, 0.01);
+  --primitive-neutral-01-a60: rgba(239, 237, 235, 0.6);
+  --primitive-neutral-01-a82: rgba(239, 237, 235, 0.82);
   --primitive-neutral-02: #D4D0CC;
   --primitive-neutral-02-a80: rgba(212, 208, 204, 0.8);
   --primitive-neutral-03: #BCB8B4;

package/tokens/presets/zest.css

@@ -21,7 +21,7 @@
   font-weight: 300 700;
   font-display: swap;
   src: url('../../fonts/presets/inter-300-700-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 @font-face {
@@ -39,7 +39,7 @@
   font-weight: 300 900;
   font-display: swap;
   src: url('../../fonts/presets/inter-tight-300-900-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 html[data-brand="zest"] {
@@ -100,14 +100,14 @@ html[data-brand="zest"] {
   --primitive-green-09: #4D813D;
   --primitive-green-10: #2D4B24;
   --primitive-green-11: #233B1C;
-  --primitive-neutral-00: #F6F7F5;
-  --primitive-neutral-00-a01: rgba(246, 247, 245, 0.01);
-  --primitive-neutral-00-a60: rgba(246, 247, 245, 0.6);
-  --primitive-neutral-00-a90: rgba(246, 247, 245, 0.9);
-  --primitive-neutral-01: #E8E9E7;
-  --primitive-neutral-01-a01: rgba(232, 233, 231, 0.01);
-  --primitive-neutral-01-a60: rgba(232, 233, 231, 0.6);
-  --primitive-neutral-01-a82: rgba(232, 233, 231, 0.82);
+  --primitive-neutral-00: #FAFBFA;
+  --primitive-neutral-00-a01: rgba(250, 251, 250, 0.01);
+  --primitive-neutral-00-a60: rgba(250, 251, 250, 0.6);
+  --primitive-neutral-00-a90: rgba(250, 251, 250, 0.9);
+  --primitive-neutral-01: #EDEDEC;
+  --primitive-neutral-01-a01: rgba(237, 237, 236, 0.01);
+  --primitive-neutral-01-a60: rgba(237, 237, 236, 0.6);
+  --primitive-neutral-01-a82: rgba(237, 237, 236, 0.82);
   --primitive-neutral-02: #CECFCD;
   --primitive-neutral-02-a80: rgba(206, 207, 205, 0.8);
   --primitive-neutral-03: #B5B7B4;

package/tokens/tokens-typography.css

@@ -194,7 +194,7 @@
    RESPONSIVE COLLAPSE
    The display tier steps down once, at 768px — the token layer's only
    breakpoint. Headings and body never step; weights and letter-spacing
-   never change at any breakpoint (weight contrast is the hierarchy rule).
+   never change at any breakpoint.
    ============================================ */
 
 @media (max-width: 768px) {