@nadicodeai/design-system 0.5.3 → 0.7.0

package/dist/css/components/run-timeline.css

@@ -69,7 +69,12 @@
   height: var(--nc-run-timeline-node);
   margin-top: 4px;
   /* Center the node on the rail: rail center minus half the node width. */
-  margin-left: calc(var(--nc-run-timeline-rail) - (var(--nc-run-timeline-node) / 2) - 14px - var(--nc-run-timeline-node));
+  margin-left: calc(
+    var(--nc-run-timeline-rail) -
+    (var(--nc-run-timeline-node) / 2) -
+    14px -
+    var(--nc-run-timeline-node)
+  );
   border-radius: var(--nc-rounded-full);
   background: var(--nc-canvas);
   box-shadow: 0 0 0 var(--nc-guide) var(--nc-line);
@@ -123,13 +128,33 @@
 /* State variants — color carries state, sourced from the shared `--nc-state-*`
    tokens (the same vocabulary as state-tag/state-row). The node core and the
    content left edge both take the state token; shape is unchanged. */
-.nc-run-timeline-step[data-state="ready"]    .nc-run-timeline-node { color: var(--nc-state-ready); }
-.nc-run-timeline-step[data-state="ready"]    .nc-run-timeline-content { border-left-color: var(--nc-state-ready); }
-.nc-run-timeline-step[data-state="running"]  .nc-run-timeline-node { color: var(--nc-state-running); }
-.nc-run-timeline-step[data-state="running"]  .nc-run-timeline-content { border-left-color: var(--nc-state-running); }
-.nc-run-timeline-step[data-state="review"]   .nc-run-timeline-node { color: var(--nc-state-review); }
-.nc-run-timeline-step[data-state="review"]   .nc-run-timeline-content { border-left-color: var(--nc-state-review); }
-.nc-run-timeline-step[data-state="blocked"]  .nc-run-timeline-node { color: var(--nc-state-blocked); }
-.nc-run-timeline-step[data-state="blocked"]  .nc-run-timeline-content { border-left-color: var(--nc-state-blocked); }
-.nc-run-timeline-step[data-state="complete"] .nc-run-timeline-node { color: var(--nc-state-complete); }
-.nc-run-timeline-step[data-state="complete"] .nc-run-timeline-content { border-left-color: var(--nc-state-complete); }
+.nc-run-timeline-step[data-state="ready"] .nc-run-timeline-node {
+  color: var(--nc-state-ready);
+}
+.nc-run-timeline-step[data-state="ready"] .nc-run-timeline-content {
+  border-left-color: var(--nc-state-ready);
+}
+.nc-run-timeline-step[data-state="running"] .nc-run-timeline-node {
+  color: var(--nc-state-running);
+}
+.nc-run-timeline-step[data-state="running"] .nc-run-timeline-content {
+  border-left-color: var(--nc-state-running);
+}
+.nc-run-timeline-step[data-state="review"] .nc-run-timeline-node {
+  color: var(--nc-state-review);
+}
+.nc-run-timeline-step[data-state="review"] .nc-run-timeline-content {
+  border-left-color: var(--nc-state-review);
+}
+.nc-run-timeline-step[data-state="blocked"] .nc-run-timeline-node {
+  color: var(--nc-state-blocked);
+}
+.nc-run-timeline-step[data-state="blocked"] .nc-run-timeline-content {
+  border-left-color: var(--nc-state-blocked);
+}
+.nc-run-timeline-step[data-state="complete"] .nc-run-timeline-node {
+  color: var(--nc-state-complete);
+}
+.nc-run-timeline-step[data-state="complete"] .nc-run-timeline-content {
+  border-left-color: var(--nc-state-complete);
+}

package/dist/css/components/state-row.css

@@ -47,8 +47,18 @@
   color: var(--nc-state-running);
   background: currentColor;
 }
-.nc-state-row[data-kind="ready"]    .nc-state-row-dot { color: var(--nc-state-ready); }
-.nc-state-row[data-kind="running"]  .nc-state-row-dot { color: var(--nc-state-running); }
-.nc-state-row[data-kind="review"]   .nc-state-row-dot { color: var(--nc-state-review); }
-.nc-state-row[data-kind="blocked"]  .nc-state-row-dot { color: var(--nc-state-blocked); }
-.nc-state-row[data-kind="complete"] .nc-state-row-dot { color: var(--nc-state-complete); }
+.nc-state-row[data-kind="ready"] .nc-state-row-dot {
+  color: var(--nc-state-ready);
+}
+.nc-state-row[data-kind="running"] .nc-state-row-dot {
+  color: var(--nc-state-running);
+}
+.nc-state-row[data-kind="review"] .nc-state-row-dot {
+  color: var(--nc-state-review);
+}
+.nc-state-row[data-kind="blocked"] .nc-state-row-dot {
+  color: var(--nc-state-blocked);
+}
+.nc-state-row[data-kind="complete"] .nc-state-row-dot {
+  color: var(--nc-state-complete);
+}

package/dist/css/components/state-tag.css

@@ -26,9 +26,10 @@
   letter-spacing: 0;
   white-space: nowrap;
   /* Confirm move: state transitions at the 150–200 ms feedback band. */
-  transition: background-color var(--nc-duration-confirm) var(--nc-ease-out-strong),
-              border-color var(--nc-duration-confirm) var(--nc-ease-out-strong),
-              color var(--nc-duration-confirm) var(--nc-ease-out-strong);
+  transition:
+    background-color var(--nc-duration-confirm) var(--nc-ease-out-strong),
+    border-color var(--nc-duration-confirm) var(--nc-ease-out-strong),
+    color var(--nc-duration-confirm) var(--nc-ease-out-strong);
 }
 
 /*

package/dist/css/components/status-tag.css

@@ -0,0 +1,101 @@
+/*
+ * status-tag — the entity-status system (DESIGN.md `status-tag-*` family).
+ * Sibling of `state-tag`, not a replacement: `state-tag` stays the run-state
+ * rail (ready/running/review/blocked/complete), carried by a 3px border-left
+ * on a neutral canvas. `status-tag` is the entity-status vocabulary — agent,
+ * credential, activation, customer, invitation, subscription, and health
+ * values that live on records, not on a run. It carries state a different
+ * way: a subtle tinted rectangle where BOTH the background and the text
+ * shift together, never a border-left rail, and it never touches the
+ * `--nc-state-*` token family.
+ *
+ * Shape: a small sans rectangle (`{rounded.md}`, not a capsule), never
+ * Geist Mono. Tone comes from `[data-tone]` (gray/green/red/amber/blue), not
+ * BEM modifiers, and each tone is a full background+text ramp pair pulled
+ * directly from the color ramps (gray/green-italia/red-italia/amber/
+ * blue-cobalto) rather than through a semantic alias — status-tag consumes
+ * ramp steps directly, matching `state-tag`'s "shape carries meaning, color
+ * carries variant" discipline but expressed as a bg/text pair instead of a
+ * border.
+ *
+ * Doctrine: gray is the default tone. Color is reserved for marking health
+ * and exceptions — every terminal/no-action state renders gray. Subtle-only
+ * (no solid/filled variants), no icons inside the badge, no text-transform,
+ * labels render verbatim from the i18n dictionary that owns them.
+ */
+.nc-status-tag {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: var(--nc-rounded-md);
+  font-family: Geist, Inter, system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0;
+  white-space: nowrap;
+  /* Confirm move: state transitions at the 150–200 ms feedback band, same as
+     state-tag — color arrives WITH the meaning, never before it. */
+  transition:
+    background-color var(--nc-duration-confirm) var(--nc-ease-out-strong),
+    color var(--nc-duration-confirm) var(--nc-ease-out-strong);
+}
+
+.nc-status-tag[data-tone="gray"] {
+  background: var(--nc-gray-200);
+  color: var(--nc-gray-900);
+}
+
+.nc-status-tag[data-tone="green"] {
+  background: var(--nc-green-italia-200);
+  color: var(--nc-green-italia-900);
+}
+
+.nc-status-tag[data-tone="red"] {
+  background: var(--nc-red-italia-200);
+  color: var(--nc-red-italia-900);
+}
+
+.nc-status-tag[data-tone="amber"] {
+  background: var(--nc-amber-200);
+  color: var(--nc-amber-900);
+}
+
+.nc-status-tag[data-tone="blue"] {
+  background: var(--nc-blue-cobalto-200);
+  color: var(--nc-blue-cobalto-900);
+}
+
+/*
+ * Dark console: each tone flips to its own dark-ramp pair rather than a
+ * shared canvas/ink remap (unlike state-tag's neutral chip), because tone
+ * here is carried by a full bg+text pair, not a single border-left accent.
+ * Scoped per tone so gray's pair (dark-canvas-soft-2/gray-600) does not
+ * collide with the chromatic tones' 1000/400 pairs.
+ */
+.dark .nc-status-tag[data-tone="gray"] {
+  background: var(--nc-dark-canvas-soft-2);
+  color: var(--nc-gray-600);
+}
+
+.dark .nc-status-tag[data-tone="green"] {
+  background: var(--nc-green-italia-1000);
+  color: var(--nc-green-italia-400);
+}
+
+.dark .nc-status-tag[data-tone="red"] {
+  background: var(--nc-red-italia-1000);
+  color: var(--nc-red-italia-400);
+}
+
+.dark .nc-status-tag[data-tone="amber"] {
+  background: var(--nc-amber-1000);
+  color: var(--nc-amber-400);
+}
+
+.dark .nc-status-tag[data-tone="blue"] {
+  background: var(--nc-blue-cobalto-1000);
+  color: var(--nc-blue-cobalto-400);
+}

package/dist/css/components/tool-call-trace.css

@@ -32,5 +32,5 @@
   vertical-align: -2px;
   background-color: var(--nc-muted);
   -webkit-mask: url("../../icons/chevron-right.svg") center / contain no-repeat;
-          mask: url("../../icons/chevron-right.svg") center / contain no-repeat;
+  mask: url("../../icons/chevron-right.svg") center / contain no-repeat;
 }

package/dist/css/components/typing-dots.css

@@ -30,11 +30,21 @@
 /* AC-016 accent map → existing --nc-* tokens; identical to chat-bubble-agent and
    agent-avatar. green→link, cyan→info (blue-cobalto; killed cyan token retired
    per Italia contract §6), amber→warning-deep, ink→ink, red→error. No hard-coded hex. */
-.nc-typing-dots[data-accent="green"]  { --nc-accent: var(--nc-link); }
-.nc-typing-dots[data-accent="cyan"]   { --nc-accent: var(--nc-info); }
-.nc-typing-dots[data-accent="amber"]  { --nc-accent: var(--nc-warning-deep); }
-.nc-typing-dots[data-accent="ink"]    { --nc-accent: var(--nc-ink); }
-.nc-typing-dots[data-accent="red"]    { --nc-accent: var(--nc-error); }
+.nc-typing-dots[data-accent="green"] {
+  --nc-accent: var(--nc-link);
+}
+.nc-typing-dots[data-accent="cyan"] {
+  --nc-accent: var(--nc-info);
+}
+.nc-typing-dots[data-accent="amber"] {
+  --nc-accent: var(--nc-warning-deep);
+}
+.nc-typing-dots[data-accent="ink"] {
+  --nc-accent: var(--nc-ink);
+}
+.nc-typing-dots[data-accent="red"] {
+  --nc-accent: var(--nc-error);
+}
 
 .nc-typing-dots-dot {
   width: 5px;

package/dist/css/foundation.css

@@ -136,6 +136,14 @@ body {
   letter-spacing: var(--nc-type-caption-letter-spacing);
 }
 
+.nc-type-caption-strong {
+  font-family: var(--nc-type-caption-strong-font-family);
+  font-size: var(--nc-type-caption-strong-font-size);
+  font-weight: var(--nc-type-caption-strong-font-weight);
+  line-height: var(--nc-type-caption-strong-line-height);
+  letter-spacing: var(--nc-type-caption-strong-letter-spacing);
+}
+
 .nc-type-caption-mono {
   font-family: var(--nc-type-caption-mono-font-family);
   font-size: var(--nc-type-caption-mono-font-size);

package/dist/css/index.css

@@ -11,8 +11,9 @@
  * the structural-geometry foundation (`layout` + `primitives` — kernel grid,
  * single-owner seams, `.nc-marker` corner crosshairs, cell/row grid math, the
  * stage system), the brand display atoms shadcn/Radix has no equivalent for (the
- * 13 agent-chat atoms + the run-state `state-tag` family + `image`), and the
- * token/motion layers. The brand book and every static surface import this
+ * 13 agent-chat atoms + the run-state `state-tag` family + the entity-status
+ * `status-tag` family + `image`), and the token/motion layers. The brand book
+ * and every static surface import this
  * bundle raw — no Tailwind build step runs over `src/css/`, so the geometry is
  * `@layer` CSS, not `@utility` directives a browser would receive un-compiled.
  * The kept-geometry invariant guards stay live (kernel-css-architecture /
@@ -31,6 +32,9 @@
 /* Run-state tags (ADR 0007 D3). Agentic run-state, kept as CSS. */
 @import url("./components/state-tag.css") layer(components);
 
+/* Entity-status tags. Record-level status vocabulary, sibling of state-tag. */
+@import url("./components/status-tag.css") layer(components);
+
 /* Agent-chat atoms (M6 / Part B). Conversation surface + role-grammar atoms. */
 @import url("./components/chat-thread.css") layer(components);
 @import url("./components/chat-bubble-user.css") layer(components);

package/dist/css/layout.css

@@ -210,14 +210,13 @@
   display: none;
   min-width: 0;
   min-height: 0;
-  background:
-    repeating-linear-gradient(
-      125deg,
-      var(--nc-canvas) 0,
-      var(--nc-canvas) 6px,
-      var(--nc-line) 6px,
-      var(--nc-line) 7px
-    );
+  background: repeating-linear-gradient(
+    125deg,
+    var(--nc-canvas) 0,
+    var(--nc-canvas) 6px,
+    var(--nc-line) 6px,
+    var(--nc-line) 7px
+  );
 }
 
 /* The fill owns its single inner boundary rail so the texture is bounded on

package/dist/css/primitives.css

@@ -127,7 +127,11 @@
   --nc-blueprint-line: var(--nc-line);
   background-image:
     linear-gradient(to right, var(--nc-blueprint-line) var(--nc-guide), transparent var(--nc-guide)),
-    linear-gradient(to bottom, var(--nc-blueprint-line) var(--nc-guide), transparent var(--nc-guide));
+    linear-gradient(
+      to bottom,
+      var(--nc-blueprint-line) var(--nc-guide),
+      transparent var(--nc-guide)
+    );
   background-size:
     calc(100% / var(--nc-blueprint-columns)) calc(100% / var(--nc-blueprint-rows)),
     calc(100% / var(--nc-blueprint-columns)) calc(100% / var(--nc-blueprint-rows));
@@ -137,7 +141,7 @@
    scaffolding (used by atmospheric surfaces like the brand hero). */
 .nc-blueprint-field[data-feather="top"] {
   -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 100%);
-          mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 100%);
+  mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 100%);
 }
 
 .nc-rule-svg {
@@ -195,28 +199,6 @@
   width: 38%;
 }
 
-.nc-status-tag {
-  display: inline-flex;
-  width: fit-content;
-  min-height: 28px;
-  align-items: center;
-  justify-content: center;
-  border: var(--nc-guide) solid var(--nc-line);
-  /* status-tag = {rounded.sm} (DESIGN.md). */
-  border-radius: var(--nc-rounded-sm);
-  padding: 5px 9px;
-  background: var(--nc-canvas-soft);
-  color: var(--nc-body);
-  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-.nc-status-tag[data-proof-state="approved"] {
-  border-color: color-mix(in srgb, var(--nc-link) 35%, var(--nc-line));
-  background: color-mix(in srgb, var(--nc-link-bg-soft) 48%, var(--nc-canvas));
-}
-
 /* nc-icon — the icon slot. Icons are derived from Lucide (ISC) by a build
    transform that bakes the house render into the SVG (see scripts/generate-icons.ts).
    This primitive renders an INLINE <svg> child and re-asserts that key — 1.5px
@@ -305,8 +287,8 @@
 }
 
 .nc-filter-chip:focus-visible {
-  outline: 2px solid var(--nc-link);
-  outline-offset: 2px;
+  outline: var(--nc-focus-ring-width) solid var(--nc-focus-ring);
+  outline-offset: 0;
 }
 
 /* nc-link-inline — the inline body link style (DESIGN.md link-inline). It reads
@@ -319,10 +301,11 @@
   text-decoration: underline;
   text-underline-offset: 2px;
   text-decoration-thickness: var(--nc-guide);
-  transition: background-color var(--nc-duration-stagger) var(--nc-ease-out-strong),
-              border-color var(--nc-duration-stagger) var(--nc-ease-out-strong),
-              color var(--nc-duration-stagger) var(--nc-ease-out-strong),
-              opacity var(--nc-duration-stagger) var(--nc-ease-out-strong);
+  transition:
+    background-color var(--nc-duration-stagger) var(--nc-ease-out-strong),
+    border-color var(--nc-duration-stagger) var(--nc-ease-out-strong),
+    color var(--nc-duration-stagger) var(--nc-ease-out-strong),
+    opacity var(--nc-duration-stagger) var(--nc-ease-out-strong);
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -332,9 +315,9 @@
 }
 
 .nc-link-inline:focus-visible {
-  outline: 2px solid var(--nc-link);
-  outline-offset: 2px;
-  border-radius: var(--nc-rounded-xs);
+  outline: var(--nc-focus-ring-width) solid var(--nc-focus-ring);
+  outline-offset: 0;
+  border-radius: var(--nc-rounded-md);
 }
 
 /* nc-label-mono — the mono eyebrow/kicker for section labels and low-priority

package/dist/css/tokens.generated.css

@@ -7,6 +7,10 @@
   /* Colors */
   --nc-primary: #008c45;
   --nc-on-primary: #ffffff;
+  --nc-action: #007a3c;
+  --nc-action-foreground: #ffffff;
+  --nc-action-hover: #00602f;
+  --nc-action-active: #00301a;
   --nc-ink: #171717;
   --nc-body: #4d4d4d;
   --nc-muted: #888888;
@@ -14,8 +18,11 @@
   --nc-canvas-soft: #fafafa;
   --nc-canvas-soft-2: #f5f5f5;
   --nc-line: #e5e5e5;
+  --nc-input: #8f8f8f;
   --nc-seam: #e4e7ec;
   --nc-cross: #a1a1a1;
+  --nc-focus-ring: #007a3c;
+  --nc-scrim: #171717;
   --nc-link: #007a3c;
   --nc-link-deep: #00602f;
   --nc-link-bg-soft: #d9f6e4;
@@ -120,9 +127,15 @@
   --nc-dark-seam: #1f1f1f;
   --nc-dark-primary: #ededed;
   --nc-dark-on-primary: #0a0a0a;
+  --nc-dark-action: #ededed;
+  --nc-dark-action-foreground: #0a0a0a;
+  --nc-dark-action-hover: #d4d4d4;
+  --nc-dark-action-active: #a3a3a3;
   --nc-dark-link: #9fe6bc;
   --nc-dark-link-deep: #c3f0d4;
   --nc-dark-link-bg-soft: #00301a;
+  --nc-dark-focus-ring: #9fe6bc;
+  --nc-dark-scrim: #f5f5f5;
   --nc-dark-error: #f7b3b5;
   --nc-dark-error-soft: #4a000e;
   --nc-dark-error-deep: #fad3d4;
@@ -171,6 +184,10 @@
   --nc-6xl: 128px;
   --nc-section: 192px;
   --nc-guide: 1px;
+  --nc-focus-ring-width: 3px;
+  --nc-control-height: 32px;
+  --nc-control-padding-inline: 10px;
+  --nc-touch-target: 44px;
   --nc-page-pad: 24px;
   --nc-page-max-mobile: 448px;
   --nc-page-max-tablet: 624px;
@@ -225,6 +242,8 @@
   --nc-rounded-md: 6px;
   --nc-rounded-lg: 8px;
   --nc-rounded-xl: 10px;
+  --nc-rounded-2xl: 12px;
+  --nc-rounded-3xl: 16px;
   --nc-rounded-pill-sm: 64px;
   --nc-rounded-pill: 100px;
   --nc-rounded-full: 9999px;
@@ -295,6 +314,11 @@
   --nc-type-caption-font-weight: 400;
   --nc-type-caption-line-height: 16px;
   --nc-type-caption-letter-spacing: 0px;
+  --nc-type-caption-strong-font-family: Geist, Inter, system-ui, -apple-system, sans-serif;
+  --nc-type-caption-strong-font-size: 12px;
+  --nc-type-caption-strong-font-weight: 500;
+  --nc-type-caption-strong-line-height: 16px;
+  --nc-type-caption-strong-letter-spacing: 0px;
   --nc-type-caption-mono-font-family: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
   --nc-type-caption-mono-font-size: 12px;
   --nc-type-caption-mono-font-weight: 500;
@@ -315,4 +339,11 @@
   --nc-type-button-lg-font-weight: 500;
   --nc-type-button-lg-line-height: 24px;
   --nc-type-button-lg-letter-spacing: 0px;
+
+  /* Material opacity and shadows (strictly parsed from DESIGN.md prose) */
+  --nc-material-scrim-opacity: 10%;
+  --nc-material-shadow-tooltip: 0 1px 1px rgb(0 0 0 / 2%), 0 4px 8px rgb(0 0 0 / 4%);
+  --nc-material-shadow-menu: 0 1px 1px rgb(0 0 0 / 2%), 0 4px 8px -4px rgb(0 0 0 / 4%), 0 16px 24px -8px rgb(0 0 0 / 6%);
+  --nc-material-shadow-dialog: 0 1px 1px rgb(0 0 0 / 2%), 0 8px 16px -4px rgb(0 0 0 / 4%), 0 24px 32px -8px rgb(0 0 0 / 6%);
+  --nc-material-shadow-sheet: 0 2px 2px rgb(0 0 0 / 4%), 0 8px 16px -4px rgb(0 0 0 / 4%);
 }

package/dist/tailwind/nadicode.tailwind.json

@@ -4,6 +4,10 @@
       "colors": {
         "primary": "#008c45",
         "on-primary": "#ffffff",
+        "action": "#007a3c",
+        "action-foreground": "#ffffff",
+        "action-hover": "#00602f",
+        "action-active": "#00301a",
         "ink": "#171717",
         "body": "#4d4d4d",
         "muted": "#888888",
@@ -11,8 +15,11 @@
         "canvas-soft": "#fafafa",
         "canvas-soft-2": "#f5f5f5",
         "line": "#e5e5e5",
+        "input": "#8f8f8f",
         "seam": "#e4e7ec",
         "cross": "#a1a1a1",
+        "focus-ring": "#007a3c",
+        "scrim": "#171717",
         "link": "#007a3c",
         "link-deep": "#00602f",
         "link-bg-soft": "#d9f6e4",
@@ -117,9 +124,15 @@
         "dark-seam": "#1f1f1f",
         "dark-primary": "#ededed",
         "dark-on-primary": "#0a0a0a",
+        "dark-action": "#ededed",
+        "dark-action-foreground": "#0a0a0a",
+        "dark-action-hover": "#d4d4d4",
+        "dark-action-active": "#a3a3a3",
         "dark-link": "#9fe6bc",
         "dark-link-deep": "#c3f0d4",
         "dark-link-bg-soft": "#00301a",
+        "dark-focus-ring": "#9fe6bc",
+        "dark-scrim": "#f5f5f5",
         "dark-error": "#f7b3b5",
         "dark-error-soft": "#4a000e",
         "dark-error-deep": "#fad3d4",
@@ -193,6 +206,9 @@
         "caption": [
           "Geist, Inter, system-ui, -apple-system, sans-serif"
         ],
+        "caption-strong": [
+          "Geist, Inter, system-ui, -apple-system, sans-serif"
+        ],
         "caption-mono": [
           "Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace"
         ],
@@ -311,6 +327,14 @@
             "fontWeight": "400"
           }
         ],
+        "caption-strong": [
+          "12px",
+          {
+            "lineHeight": "16px",
+            "letterSpacing": "0px",
+            "fontWeight": "500"
+          }
+        ],
         "caption-mono": [
           "12px",
           {
@@ -351,6 +375,8 @@
         "md": "6px",
         "lg": "8px",
         "xl": "10px",
+        "2xl": "12px",
+        "3xl": "16px",
         "pill-sm": "64px",
         "pill": "100px",
         "full": "9999px"
@@ -370,6 +396,10 @@
         "6xl": "128px",
         "section": "192px",
         "guide": "1px",
+        "focus-ring-width": "3px",
+        "control-height": "32px",
+        "control-padding-inline": "10px",
+        "touch-target": "44px",
         "page-pad": "24px",
         "page-max-mobile": "448px",
         "page-max-tablet": "624px",