@netlify/spark-ui 2.2.0 → 2.4.0

package/packages/styles/tokens.css

@@ -32,16 +32,38 @@
   --ntl-button-secondary-bg-color: rgb(4.7059% 16.471% 16.471% / 0.09804);
   --ntl-button-secondary-bg-color-hover: rgb(4.7059% 16.471% 16.471% / 0.14902);
   --ntl-button-secondary-text-color: var(--ntl-neutral-800);
+  /* Tertiary button: white, for low-emphasis actions */
+  --ntl-button-tertiary-bg-color: var(--ntl-neutral-000);
+  /* Tertiary button label */
+  --ntl-button-tertiary-text-color: var(--ntl-neutral-800);
   --ntl-card-bg-color: var(--ntl-neutral-000);
   --ntl-card-border-color: var(--ntl-neutral-200);
   --ntl-card-border-color-hover: var(--ntl-neutral-300);
   --ntl-code-bg-color: var(--ntl-teal-900);
-  --ntl-color-bg: var(--ntl-neutral-000);
-  --ntl-color-bg-2: var(--ntl-neutral-100);
-  --ntl-color-bg-3: var(--ntl-neutral-200);
+  /* Older name for color.bg.page */
+  --ntl-color-bg: var(--ntl-color-bg-page);
+  /* Older name for color.bg.subtle */
+  --ntl-color-bg-2: var(--ntl-color-bg-subtle);
+  /* Older name for color.bg.muted */
+  --ntl-color-bg-3: var(--ntl-color-bg-muted);
+  /* Frosted surfaces; pair with backdrop-filter: blur(). Not the same as color.bgTranslucent */
+  --ntl-color-bg-glass: var(--ntl-hues-alpha-white-80);
+  /* Lighter frosted layer; pair with backdrop-filter: blur() */
+  --ntl-color-bg-glass-subtle: rgb(100% 100% 100% / 0.50196);
   --ntl-color-bg-inverse: var(--ntl-neutral-300);
+  /* A third fill, one step deeper than subtle: wells inside subtle areas. Use instead of color.bg.3 */
+  --ntl-color-bg-muted: var(--ntl-neutral-200);
+  /* Page background. Use instead of color.bg */
+  --ntl-color-bg-page: var(--ntl-neutral-000);
+  /* Recessed areas: table stripes, code wells, sidebars. Use instead of color.bg.2 */
+  --ntl-color-bg-subtle: var(--ntl-neutral-100);
+  /* Raised surfaces on the page: cards, menus, dialogs */
+  --ntl-color-bg-surface: var(--ntl-neutral-000);
   --ntl-color-bg-translucent: rgb(100% 100% 100% / 0.90196);
-  --ntl-color-border-default: rgb(0% 0% 0% / 0.14902);
+  /* Default borders and dividers */
+  --ntl-color-border: rgb(0% 0% 0% / 0.14902);
+  /* Older name for color.border */
+  --ntl-color-border-default: var(--ntl-color-border);
   --ntl-color-border-strong: var(--ntl-neutral-300);
   --ntl-color-border-subtle: rgb(0% 0% 0% / 0.06275);
   --ntl-color-brand-primary: var(--ntl-blue-700);
@@ -59,35 +81,56 @@
   --ntl-color-info-border: var(--ntl-blue-600);
   --ntl-color-info-text: var(--ntl-blue-600);
   --ntl-color-invalid-bg: var(--ntl-red-100);
-  --ntl-color-invalid-border: var(--ntl-red-600);
+  --ntl-color-invalid-border: var(--ntl-color-status-error);
   --ntl-color-invalid-text: var(--ntl-red-600);
   --ntl-color-link: var(--ntl-blue-700);
-  --ntl-color-link-default: var(--ntl-blue-700);
+  --ntl-color-link-default: var(--ntl-color-link);
   --ntl-color-link-hover: var(--ntl-blue-800);
   --ntl-color-link-inverse: var(--ntl-blue-400);
   --ntl-color-logo-inactive: rgb(70.196% 70.196% 70.196%);
   --ntl-color-logo-spark: var(--ntl-teal-400);
   --ntl-color-logo-type: var(--ntl-teal-800);
-  --ntl-color-stroke: rgb(0% 0% 0% / 0.14902);
+  /* One color per status: dots, icons, outlines. color.invalid.border follows it */
+  --ntl-color-status-error: var(--ntl-red-600);
+  /* One color per status: dots, icons, outlines. color.success.border follows it */
+  --ntl-color-status-success: var(--ntl-green-300);
+  /* One color per status: dots, icons, outlines. color.warning.border follows it */
+  --ntl-color-status-warning: var(--ntl-gold-300);
+  /* Older name for color.border */
+  --ntl-color-stroke: var(--ntl-color-border);
   --ntl-color-success-bg: var(--ntl-green-100);
-  --ntl-color-success-border: var(--ntl-green-300);
+  /* One color per status: dots, icons, outlines. color.success.border follows it */
+  --ntl-color-success-border: var(--ntl-color-status-success);
   --ntl-color-success-text: var(--ntl-green-800);
   --ntl-color-text: var(--ntl-neutral-700);
   --ntl-color-text-accent: var(--ntl-teal-300);
-  --ntl-color-text-default: var(--ntl-neutral-700);
+  /* Older name for color.text */
+  --ntl-color-text-default: var(--ntl-color-text);
+  --ntl-color-text-eyebrow: var(--ntl-blue-700);
+  /* Headings. Use instead of headingTextColor */
+  --ntl-color-text-heading: var(--ntl-neutral-800);
   --ntl-color-text-inverse: var(--ntl-neutral-100);
+  --ntl-color-text-on-accent: var(--ntl-color-text-inverse);
   --ntl-color-text-weak: var(--ntl-neutral-500);
   --ntl-color-text-weaker: var(--ntl-neutral-400);
   --ntl-color-warning-bg: var(--ntl-gold-100);
-  --ntl-color-warning-border: var(--ntl-gold-300);
+  /* One color per status: dots, icons, outlines. color.warning.border follows it */
+  --ntl-color-warning-border: var(--ntl-color-status-warning);
   --ntl-color-warning-text: var(--ntl-gold-800);
-  --ntl-eyebrow-text-color: var(--ntl-blue-700);
+  --ntl-eyebrow-text-color: var(--ntl-color-text-eyebrow);
   --ntl-filter-invert: none;
   --ntl-focus-outline-offset: 0px;
   --ntl-focus-outline-width: 5px;
-  --ntl-font-family-display: "Figtree", system-ui, "Helvetica", sans-serif;
+  /* Older name for fontFamily.heading */
+  --ntl-font-family-display: var(--ntl-font-family-heading);
+  /* Headings and display type, with the heading font sizes */
+  --ntl-font-family-heading: "Figtree", system-ui, "Helvetica", sans-serif;
   --ntl-font-family-mono: "Martian Mono", ui-monospace, "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
   --ntl-font-family-text: "Instrument Sans", system-ui, "Helvetica", sans-serif;
+  /* 10px */
+  --ntl-font-size-badge: 0.625rem;
+  /* 14px */
+  --ntl-font-size-button: 0.875rem;
   --ntl-font-size-display-2xl: clamp(2.5rem, 1.8864rem + 2.7273vw, 4rem);
   --ntl-font-size-display-2xs: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
   --ntl-font-size-display-3xl: clamp(2.75rem, 2.0341rem + 3.1818vw, 4.5rem);
@@ -97,6 +140,19 @@
   --ntl-font-size-display-sm: clamp(1.5rem, 1.2955rem + 0.9091vw, 2rem);
   --ntl-font-size-display-xl: clamp(2.25rem, 1.7386rem + 2.2727vw, 3.5rem);
   --ntl-font-size-display-xs: clamp(1.25rem, 1.1477rem + 0.4545vw, 1.5rem);
+  /* 12px */
+  --ntl-font-size-eyebrow: 0.75rem;
+  --ntl-font-size-heading-2xs: 1.625rem;
+  --ntl-font-size-heading-l: clamp(3rem, 2.1818rem + 3.6364vw, 5rem);
+  --ntl-font-size-heading-m: clamp(2.5rem, 1.9886rem + 2.2727vw, 3.75rem);
+  --ntl-font-size-heading-s: clamp(2rem, 1.7443rem + 1.1364vw, 2.625rem);
+  --ntl-font-size-heading-xl: clamp(3.5rem, 1.8636rem + 7.2727vw, 7.5rem);
+  --ntl-font-size-heading-xs: 2rem;
+  /* 15px */
+  --ntl-font-size-link: 0.9375rem;
+  /* 14px */
+  --ntl-font-size-tab: 0.875rem;
+  --ntl-font-size-text-2xs: 0.625rem;
   --ntl-font-size-text-lg: 1.125rem;
   --ntl-font-size-text-md: 1rem;
   --ntl-font-size-text-sm: 0.875rem;
@@ -127,7 +183,12 @@
   --ntl-green-700: rgb(10.196% 41.961% 20.392%);
   --ntl-green-800: rgb(5.8824% 29.02% 12.941%);
   --ntl-green-900: rgb(8.2353% 16.471% 9.8039%);
-  --ntl-heading-text-color: var(--ntl-neutral-800);
+  /* Headings. Use instead of headingTextColor */
+  --ntl-heading-text-color: var(--ntl-color-text-heading);
+  --ntl-hues-alpha-warm-gray-60: rgb(10.588% 10.196% 9.0196% / 0.6);
+  --ntl-hues-alpha-warm-gray-80: rgb(10.588% 10.196% 9.0196% / 0.8);
+  --ntl-hues-alpha-white-50: rgb(100% 100% 100% / 0.50196);
+  --ntl-hues-alpha-white-80: rgb(100% 100% 100% / 0.8);
   --ntl-hues-blue-black-000: rgb(95.686% 96.863% 97.647%);
   --ntl-hues-blue-black-100: rgb(76.471% 79.608% 80.784%);
   --ntl-hues-blue-black-200: rgb(57.647% 61.961% 63.922%);
@@ -208,6 +269,7 @@
   --ntl-hues-lime-700: rgb(37.647% 49.804% 2.7451%);
   --ntl-hues-lime-800: rgb(21.961% 29.804% 0%);
   --ntl-hues-lime-900: rgb(8.2353% 12.157% 0%);
+  --ntl-hues-off-black: rgb(7.451% 8.6275% 9.8039%);
   --ntl-hues-orange-000: rgb(100% 95.686% 94.118%);
   --ntl-hues-orange-100: rgb(100% 87.843% 83.529%);
   --ntl-hues-orange-200: rgb(100% 79.216% 72.157%);
@@ -278,6 +340,9 @@
   --ntl-hues-sky-700: rgb(1.5686% 45.098% 49.02%);
   --ntl-hues-sky-800: rgb(0.78431% 27.843% 30.196%);
   --ntl-hues-sky-900: rgb(0% 12.157% 13.725%);
+  --ntl-hues-sky-tint-100: rgb(66.275% 94.118% 96.078%);
+  --ntl-hues-sky-tint-200: rgb(45.49% 90.196% 93.725%);
+  --ntl-hues-sky-tint-300: rgb(16.863% 84.706% 90.196%);
   --ntl-hues-turquoise-000: rgb(90.98% 98.824% 96.863%);
   --ntl-hues-turquoise-100: rgb(80% 96.863% 93.333%);
   --ntl-hues-turquoise-200: rgb(68.235% 94.902% 89.412%);
@@ -288,22 +353,54 @@
   --ntl-hues-turquoise-700: rgb(2.7451% 47.059% 41.176%);
   --ntl-hues-turquoise-800: rgb(0% 29.02% 25.098%);
   --ntl-hues-turquoise-900: rgb(0% 12.549% 10.588%);
+  --ntl-hues-warm-gray-50: rgb(96.863% 96.471% 95.686%);
+  --ntl-hues-warm-gray-100: rgb(94.118% 93.333% 91.765%);
+  --ntl-hues-warm-gray-200: rgb(90.588% 89.804% 87.843%);
+  --ntl-hues-warm-gray-300: rgb(85.49% 84.706% 82.353%);
+  --ntl-hues-warm-gray-400: rgb(72.157% 70.588% 67.843%);
+  --ntl-hues-warm-gray-500: rgb(58.039% 56.471% 52.941%);
+  --ntl-hues-warm-gray-600: rgb(45.098% 43.529% 40.392%);
+  --ntl-hues-warm-gray-700: rgb(33.725% 32.549% 29.804%);
+  --ntl-hues-warm-gray-800: rgb(23.922% 22.745% 20.784%);
+  --ntl-hues-warm-gray-900: rgb(15.686% 14.902% 13.333%);
+  --ntl-hues-warm-gray-950: rgb(10.588% 10.196% 9.0196%);
   --ntl-hues-white: rgb(100% 100% 100%);
+  /* Headings; 0.9 under hues */
   --ntl-line-height-heading: 1.1;
+  /* Eyebrows, captions and small labels */
+  --ntl-line-height-label: 1.4;
   --ntl-line-height-loose: 2;
+  /* Buttons, tabs and other single-line UI */
   --ntl-line-height-none: 1;
   --ntl-line-height-relaxed: 1.65;
   --ntl-line-height-snug: 1.35;
+  /* Body copy */
   --ntl-line-height-text: 1.5;
   --ntl-line-height-tight: 1.2;
-  --ntl-motion-duration-base: 200ms;
-  --ntl-motion-duration-fast: 100ms;
-  --ntl-motion-duration-slow: 300ms;
-  --ntl-motion-duration-slower: 500ms;
-  --ntl-motion-easing-default: ease;
-  --ntl-motion-easing-in: ease-in;
-  --ntl-motion-easing-out: ease-out;
+  --ntl-motion-duration-100: 100ms;
+  --ntl-motion-duration-150: 150ms;
+  --ntl-motion-duration-200: 200ms;
+  --ntl-motion-duration-260: 260ms;
+  --ntl-motion-duration-300: 300ms;
+  --ntl-motion-duration-380: 380ms;
+  --ntl-motion-duration-500: 500ms;
+  --ntl-motion-duration-base: var(--ntl-motion-duration-200);
+  --ntl-motion-duration-fast: var(--ntl-motion-duration-100);
+  --ntl-motion-duration-quick: var(--ntl-motion-duration-260);
+  --ntl-motion-duration-short: var(--ntl-motion-duration-150);
+  --ntl-motion-duration-slow: var(--ntl-motion-duration-300);
+  --ntl-motion-duration-slower: var(--ntl-motion-duration-500);
+  --ntl-motion-duration-subtle: var(--ntl-motion-duration-380);
+  --ntl-motion-easing-default: cubic-bezier(0.25, 0.1, 0.25, 1);
+  /* Hover, press and focus feedback; the kit pairs it with short (button hover 160ms) */
+  --ntl-motion-easing-direct: cubic-bezier(0.2, 0, 0, 1);
+  --ntl-motion-easing-in: cubic-bezier(0.42, 0, 1, 1);
+  --ntl-motion-easing-out: cubic-bezier(0, 0, 0.58, 1);
+  /* Entrances and elements settling into place */
+  --ntl-motion-easing-settle: cubic-bezier(0.22, 1, 0.36, 1);
   --ntl-motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  /* Moving between states: tabs, menus, expanding panels */
+  --ntl-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --ntl-neutral-000: var(--ntl-neutral-light-000);
   --ntl-neutral-100: var(--ntl-neutral-light-100);
   --ntl-neutral-200: var(--ntl-neutral-light-200);
@@ -335,7 +432,7 @@
   --ntl-neutral-light-800: rgb(9.4118% 10.196% 10.98%);
   --ntl-neutral-light-900: rgb(2.3529% 4.3137% 6.2745%);
   --ntl-page-content-max-width: 80rem;
-  --ntl-page-gutter: var(--ntl-space-l);
+  --ntl-page-gutter: var(--ntl-space-32);
   --ntl-pink-000: rgb(98.824% 94.118% 98.431%);
   --ntl-pink-100: rgb(96.471% 82.353% 94.902%);
   --ntl-pink-200: rgb(96.863% 73.725% 95.294%);
@@ -356,13 +453,27 @@
   --ntl-purple-700: rgb(38.039% 29.02% 79.216%);
   --ntl-purple-800: rgb(21.961% 16.471% 64.314%);
   --ntl-purple-900: rgb(16.078% 12.941% 25.882%);
-  --ntl-radius-2xl: 1.875rem;
-  --ntl-radius-l: 0.75rem;
-  --ntl-radius-m: 0.375rem;
+  --ntl-radius-2: 0.125rem;
+  --ntl-radius-2xl: var(--ntl-radius-30);
+  --ntl-radius-4: 0.25rem;
+  --ntl-radius-6: 0.375rem;
+  --ntl-radius-10: 0.625rem;
+  --ntl-radius-12: 0.75rem;
+  --ntl-radius-16: 1rem;
+  --ntl-radius-20: 1.25rem;
+  --ntl-radius-30: 1.875rem;
+  --ntl-radius-card: var(--ntl-radius-6);
+  --ntl-radius-control: var(--ntl-radius-6);
+  /* Same as radius.pill: buttons, chips, badges, avatars */
+  --ntl-radius-full: var(--ntl-radius-pill);
+  --ntl-radius-l: var(--ntl-radius-12);
+  --ntl-radius-m: var(--ntl-radius-6);
+  --ntl-radius-none: 0rem;
+  --ntl-radius-panel: var(--ntl-radius-16);
   --ntl-radius-pill: 360px;
-  --ntl-radius-s: 0.25rem;
-  --ntl-radius-xl: 1rem;
-  --ntl-radius-xs: 0.125rem;
+  --ntl-radius-s: var(--ntl-radius-4);
+  --ntl-radius-xl: var(--ntl-radius-16);
+  --ntl-radius-xs: var(--ntl-radius-2);
   --ntl-red-000: rgb(98.431% 93.333% 92.941%);
   --ntl-red-100: rgb(98.431% 82.745% 81.569%);
   --ntl-red-200: rgb(100% 74.118% 72.941%);
@@ -383,21 +494,53 @@
   --ntl-search-source-list-color: var(--ntl-neutral-100);
   --ntl-search-submit-btn-bg-color: var(--ntl-teal-200);
   --ntl-search-user-message-color: var(--ntl-teal-000);
-  --ntl-shadow-deep: 0px 16px 24px 0px rgb(0% 0% 0% / 0.07), 0px 6px 30px 0px rgb(0% 0% 0% / 0.06), 0px 8px 10px 0px rgb(0% 0% 0% / 0.1);
-  --ntl-shadow-heavy: -10px 10px 80px 0px rgb(0% 0% 0% / 0.1);
+  /* Older name for shadow.floating */
+  --ntl-shadow-deep: var(--ntl-shadow-floating);
+  /* Menus, popovers, tooltips, sticky bars */
+  --ntl-shadow-floating: 0px 16px 24px 0px rgb(0% 0% 0% / 0.07), 0px 6px 30px 0px rgb(0% 0% 0% / 0.06), 0px 8px 10px 0px rgb(0% 0% 0% / 0.1);
+  /* Older name for shadow.overlay */
+  --ntl-shadow-heavy: var(--ntl-shadow-overlay);
   --ntl-shadow-hover: 0px 4px 12px 0px rgb(0% 0% 0% / 0.25);
-  --ntl-shadow-light: 0px 2px 4px 0px rgb(20% 21.569% 23.137% / 0.08), 0px 1px 10px 0px rgb(20% 21.569% 23.137% / 0.06);
+  --ntl-shadow-l: 0px 12px 40px -12px rgb(7.451% 8.6275% 9.8039% / 0.12);
+  /* Older name for shadow.raised */
+  --ntl-shadow-light: var(--ntl-shadow-raised);
+  --ntl-shadow-m: 0px 10px 20px -5px rgb(7.451% 8.6275% 9.8039% / 0.06);
+  /* Modals and dialogs */
+  --ntl-shadow-overlay: -10px 10px 80px 0px rgb(0% 0% 0% / 0.1);
+  /* Cards and tiles at rest */
+  --ntl-shadow-raised: 0px 2px 4px 0px rgb(20% 21.569% 23.137% / 0.08), 0px 1px 10px 0px rgb(20% 21.569% 23.137% / 0.06);
+  --ntl-shadow-s: 0px 4px 44px 0px rgb(7.451% 8.6275% 9.8039% / 0.12);
   --ntl-space-0: 0rem;
-  --ntl-space-2xl: 4rem;
-  --ntl-space-2xs: 0.5rem;
-  --ntl-space-3xl: 6rem;
-  --ntl-space-3xs: 0.25rem;
-  --ntl-space-4xl: 10rem;
-  --ntl-space-l: 2rem;
-  --ntl-space-m: 1.5rem;
-  --ntl-space-s: 1rem;
-  --ntl-space-xl: 3rem;
-  --ntl-space-xs: 0.75rem;
+  --ntl-space-2xl: var(--ntl-space-64);
+  --ntl-space-2xs: var(--ntl-space-8);
+  --ntl-space-3xl: var(--ntl-space-96);
+  --ntl-space-3xs: var(--ntl-space-4);
+  --ntl-space-4: 0.25rem;
+  --ntl-space-4xl: var(--ntl-space-160);
+  --ntl-space-8: 0.5rem;
+  --ntl-space-12: 0.75rem;
+  --ntl-space-16: 1rem;
+  --ntl-space-20: 1.25rem;
+  --ntl-space-24: 1.5rem;
+  --ntl-space-32: 2rem;
+  --ntl-space-40: 2.5rem;
+  --ntl-space-48: 3rem;
+  --ntl-space-64: 4rem;
+  --ntl-space-80: 5rem;
+  --ntl-space-96: 6rem;
+  --ntl-space-128: 8rem;
+  --ntl-space-160: 10rem;
+  --ntl-space-block: clamp(3rem, 2.5909rem + 1.8182vw, 4rem);
+  --ntl-space-gutter: 1.25rem;
+  --ntl-space-inline: 0.5rem;
+  --ntl-space-l: var(--ntl-space-32);
+  --ntl-space-m: var(--ntl-space-24);
+  --ntl-space-margin: clamp(1.25rem, 0.7386rem + 2.2727vw, 2.5rem);
+  --ntl-space-s: var(--ntl-space-16);
+  --ntl-space-section: clamp(5rem, 3.7727rem + 5.4545vw, 8rem);
+  --ntl-space-stack: clamp(1rem, 0.7955rem + 0.9091vw, 1.5rem);
+  --ntl-space-xl: var(--ntl-space-48);
+  --ntl-space-xs: var(--ntl-space-12);
   --ntl-tabbed-content-bg-color: var(--ntl-neutral-000);
   --ntl-tabbed-content-bg-color-active: var(--ntl-neutral-000);
   --ntl-tabbed-content-border-color: var(--ntl-color-icon);
@@ -418,6 +561,9 @@
   --ntl-text-underline-offset: 0.125em;
   --ntl-title-text-color: rgb(32.941% 35.294% 38.039% / 0.74902);
   --ntl-tracking-tight: -0.02em;
+  --ntl-tracking-tighter: -0.04em;
+  --ntl-tracking-wide: 0.02em;
+  --ntl-tracking-wider: 0.08em;
   --ntl-z-index-base: 0;
   --ntl-z-index-modal: 300;
   --ntl-z-index-overlay: 200;
@@ -428,9 +574,9 @@
 }
 
 [data-brand="hues"] {
-  --ntl-badge-bg-color: var(--ntl-neutral-100);
-  --ntl-badge-border-color: var(--ntl-neutral-300);
-  --ntl-badge-text-color: var(--ntl-neutral-500);
+  --ntl-badge-bg-color: var(--ntl-hues-warm-gray-100);
+  --ntl-badge-border-color: var(--ntl-hues-warm-gray-200);
+  --ntl-badge-text-color: var(--ntl-hues-warm-gray-700);
   --ntl-blockquote-accent-color: var(--ntl-blue-700);
   --ntl-blue-000: var(--ntl-hues-cobalt-000);
   --ntl-blue-100: var(--ntl-hues-cobalt-100);
@@ -442,58 +588,113 @@
   --ntl-blue-700: var(--ntl-hues-cobalt-500);
   --ntl-blue-800: var(--ntl-hues-cobalt-700);
   --ntl-blue-900: var(--ntl-hues-cobalt-800);
-  --ntl-button-outline-bg-color-hover: rgb(83.922% 98.039% 97.647%);
-  --ntl-button-outline-stroke-color: var(--ntl-neutral-800);
-  --ntl-button-outline-text-color: var(--ntl-neutral-800);
-  --ntl-button-primary-bg-color: var(--ntl-teal-200);
-  --ntl-button-primary-bg-color-hover: var(--ntl-teal-100);
-  --ntl-button-primary-text-color: var(--ntl-neutral-800);
-  --ntl-button-secondary-text-color: var(--ntl-neutral-800);
-  --ntl-card-bg-color: var(--ntl-neutral-000);
-  --ntl-card-border-color: var(--ntl-neutral-200);
-  --ntl-card-border-color-hover: var(--ntl-neutral-300);
+  --ntl-button-outline-bg-color-hover: var(--ntl-hues-warm-gray-100);
+  --ntl-button-outline-stroke-color: var(--ntl-hues-off-black);
+  --ntl-button-outline-text-color: var(--ntl-hues-off-black);
+  --ntl-button-primary-bg-color: var(--ntl-hues-sky-500);
+  --ntl-button-primary-bg-color-hover: var(--ntl-hues-sky-tint-300);
+  --ntl-button-primary-text-color: var(--ntl-hues-off-black);
+  --ntl-button-secondary-bg-color: var(--ntl-hues-off-black);
+  --ntl-button-secondary-bg-color-hover: var(--ntl-hues-warm-gray-800);
+  --ntl-button-secondary-text-color: var(--ntl-hues-white);
+  /* Tertiary button: white, for low-emphasis actions */
+  --ntl-button-tertiary-bg-color: var(--ntl-hues-white);
+  /* Tertiary button label */
+  --ntl-button-tertiary-text-color: var(--ntl-hues-off-black);
+  --ntl-card-bg-color: var(--ntl-hues-white);
+  --ntl-card-border-color: var(--ntl-hues-warm-gray-200);
+  --ntl-card-border-color-hover: var(--ntl-hues-warm-gray-300);
   --ntl-code-bg-color: var(--ntl-teal-900);
-  --ntl-color-bg: var(--ntl-neutral-000);
-  --ntl-color-bg-2: var(--ntl-neutral-100);
-  --ntl-color-bg-3: var(--ntl-neutral-200);
-  --ntl-color-bg-inverse: var(--ntl-neutral-300);
-  --ntl-color-border-strong: var(--ntl-neutral-300);
-  --ntl-color-brand-primary: var(--ntl-blue-700);
-  --ntl-color-brand-primary-hover: var(--ntl-blue-800);
-  --ntl-color-brand-secondary: var(--ntl-teal-300);
-  --ntl-color-brand-secondary-hover: var(--ntl-teal-800);
+  /* Older name for color.bg.page */
+  --ntl-color-bg: var(--ntl-color-bg-page);
+  /* Older name for color.bg.subtle */
+  --ntl-color-bg-2: var(--ntl-color-bg-subtle);
+  /* Older name for color.bg.muted */
+  --ntl-color-bg-3: var(--ntl-color-bg-muted);
+  /* Lighter frosted layer; pair with backdrop-filter: blur() */
+  --ntl-color-bg-glass-subtle: var(--ntl-hues-alpha-white-50);
+  --ntl-color-bg-inverse: var(--ntl-hues-off-black);
+  /* A third fill, one step deeper than subtle: wells inside subtle areas. Use instead of color.bg.3 */
+  --ntl-color-bg-muted: var(--ntl-hues-warm-gray-200);
+  /* Page background. Use instead of color.bg */
+  --ntl-color-bg-page: var(--ntl-hues-warm-gray-50);
+  /* Recessed areas: table stripes, code wells, sidebars. Use instead of color.bg.2 */
+  --ntl-color-bg-subtle: var(--ntl-hues-warm-gray-100);
+  /* Raised surfaces on the page: cards, menus, dialogs */
+  --ntl-color-bg-surface: var(--ntl-hues-white);
+  /* Default borders and dividers */
+  --ntl-color-border: var(--ntl-hues-warm-gray-200);
+  /* Older name for color.border */
+  --ntl-color-border-default: var(--ntl-color-border);
+  --ntl-color-border-strong: var(--ntl-hues-off-black);
+  --ntl-color-border-subtle: var(--ntl-hues-warm-gray-100);
+  --ntl-color-brand-primary: var(--ntl-hues-sky-500);
+  --ntl-color-brand-primary-hover: var(--ntl-hues-sky-tint-300);
+  --ntl-color-brand-secondary: var(--ntl-hues-off-black);
+  --ntl-color-brand-secondary-hover: var(--ntl-hues-warm-gray-800);
   --ntl-color-disabled-bg: var(--ntl-neutral-200);
   --ntl-color-disabled-border: var(--ntl-neutral-400);
   --ntl-color-disabled-text: var(--ntl-neutral-400);
   --ntl-color-highlight-bg: var(--ntl-purple-100);
   --ntl-color-highlight-border: var(--ntl-purple-600);
   --ntl-color-highlight-text: var(--ntl-purple-600);
-  --ntl-color-icon: var(--ntl-blue-700);
+  --ntl-color-icon: var(--ntl-hues-off-black);
   --ntl-color-info-bg: var(--ntl-blue-100);
   --ntl-color-info-border: var(--ntl-blue-600);
   --ntl-color-info-text: var(--ntl-blue-600);
   --ntl-color-invalid-bg: var(--ntl-red-100);
-  --ntl-color-invalid-border: var(--ntl-red-600);
+  --ntl-color-invalid-border: var(--ntl-color-status-error);
   --ntl-color-invalid-text: var(--ntl-red-600);
-  --ntl-color-link: var(--ntl-blue-700);
-  --ntl-color-link-default: var(--ntl-blue-700);
-  --ntl-color-link-hover: var(--ntl-blue-800);
+  --ntl-color-link: var(--ntl-hues-off-black);
+  --ntl-color-link-default: var(--ntl-color-link);
+  --ntl-color-link-hover: var(--ntl-hues-warm-gray-700);
   --ntl-color-link-inverse: var(--ntl-blue-400);
-  --ntl-color-logo-spark: var(--ntl-teal-400);
-  --ntl-color-logo-type: var(--ntl-teal-800);
+  --ntl-color-logo-inactive: var(--ntl-hues-warm-gray-400);
+  --ntl-color-logo-spark: var(--ntl-hues-off-black);
+  --ntl-color-logo-type: var(--ntl-hues-off-black);
+  /* One color per status: dots, icons, outlines. color.invalid.border follows it */
+  --ntl-color-status-error: var(--ntl-hues-red-500);
+  /* One color per status: dots, icons, outlines. color.success.border follows it */
+  --ntl-color-status-success: var(--ntl-hues-green-500);
+  /* One color per status: dots, icons, outlines. color.warning.border follows it */
+  --ntl-color-status-warning: var(--ntl-hues-gold-500);
+  /* Older name for color.border */
+  --ntl-color-stroke: var(--ntl-color-border);
   --ntl-color-success-bg: var(--ntl-green-100);
-  --ntl-color-success-border: var(--ntl-green-300);
+  /* One color per status: dots, icons, outlines. color.success.border follows it */
+  --ntl-color-success-border: var(--ntl-color-status-success);
   --ntl-color-success-text: var(--ntl-green-800);
-  --ntl-color-text: var(--ntl-neutral-700);
+  --ntl-color-text: var(--ntl-hues-off-black);
   --ntl-color-text-accent: var(--ntl-teal-300);
-  --ntl-color-text-default: var(--ntl-neutral-700);
-  --ntl-color-text-inverse: var(--ntl-neutral-100);
-  --ntl-color-text-weak: var(--ntl-neutral-500);
-  --ntl-color-text-weaker: var(--ntl-neutral-400);
+  /* Older name for color.text */
+  --ntl-color-text-default: var(--ntl-color-text);
+  --ntl-color-text-eyebrow: var(--ntl-hues-warm-gray-700);
+  /* Headings. Use instead of headingTextColor */
+  --ntl-color-text-heading: var(--ntl-hues-off-black);
+  --ntl-color-text-inverse: var(--ntl-hues-white);
+  --ntl-color-text-on-accent: var(--ntl-hues-off-black);
+  --ntl-color-text-weak: var(--ntl-hues-warm-gray-700);
+  --ntl-color-text-weaker: var(--ntl-hues-warm-gray-600);
   --ntl-color-warning-bg: var(--ntl-gold-100);
-  --ntl-color-warning-border: var(--ntl-gold-300);
+  /* One color per status: dots, icons, outlines. color.warning.border follows it */
+  --ntl-color-warning-border: var(--ntl-color-status-warning);
   --ntl-color-warning-text: var(--ntl-gold-800);
-  --ntl-eyebrow-text-color: var(--ntl-blue-700);
+  --ntl-eyebrow-text-color: var(--ntl-color-text-eyebrow);
+  /* Older name for fontFamily.heading */
+  --ntl-font-family-display: var(--ntl-font-family-heading);
+  /* Headings and display type, with the heading font sizes */
+  --ntl-font-family-heading: "Systemia", system-ui, "Helvetica", sans-serif;
+  --ntl-font-family-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
+  --ntl-font-family-text: "Systemia", system-ui, "Helvetica", sans-serif;
+  --ntl-font-size-display-2xl: var(--ntl-font-size-heading-m);
+  --ntl-font-size-display-2xs: var(--ntl-font-size-heading-2xs);
+  --ntl-font-size-display-3xl: var(--ntl-font-size-heading-l);
+  --ntl-font-size-display-4xl: var(--ntl-font-size-heading-l);
+  --ntl-font-size-display-lg: var(--ntl-font-size-heading-s);
+  --ntl-font-size-display-md: var(--ntl-font-size-heading-s);
+  --ntl-font-size-display-sm: var(--ntl-font-size-heading-xs);
+  --ntl-font-size-display-xl: var(--ntl-font-size-heading-m);
+  --ntl-font-size-display-xs: var(--ntl-font-size-heading-2xs);
   --ntl-gold-000: var(--ntl-hues-gold-100);
   --ntl-gold-100: var(--ntl-hues-gold-300);
   --ntl-gold-200: var(--ntl-hues-gold-500);
@@ -514,7 +715,10 @@
   --ntl-green-700: var(--ntl-hues-green-700);
   --ntl-green-800: var(--ntl-hues-green-800);
   --ntl-green-900: var(--ntl-hues-green-900);
-  --ntl-heading-text-color: var(--ntl-neutral-800);
+  /* Headings. Use instead of headingTextColor */
+  --ntl-heading-text-color: var(--ntl-color-text-heading);
+  /* Headings; 0.9 under hues */
+  --ntl-line-height-heading: 0.9;
   --ntl-neutral-000: var(--ntl-neutral-light-000);
   --ntl-neutral-100: var(--ntl-neutral-light-100);
   --ntl-neutral-200: var(--ntl-neutral-light-200);
@@ -565,6 +769,12 @@
   --ntl-purple-700: var(--ntl-hues-purple-600);
   --ntl-purple-800: var(--ntl-hues-purple-700);
   --ntl-purple-900: var(--ntl-hues-plum-800);
+  /* Cards, panels, accordions and inputs */
+  --ntl-radius-card: var(--ntl-radius-20);
+  /* Small elements: tags, tooltips, popovers, progress bars, thumbnails */
+  --ntl-radius-control: var(--ntl-radius-10);
+  /* Large cards and feature media: hero images, video, drop zones */
+  --ntl-radius-panel: clamp(1.25rem, 0.9943rem + 1.1364vw, 1.875rem);
   --ntl-red-000: var(--ntl-hues-red-000);
   --ntl-red-100: var(--ntl-hues-red-100);
   --ntl-red-200: var(--ntl-hues-red-200);
@@ -585,6 +795,19 @@
   --ntl-search-source-list-color: var(--ntl-neutral-100);
   --ntl-search-submit-btn-bg-color: var(--ntl-teal-200);
   --ntl-search-user-message-color: var(--ntl-teal-000);
+  /* Older name for shadow.floating */
+  --ntl-shadow-deep: var(--ntl-shadow-floating);
+  /* Menus, popovers, tooltips, sticky bars */
+  --ntl-shadow-floating: var(--ntl-shadow-l);
+  /* Older name for shadow.overlay */
+  --ntl-shadow-heavy: var(--ntl-shadow-overlay);
+  --ntl-shadow-hover: var(--ntl-shadow-s);
+  /* Older name for shadow.raised */
+  --ntl-shadow-light: var(--ntl-shadow-raised);
+  /* Modals and dialogs */
+  --ntl-shadow-overlay: var(--ntl-shadow-l);
+  /* Cards and tiles at rest */
+  --ntl-shadow-raised: var(--ntl-shadow-m);
   --ntl-tabbed-content-bg-color: var(--ntl-neutral-000);
   --ntl-tabbed-content-bg-color-active: var(--ntl-neutral-000);
   --ntl-tabbed-content-border-color: var(--ntl-color-icon);
@@ -605,7 +828,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :root, [data-brand="hues"] {
+  :root {
     --ntl-active-switcher-tab-bg-color: rgb(4.7059% 16.471% 16.471%);
     --ntl-badge-bg-color: var(--ntl-neutral-700);
     --ntl-badge-border-color: var(--ntl-neutral-600);
@@ -621,16 +844,34 @@
     --ntl-button-secondary-bg-color: rgb(100% 100% 100% / 0.09804);
     --ntl-button-secondary-bg-color-hover: rgb(65.49% 100% 99.216% / 0.14902);
     --ntl-button-secondary-text-color: var(--ntl-teal-200);
+    /* Tertiary button: white, for low-emphasis actions */
+    --ntl-button-tertiary-bg-color: var(--ntl-neutral-000);
+    /* Tertiary button label */
+    --ntl-button-tertiary-text-color: var(--ntl-neutral-800);
     --ntl-card-bg-color: var(--ntl-teal-900);
     --ntl-card-border-color: var(--ntl-teal-900);
     --ntl-card-border-color-hover: var(--ntl-teal-800);
     --ntl-code-bg-color: var(--ntl-teal-900);
-    --ntl-color-bg: var(--ntl-neutral-800);
-    --ntl-color-bg-2: var(--ntl-neutral-700);
-    --ntl-color-bg-3: var(--ntl-neutral-600);
+    /* Older name for color.bg.page */
+    --ntl-color-bg: var(--ntl-color-bg-page);
+    /* Older name for color.bg.subtle */
+    --ntl-color-bg-2: var(--ntl-color-bg-subtle);
+    /* Older name for color.bg.muted */
+    --ntl-color-bg-3: var(--ntl-color-bg-muted);
     --ntl-color-bg-inverse: var(--ntl-neutral-000);
+    /* A third fill, one step deeper than subtle: wells inside subtle areas. Use instead of color.bg.3 */
+    --ntl-color-bg-muted: var(--ntl-neutral-600);
+    /* Page background. Use instead of color.bg */
+    --ntl-color-bg-page: var(--ntl-neutral-800);
+    /* Recessed areas: table stripes, code wells, sidebars. Use instead of color.bg.2 */
+    --ntl-color-bg-subtle: var(--ntl-neutral-700);
+    /* Raised surfaces on the page: cards, menus, dialogs */
+    --ntl-color-bg-surface: var(--ntl-neutral-700);
     --ntl-color-bg-translucent: rgb(7.0588% 9.4118% 12.157% / 0.94902);
-    --ntl-color-border-default: rgb(100% 100% 100% / 0.09804);
+    /* Default borders and dividers */
+    --ntl-color-border: rgb(100% 100% 100% / 0.09804);
+    /* Older name for color.border */
+    --ntl-color-border-default: var(--ntl-color-border);
     --ntl-color-border-strong: var(--ntl-neutral-500);
     --ntl-color-border-subtle: rgb(100% 100% 100% / 0.03922);
     --ntl-color-brand-primary: var(--ntl-teal-300);
@@ -648,31 +889,189 @@
     --ntl-color-info-border: var(--ntl-blue-700);
     --ntl-color-info-text: var(--ntl-blue-700);
     --ntl-color-invalid-bg: var(--ntl-red-200);
-    --ntl-color-invalid-border: var(--ntl-red-700);
+    --ntl-color-invalid-border: var(--ntl-color-status-error);
     --ntl-color-invalid-text: var(--ntl-red-700);
     --ntl-color-link: var(--ntl-teal-200);
-    --ntl-color-link-default: var(--ntl-teal-200);
+    /* Older name for color.link */
+    --ntl-color-link-default: var(--ntl-color-link);
     --ntl-color-link-hover: var(--ntl-teal-100);
     --ntl-color-link-inverse: var(--ntl-blue-600);
     --ntl-color-logo-inactive: rgb(28.235% 36.471% 36.471%);
     --ntl-color-logo-spark: var(--ntl-teal-200);
     --ntl-color-logo-type: var(--ntl-neutral-000);
-    --ntl-color-stroke: rgb(100% 100% 100% / 0.09804);
+    /* One color per status: dots, icons, outlines. color.invalid.border follows it */
+    --ntl-color-status-error: var(--ntl-red-700);
+    /* One color per status: dots, icons, outlines. color.success.border follows it */
+    --ntl-color-status-success: var(--ntl-green-400);
+    /* One color per status: dots, icons, outlines. color.warning.border follows it */
+    --ntl-color-status-warning: var(--ntl-gold-400);
+    /* Older name for color.border */
+    --ntl-color-stroke: var(--ntl-color-border);
     --ntl-color-success-bg: var(--ntl-green-200);
-    --ntl-color-success-border: var(--ntl-green-400);
+    /* One color per status: dots, icons, outlines. color.success.border follows it */
+    --ntl-color-success-border: var(--ntl-color-status-success);
     --ntl-color-success-text: var(--ntl-green-900);
     --ntl-color-text: var(--ntl-teal-000);
     --ntl-color-text-accent: var(--ntl-teal-600);
-    --ntl-color-text-default: var(--ntl-teal-000);
+    /* Older name for color.text */
+    --ntl-color-text-default: var(--ntl-color-text);
+    /* Eyebrows above headings. Use instead of eyebrowTextColor */
+    --ntl-color-text-eyebrow: var(--ntl-teal-200);
+    /* Headings. Use instead of headingTextColor */
+    --ntl-color-text-heading: var(--ntl-neutral-100);
     --ntl-color-text-inverse: var(--ntl-teal-800);
+    --ntl-color-text-on-accent: var(--ntl-color-text-inverse);
     --ntl-color-text-weak: var(--ntl-neutral-300);
     --ntl-color-text-weaker: var(--ntl-neutral-400);
     --ntl-color-warning-bg: var(--ntl-gold-200);
-    --ntl-color-warning-border: var(--ntl-gold-400);
+    /* One color per status: dots, icons, outlines. color.warning.border follows it */
+    --ntl-color-warning-border: var(--ntl-color-status-warning);
     --ntl-color-warning-text: var(--ntl-gold-900);
-    --ntl-eyebrow-text-color: var(--ntl-teal-200);
+    /* Eyebrows above headings. Use instead of eyebrowTextColor */
+    --ntl-eyebrow-text-color: var(--ntl-color-text-eyebrow);
     --ntl-filter-invert: invert(1);
-    --ntl-heading-text-color: var(--ntl-neutral-100);
+    /* Headings. Use instead of headingTextColor */
+    --ntl-heading-text-color: var(--ntl-color-text-heading);
+    --ntl-neutral-000: var(--ntl-neutral-dark-000);
+    --ntl-neutral-100: var(--ntl-neutral-dark-100);
+    --ntl-neutral-200: var(--ntl-neutral-dark-200);
+    --ntl-neutral-300: var(--ntl-neutral-dark-300);
+    --ntl-neutral-400: var(--ntl-neutral-dark-400);
+    --ntl-neutral-500: var(--ntl-neutral-dark-500);
+    --ntl-neutral-600: var(--ntl-neutral-dark-600);
+    --ntl-neutral-700: var(--ntl-neutral-dark-700);
+    --ntl-neutral-800: var(--ntl-neutral-dark-800);
+    --ntl-neutral-900: var(--ntl-neutral-dark-900);
+    --ntl-search-answer-message-color: var(--ntl-neutral-600);
+    --ntl-search-back-btn-bg-color: var(--ntl-neutral-500);
+    --ntl-search-bg-color: var(--ntl-neutral-700);
+    --ntl-search-highlight-color: var(--ntl-teal-800);
+    --ntl-search-icon-color: var(--ntl-neutral-300);
+    --ntl-search-input-bg-color: var(--ntl-neutral-600);
+    --ntl-search-loading-color: var(--ntl-teal-200);
+    --ntl-search-source-list-color: var(--ntl-neutral-700);
+    --ntl-search-submit-btn-bg-color: var(--ntl-teal-200);
+    --ntl-search-user-message-color: var(--ntl-teal-800);
+    --ntl-tabbed-content-bg-color: rgb(4.7059% 16.471% 16.471% / 0.2);
+    --ntl-tabbed-content-bg-color-active: var(--ntl-teal-900);
+    --ntl-tabbed-content-border-color: var(--ntl-color-icon);
+    --ntl-tabbed-content-code-bg-color: var(--ntl-neutral-900);
+    --ntl-tabbed-content-tab-text-color-active: var(--ntl-color-icon);
+    --ntl-testimonial-logo-hover-color: var(--ntl-neutral-300);
+    --ntl-testimonial-logo-inactive-color: var(--ntl-neutral-400);
+    --ntl-title-text-color: rgb(83.529% 100% 99.608% / 0.74902);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-brand="hues"] {
+    --ntl-active-switcher-tab-bg-color: rgb(4.7059% 16.471% 16.471%);
+    --ntl-badge-bg-color: var(--ntl-hues-warm-gray-900);
+    --ntl-badge-border-color: var(--ntl-hues-warm-gray-800);
+    --ntl-badge-text-color: var(--ntl-hues-warm-gray-300);
+    --ntl-blockquote-accent-color: var(--ntl-teal-200);
+    --ntl-button-outline-bg-color: rgb(0% 0% 0% / 0);
+    --ntl-button-outline-bg-color-hover: var(--ntl-hues-warm-gray-900);
+    --ntl-button-outline-stroke-color: var(--ntl-hues-warm-gray-50);
+    --ntl-button-outline-text-color: var(--ntl-hues-warm-gray-50);
+    --ntl-button-primary-bg-color: var(--ntl-hues-sky-500);
+    --ntl-button-primary-bg-color-hover: var(--ntl-hues-sky-tint-300);
+    --ntl-button-primary-text-color: var(--ntl-hues-off-black);
+    --ntl-button-secondary-bg-color: var(--ntl-hues-warm-gray-50);
+    --ntl-button-secondary-bg-color-hover: var(--ntl-hues-warm-gray-200);
+    --ntl-button-secondary-text-color: var(--ntl-hues-off-black);
+    /* Tertiary button: white, for low-emphasis actions */
+    --ntl-button-tertiary-bg-color: var(--ntl-hues-warm-gray-900);
+    /* Tertiary button label */
+    --ntl-button-tertiary-text-color: var(--ntl-hues-warm-gray-50);
+    --ntl-card-bg-color: var(--ntl-hues-warm-gray-900);
+    --ntl-card-border-color: var(--ntl-hues-warm-gray-800);
+    --ntl-card-border-color-hover: var(--ntl-hues-warm-gray-700);
+    --ntl-code-bg-color: var(--ntl-teal-900);
+    /* Older name for color.bg.page */
+    --ntl-color-bg: var(--ntl-color-bg-page);
+    /* Older name for color.bg.subtle */
+    --ntl-color-bg-2: var(--ntl-color-bg-subtle);
+    /* Older name for color.bg.muted */
+    --ntl-color-bg-3: var(--ntl-color-bg-muted);
+    /* Frosted surfaces; pair with backdrop-filter: blur(). Not the same as color.bgTranslucent */
+    --ntl-color-bg-glass: var(--ntl-hues-alpha-warm-gray-80);
+    /* Lighter frosted layer; pair with backdrop-filter: blur() */
+    --ntl-color-bg-glass-subtle: var(--ntl-hues-alpha-warm-gray-60);
+    --ntl-color-bg-inverse: var(--ntl-hues-warm-gray-50);
+    /* A third fill, one step deeper than subtle: wells inside subtle areas. Use instead of color.bg.3 */
+    --ntl-color-bg-muted: var(--ntl-hues-warm-gray-800);
+    /* Page background. Use instead of color.bg */
+    --ntl-color-bg-page: var(--ntl-hues-warm-gray-950);
+    /* Recessed areas: table stripes, code wells, sidebars. Use instead of color.bg.2 */
+    --ntl-color-bg-subtle: var(--ntl-hues-off-black);
+    /* Raised surfaces on the page: cards, menus, dialogs */
+    --ntl-color-bg-surface: var(--ntl-hues-warm-gray-900);
+    --ntl-color-bg-translucent: rgb(7.0588% 9.4118% 12.157% / 0.94902);
+    /* Default borders and dividers */
+    --ntl-color-border: var(--ntl-hues-warm-gray-800);
+    /* Older name for color.border */
+    --ntl-color-border-default: var(--ntl-color-border);
+    --ntl-color-border-strong: var(--ntl-hues-warm-gray-50);
+    --ntl-color-border-subtle: var(--ntl-hues-warm-gray-900);
+    --ntl-color-brand-primary: var(--ntl-hues-sky-500);
+    --ntl-color-brand-primary-hover: var(--ntl-hues-sky-tint-300);
+    --ntl-color-brand-secondary: var(--ntl-hues-warm-gray-50);
+    --ntl-color-brand-secondary-hover: var(--ntl-hues-warm-gray-200);
+    --ntl-color-disabled-bg: var(--ntl-neutral-600);
+    --ntl-color-disabled-border: var(--ntl-neutral-400);
+    --ntl-color-disabled-text: var(--ntl-neutral-400);
+    --ntl-color-highlight-bg: var(--ntl-purple-200);
+    --ntl-color-highlight-border: var(--ntl-purple-700);
+    --ntl-color-highlight-text: var(--ntl-purple-700);
+    --ntl-color-icon: var(--ntl-hues-warm-gray-50);
+    --ntl-color-info-bg: var(--ntl-blue-200);
+    --ntl-color-info-border: var(--ntl-blue-700);
+    --ntl-color-info-text: var(--ntl-hues-cobalt-600);
+    --ntl-color-invalid-bg: var(--ntl-red-200);
+    --ntl-color-invalid-border: var(--ntl-color-status-error);
+    --ntl-color-invalid-text: var(--ntl-hues-red-700);
+    --ntl-color-link: var(--ntl-hues-warm-gray-50);
+    /* Older name for color.link */
+    --ntl-color-link-default: var(--ntl-color-link);
+    --ntl-color-link-hover: var(--ntl-hues-warm-gray-300);
+    --ntl-color-link-inverse: var(--ntl-blue-600);
+    --ntl-color-logo-inactive: var(--ntl-hues-warm-gray-600);
+    --ntl-color-logo-spark: var(--ntl-hues-warm-gray-50);
+    --ntl-color-logo-type: var(--ntl-hues-warm-gray-50);
+    /* One color per status: dots, icons, outlines. color.invalid.border follows it */
+    --ntl-color-status-error: var(--ntl-red-700);
+    /* One color per status: dots, icons, outlines. color.success.border follows it */
+    --ntl-color-status-success: var(--ntl-green-400);
+    /* One color per status: dots, icons, outlines. color.warning.border follows it */
+    --ntl-color-status-warning: var(--ntl-gold-400);
+    /* Older name for color.border */
+    --ntl-color-stroke: var(--ntl-color-border);
+    --ntl-color-success-bg: var(--ntl-green-200);
+    /* One color per status: dots, icons, outlines. color.success.border follows it */
+    --ntl-color-success-border: var(--ntl-color-status-success);
+    --ntl-color-success-text: var(--ntl-green-900);
+    --ntl-color-text: var(--ntl-hues-warm-gray-50);
+    --ntl-color-text-accent: var(--ntl-teal-600);
+    /* Older name for color.text */
+    --ntl-color-text-default: var(--ntl-color-text);
+    /* Eyebrows above headings. Use instead of eyebrowTextColor */
+    --ntl-color-text-eyebrow: var(--ntl-hues-warm-gray-300);
+    /* Headings. Use instead of headingTextColor */
+    --ntl-color-text-heading: var(--ntl-hues-warm-gray-50);
+    --ntl-color-text-inverse: var(--ntl-hues-off-black);
+    --ntl-color-text-on-accent: var(--ntl-hues-off-black);
+    --ntl-color-text-weak: var(--ntl-hues-warm-gray-300);
+    --ntl-color-text-weaker: var(--ntl-hues-warm-gray-500);
+    --ntl-color-warning-bg: var(--ntl-gold-200);
+    /* One color per status: dots, icons, outlines. color.warning.border follows it */
+    --ntl-color-warning-border: var(--ntl-color-status-warning);
+    --ntl-color-warning-text: var(--ntl-gold-900);
+    /* Eyebrows above headings. Use instead of eyebrowTextColor */
+    --ntl-eyebrow-text-color: var(--ntl-color-text-eyebrow);
+    --ntl-filter-invert: invert(1);
+    /* Headings. Use instead of headingTextColor */
+    --ntl-heading-text-color: var(--ntl-color-text-heading);
     --ntl-neutral-000: var(--ntl-neutral-dark-000);
     --ntl-neutral-100: var(--ntl-neutral-dark-100);
     --ntl-neutral-200: var(--ntl-neutral-dark-200);
@@ -720,16 +1119,34 @@
   --ntl-button-secondary-bg-color: rgb(100% 100% 100% / 0.09804);
   --ntl-button-secondary-bg-color-hover: rgb(65.49% 100% 99.216% / 0.14902);
   --ntl-button-secondary-text-color: var(--ntl-teal-200);
+  /* Tertiary button: white, for low-emphasis actions */
+  --ntl-button-tertiary-bg-color: var(--ntl-neutral-000);
+  /* Tertiary button label */
+  --ntl-button-tertiary-text-color: var(--ntl-neutral-800);
   --ntl-card-bg-color: var(--ntl-teal-900);
   --ntl-card-border-color: var(--ntl-teal-900);
   --ntl-card-border-color-hover: var(--ntl-teal-800);
   --ntl-code-bg-color: var(--ntl-teal-900);
-  --ntl-color-bg: var(--ntl-neutral-800);
-  --ntl-color-bg-2: var(--ntl-neutral-700);
-  --ntl-color-bg-3: var(--ntl-neutral-600);
+  /* Older name for color.bg.page */
+  --ntl-color-bg: var(--ntl-color-bg-page);
+  /* Older name for color.bg.subtle */
+  --ntl-color-bg-2: var(--ntl-color-bg-subtle);
+  /* Older name for color.bg.muted */
+  --ntl-color-bg-3: var(--ntl-color-bg-muted);
   --ntl-color-bg-inverse: var(--ntl-neutral-000);
+  /* A third fill, one step deeper than subtle: wells inside subtle areas. Use instead of color.bg.3 */
+  --ntl-color-bg-muted: var(--ntl-neutral-600);
+  /* Page background. Use instead of color.bg */
+  --ntl-color-bg-page: var(--ntl-neutral-800);
+  /* Recessed areas: table stripes, code wells, sidebars. Use instead of color.bg.2 */
+  --ntl-color-bg-subtle: var(--ntl-neutral-700);
+  /* Raised surfaces on the page: cards, menus, dialogs */
+  --ntl-color-bg-surface: var(--ntl-neutral-700);
   --ntl-color-bg-translucent: rgb(7.0588% 9.4118% 12.157% / 0.94902);
-  --ntl-color-border-default: rgb(100% 100% 100% / 0.09804);
+  /* Default borders and dividers */
+  --ntl-color-border: rgb(100% 100% 100% / 0.09804);
+  /* Older name for color.border */
+  --ntl-color-border-default: var(--ntl-color-border);
   --ntl-color-border-strong: var(--ntl-neutral-500);
   --ntl-color-border-subtle: rgb(100% 100% 100% / 0.03922);
   --ntl-color-brand-primary: var(--ntl-teal-300);
@@ -747,31 +1164,49 @@
   --ntl-color-info-border: var(--ntl-blue-700);
   --ntl-color-info-text: var(--ntl-blue-700);
   --ntl-color-invalid-bg: var(--ntl-red-200);
-  --ntl-color-invalid-border: var(--ntl-red-700);
+  --ntl-color-invalid-border: var(--ntl-color-status-error);
   --ntl-color-invalid-text: var(--ntl-red-700);
   --ntl-color-link: var(--ntl-teal-200);
-  --ntl-color-link-default: var(--ntl-teal-200);
+  /* Older name for color.link */
+  --ntl-color-link-default: var(--ntl-color-link);
   --ntl-color-link-hover: var(--ntl-teal-100);
   --ntl-color-link-inverse: var(--ntl-blue-600);
   --ntl-color-logo-inactive: rgb(28.235% 36.471% 36.471%);
   --ntl-color-logo-spark: var(--ntl-teal-200);
   --ntl-color-logo-type: var(--ntl-neutral-000);
-  --ntl-color-stroke: rgb(100% 100% 100% / 0.09804);
+  /* One color per status: dots, icons, outlines. color.invalid.border follows it */
+  --ntl-color-status-error: var(--ntl-red-700);
+  /* One color per status: dots, icons, outlines. color.success.border follows it */
+  --ntl-color-status-success: var(--ntl-green-400);
+  /* One color per status: dots, icons, outlines. color.warning.border follows it */
+  --ntl-color-status-warning: var(--ntl-gold-400);
+  /* Older name for color.border */
+  --ntl-color-stroke: var(--ntl-color-border);
   --ntl-color-success-bg: var(--ntl-green-200);
-  --ntl-color-success-border: var(--ntl-green-400);
+  /* One color per status: dots, icons, outlines. color.success.border follows it */
+  --ntl-color-success-border: var(--ntl-color-status-success);
   --ntl-color-success-text: var(--ntl-green-900);
   --ntl-color-text: var(--ntl-teal-000);
   --ntl-color-text-accent: var(--ntl-teal-600);
-  --ntl-color-text-default: var(--ntl-teal-000);
+  /* Older name for color.text */
+  --ntl-color-text-default: var(--ntl-color-text);
+  /* Eyebrows above headings. Use instead of eyebrowTextColor */
+  --ntl-color-text-eyebrow: var(--ntl-teal-200);
+  /* Headings. Use instead of headingTextColor */
+  --ntl-color-text-heading: var(--ntl-neutral-100);
   --ntl-color-text-inverse: var(--ntl-teal-800);
+  --ntl-color-text-on-accent: var(--ntl-color-text-inverse);
   --ntl-color-text-weak: var(--ntl-neutral-300);
   --ntl-color-text-weaker: var(--ntl-neutral-400);
   --ntl-color-warning-bg: var(--ntl-gold-200);
-  --ntl-color-warning-border: var(--ntl-gold-400);
+  /* One color per status: dots, icons, outlines. color.warning.border follows it */
+  --ntl-color-warning-border: var(--ntl-color-status-warning);
   --ntl-color-warning-text: var(--ntl-gold-900);
-  --ntl-eyebrow-text-color: var(--ntl-teal-200);
+  /* Eyebrows above headings. Use instead of eyebrowTextColor */
+  --ntl-eyebrow-text-color: var(--ntl-color-text-eyebrow);
   --ntl-filter-invert: invert(1);
-  --ntl-heading-text-color: var(--ntl-neutral-100);
+  /* Headings. Use instead of headingTextColor */
+  --ntl-heading-text-color: var(--ntl-color-text-heading);
   --ntl-neutral-000: var(--ntl-neutral-dark-000);
   --ntl-neutral-100: var(--ntl-neutral-dark-100);
   --ntl-neutral-200: var(--ntl-neutral-dark-200);
@@ -818,16 +1253,34 @@
   --ntl-button-secondary-bg-color: rgb(4.7059% 16.471% 16.471% / 0.09804);
   --ntl-button-secondary-bg-color-hover: rgb(4.7059% 16.471% 16.471% / 0.14902);
   --ntl-button-secondary-text-color: var(--ntl-neutral-800);
+  /* Tertiary button: white, for low-emphasis actions */
+  --ntl-button-tertiary-bg-color: var(--ntl-neutral-000);
+  /* Tertiary button label */
+  --ntl-button-tertiary-text-color: var(--ntl-neutral-800);
   --ntl-card-bg-color: var(--ntl-neutral-000);
   --ntl-card-border-color: var(--ntl-neutral-200);
   --ntl-card-border-color-hover: var(--ntl-neutral-300);
   --ntl-code-bg-color: var(--ntl-teal-900);
-  --ntl-color-bg: var(--ntl-neutral-000);
-  --ntl-color-bg-2: var(--ntl-neutral-100);
-  --ntl-color-bg-3: var(--ntl-neutral-200);
+  /* Older name for color.bg.page */
+  --ntl-color-bg: var(--ntl-color-bg-page);
+  /* Older name for color.bg.subtle */
+  --ntl-color-bg-2: var(--ntl-color-bg-subtle);
+  /* Older name for color.bg.muted */
+  --ntl-color-bg-3: var(--ntl-color-bg-muted);
   --ntl-color-bg-inverse: var(--ntl-neutral-300);
+  /* A third fill, one step deeper than subtle: wells inside subtle areas. Use instead of color.bg.3 */
+  --ntl-color-bg-muted: var(--ntl-neutral-200);
+  /* Page background. Use instead of color.bg */
+  --ntl-color-bg-page: var(--ntl-neutral-000);
+  /* Recessed areas: table stripes, code wells, sidebars. Use instead of color.bg.2 */
+  --ntl-color-bg-subtle: var(--ntl-neutral-100);
+  /* Raised surfaces on the page: cards, menus, dialogs */
+  --ntl-color-bg-surface: var(--ntl-neutral-000);
   --ntl-color-bg-translucent: rgb(100% 100% 100% / 0.90196);
-  --ntl-color-border-default: rgb(0% 0% 0% / 0.14902);
+  /* Default borders and dividers */
+  --ntl-color-border: rgb(0% 0% 0% / 0.14902);
+  /* Older name for color.border */
+  --ntl-color-border-default: var(--ntl-color-border);
   --ntl-color-border-strong: var(--ntl-neutral-300);
   --ntl-color-border-subtle: rgb(0% 0% 0% / 0.06275);
   --ntl-color-brand-primary: var(--ntl-blue-700);
@@ -845,31 +1298,49 @@
   --ntl-color-info-border: var(--ntl-blue-600);
   --ntl-color-info-text: var(--ntl-blue-600);
   --ntl-color-invalid-bg: var(--ntl-red-100);
-  --ntl-color-invalid-border: var(--ntl-red-600);
+  --ntl-color-invalid-border: var(--ntl-color-status-error);
   --ntl-color-invalid-text: var(--ntl-red-600);
   --ntl-color-link: var(--ntl-blue-700);
-  --ntl-color-link-default: var(--ntl-blue-700);
+  /* Older name for color.link */
+  --ntl-color-link-default: var(--ntl-color-link);
   --ntl-color-link-hover: var(--ntl-blue-800);
   --ntl-color-link-inverse: var(--ntl-blue-400);
   --ntl-color-logo-inactive: rgb(70.196% 70.196% 70.196%);
   --ntl-color-logo-spark: var(--ntl-teal-400);
   --ntl-color-logo-type: var(--ntl-teal-800);
-  --ntl-color-stroke: rgb(0% 0% 0% / 0.14902);
+  /* One color per status: dots, icons, outlines. color.invalid.border follows it */
+  --ntl-color-status-error: var(--ntl-red-600);
+  /* One color per status: dots, icons, outlines. color.success.border follows it */
+  --ntl-color-status-success: var(--ntl-green-300);
+  /* One color per status: dots, icons, outlines. color.warning.border follows it */
+  --ntl-color-status-warning: var(--ntl-gold-300);
+  /* Older name for color.border */
+  --ntl-color-stroke: var(--ntl-color-border);
   --ntl-color-success-bg: var(--ntl-green-100);
-  --ntl-color-success-border: var(--ntl-green-300);
+  /* One color per status: dots, icons, outlines. color.success.border follows it */
+  --ntl-color-success-border: var(--ntl-color-status-success);
   --ntl-color-success-text: var(--ntl-green-800);
   --ntl-color-text: var(--ntl-neutral-700);
   --ntl-color-text-accent: var(--ntl-teal-300);
-  --ntl-color-text-default: var(--ntl-neutral-700);
+  /* Older name for color.text */
+  --ntl-color-text-default: var(--ntl-color-text);
+  /* Eyebrows above headings. Use instead of eyebrowTextColor */
+  --ntl-color-text-eyebrow: var(--ntl-blue-700);
+  /* Headings. Use instead of headingTextColor */
+  --ntl-color-text-heading: var(--ntl-neutral-800);
   --ntl-color-text-inverse: var(--ntl-neutral-100);
+  --ntl-color-text-on-accent: var(--ntl-color-text-inverse);
   --ntl-color-text-weak: var(--ntl-neutral-500);
   --ntl-color-text-weaker: var(--ntl-neutral-400);
   --ntl-color-warning-bg: var(--ntl-gold-100);
-  --ntl-color-warning-border: var(--ntl-gold-300);
+  /* One color per status: dots, icons, outlines. color.warning.border follows it */
+  --ntl-color-warning-border: var(--ntl-color-status-warning);
   --ntl-color-warning-text: var(--ntl-gold-800);
-  --ntl-eyebrow-text-color: var(--ntl-blue-700);
+  /* Eyebrows above headings. Use instead of eyebrowTextColor */
+  --ntl-eyebrow-text-color: var(--ntl-color-text-eyebrow);
   --ntl-filter-invert: none;
-  --ntl-heading-text-color: var(--ntl-neutral-800);
+  /* Headings. Use instead of headingTextColor */
+  --ntl-heading-text-color: var(--ntl-color-text-heading);
   --ntl-neutral-000: var(--ntl-neutral-light-000);
   --ntl-neutral-100: var(--ntl-neutral-light-100);
   --ntl-neutral-200: var(--ntl-neutral-light-200);
@@ -902,72 +1373,112 @@
 
 [data-brand="hues"][data-theme="dark"], [data-brand="hues"] [data-theme="dark"], [data-theme="dark"] [data-brand="hues"] {
   --ntl-active-switcher-tab-bg-color: rgb(4.7059% 16.471% 16.471%);
-  --ntl-badge-bg-color: var(--ntl-neutral-700);
-  --ntl-badge-border-color: var(--ntl-neutral-600);
-  --ntl-badge-text-color: var(--ntl-neutral-100);
+  --ntl-badge-bg-color: var(--ntl-hues-warm-gray-900);
+  --ntl-badge-border-color: var(--ntl-hues-warm-gray-800);
+  --ntl-badge-text-color: var(--ntl-hues-warm-gray-300);
   --ntl-blockquote-accent-color: var(--ntl-teal-200);
   --ntl-button-outline-bg-color: rgb(0% 0% 0% / 0);
-  --ntl-button-outline-bg-color-hover: var(--ntl-neutral-500);
-  --ntl-button-outline-stroke-color: var(--ntl-teal-200);
-  --ntl-button-outline-text-color: var(--ntl-teal-200);
-  --ntl-button-primary-bg-color: var(--ntl-teal-200);
-  --ntl-button-primary-bg-color-hover: var(--ntl-teal-100);
-  --ntl-button-primary-text-color: var(--ntl-neutral-800);
-  --ntl-button-secondary-bg-color: rgb(100% 100% 100% / 0.09804);
-  --ntl-button-secondary-bg-color-hover: rgb(65.49% 100% 99.216% / 0.14902);
-  --ntl-button-secondary-text-color: var(--ntl-teal-200);
-  --ntl-card-bg-color: var(--ntl-teal-900);
-  --ntl-card-border-color: var(--ntl-teal-900);
-  --ntl-card-border-color-hover: var(--ntl-teal-800);
+  --ntl-button-outline-bg-color-hover: var(--ntl-hues-warm-gray-900);
+  --ntl-button-outline-stroke-color: var(--ntl-hues-warm-gray-50);
+  --ntl-button-outline-text-color: var(--ntl-hues-warm-gray-50);
+  --ntl-button-primary-bg-color: var(--ntl-hues-sky-500);
+  --ntl-button-primary-bg-color-hover: var(--ntl-hues-sky-tint-300);
+  --ntl-button-primary-text-color: var(--ntl-hues-off-black);
+  --ntl-button-secondary-bg-color: var(--ntl-hues-warm-gray-50);
+  --ntl-button-secondary-bg-color-hover: var(--ntl-hues-warm-gray-200);
+  --ntl-button-secondary-text-color: var(--ntl-hues-off-black);
+  /* Tertiary button: white, for low-emphasis actions */
+  --ntl-button-tertiary-bg-color: var(--ntl-hues-warm-gray-900);
+  /* Tertiary button label */
+  --ntl-button-tertiary-text-color: var(--ntl-hues-warm-gray-50);
+  --ntl-card-bg-color: var(--ntl-hues-warm-gray-900);
+  --ntl-card-border-color: var(--ntl-hues-warm-gray-800);
+  --ntl-card-border-color-hover: var(--ntl-hues-warm-gray-700);
   --ntl-code-bg-color: var(--ntl-teal-900);
-  --ntl-color-bg: var(--ntl-neutral-800);
-  --ntl-color-bg-2: var(--ntl-neutral-700);
-  --ntl-color-bg-3: var(--ntl-neutral-600);
-  --ntl-color-bg-inverse: var(--ntl-neutral-000);
+  /* Older name for color.bg.page */
+  --ntl-color-bg: var(--ntl-color-bg-page);
+  /* Older name for color.bg.subtle */
+  --ntl-color-bg-2: var(--ntl-color-bg-subtle);
+  /* Older name for color.bg.muted */
+  --ntl-color-bg-3: var(--ntl-color-bg-muted);
+  /* Frosted surfaces; pair with backdrop-filter: blur(). Not the same as color.bgTranslucent */
+  --ntl-color-bg-glass: var(--ntl-hues-alpha-warm-gray-80);
+  /* Lighter frosted layer; pair with backdrop-filter: blur() */
+  --ntl-color-bg-glass-subtle: var(--ntl-hues-alpha-warm-gray-60);
+  --ntl-color-bg-inverse: var(--ntl-hues-warm-gray-50);
+  /* A third fill, one step deeper than subtle: wells inside subtle areas. Use instead of color.bg.3 */
+  --ntl-color-bg-muted: var(--ntl-hues-warm-gray-800);
+  /* Page background. Use instead of color.bg */
+  --ntl-color-bg-page: var(--ntl-hues-warm-gray-950);
+  /* Recessed areas: table stripes, code wells, sidebars. Use instead of color.bg.2 */
+  --ntl-color-bg-subtle: var(--ntl-hues-off-black);
+  /* Raised surfaces on the page: cards, menus, dialogs */
+  --ntl-color-bg-surface: var(--ntl-hues-warm-gray-900);
   --ntl-color-bg-translucent: rgb(7.0588% 9.4118% 12.157% / 0.94902);
-  --ntl-color-border-default: rgb(100% 100% 100% / 0.09804);
-  --ntl-color-border-strong: var(--ntl-neutral-500);
-  --ntl-color-border-subtle: rgb(100% 100% 100% / 0.03922);
-  --ntl-color-brand-primary: var(--ntl-teal-300);
-  --ntl-color-brand-primary-hover: var(--ntl-teal-800);
-  --ntl-color-brand-secondary: var(--ntl-blue-700);
-  --ntl-color-brand-secondary-hover: var(--ntl-blue-800);
+  /* Default borders and dividers */
+  --ntl-color-border: var(--ntl-hues-warm-gray-800);
+  /* Older name for color.border */
+  --ntl-color-border-default: var(--ntl-color-border);
+  --ntl-color-border-strong: var(--ntl-hues-warm-gray-50);
+  --ntl-color-border-subtle: var(--ntl-hues-warm-gray-900);
+  --ntl-color-brand-primary: var(--ntl-hues-sky-500);
+  --ntl-color-brand-primary-hover: var(--ntl-hues-sky-tint-300);
+  --ntl-color-brand-secondary: var(--ntl-hues-warm-gray-50);
+  --ntl-color-brand-secondary-hover: var(--ntl-hues-warm-gray-200);
   --ntl-color-disabled-bg: var(--ntl-neutral-600);
   --ntl-color-disabled-border: var(--ntl-neutral-400);
   --ntl-color-disabled-text: var(--ntl-neutral-400);
   --ntl-color-highlight-bg: var(--ntl-purple-200);
   --ntl-color-highlight-border: var(--ntl-purple-700);
   --ntl-color-highlight-text: var(--ntl-purple-700);
-  --ntl-color-icon: var(--ntl-teal-200);
+  --ntl-color-icon: var(--ntl-hues-warm-gray-50);
   --ntl-color-info-bg: var(--ntl-blue-200);
   --ntl-color-info-border: var(--ntl-blue-700);
-  --ntl-color-info-text: var(--ntl-blue-700);
+  --ntl-color-info-text: var(--ntl-hues-cobalt-600);
   --ntl-color-invalid-bg: var(--ntl-red-200);
-  --ntl-color-invalid-border: var(--ntl-red-700);
-  --ntl-color-invalid-text: var(--ntl-red-700);
-  --ntl-color-link: var(--ntl-teal-200);
-  --ntl-color-link-default: var(--ntl-teal-200);
-  --ntl-color-link-hover: var(--ntl-teal-100);
+  --ntl-color-invalid-border: var(--ntl-color-status-error);
+  --ntl-color-invalid-text: var(--ntl-hues-red-700);
+  --ntl-color-link: var(--ntl-hues-warm-gray-50);
+  /* Older name for color.link */
+  --ntl-color-link-default: var(--ntl-color-link);
+  --ntl-color-link-hover: var(--ntl-hues-warm-gray-300);
   --ntl-color-link-inverse: var(--ntl-blue-600);
-  --ntl-color-logo-inactive: rgb(28.235% 36.471% 36.471%);
-  --ntl-color-logo-spark: var(--ntl-teal-200);
-  --ntl-color-logo-type: var(--ntl-neutral-000);
-  --ntl-color-stroke: rgb(100% 100% 100% / 0.09804);
+  --ntl-color-logo-inactive: var(--ntl-hues-warm-gray-600);
+  --ntl-color-logo-spark: var(--ntl-hues-warm-gray-50);
+  --ntl-color-logo-type: var(--ntl-hues-warm-gray-50);
+  /* One color per status: dots, icons, outlines. color.invalid.border follows it */
+  --ntl-color-status-error: var(--ntl-red-700);
+  /* One color per status: dots, icons, outlines. color.success.border follows it */
+  --ntl-color-status-success: var(--ntl-green-400);
+  /* One color per status: dots, icons, outlines. color.warning.border follows it */
+  --ntl-color-status-warning: var(--ntl-gold-400);
+  /* Older name for color.border */
+  --ntl-color-stroke: var(--ntl-color-border);
   --ntl-color-success-bg: var(--ntl-green-200);
-  --ntl-color-success-border: var(--ntl-green-400);
+  /* One color per status: dots, icons, outlines. color.success.border follows it */
+  --ntl-color-success-border: var(--ntl-color-status-success);
   --ntl-color-success-text: var(--ntl-green-900);
-  --ntl-color-text: var(--ntl-teal-000);
+  --ntl-color-text: var(--ntl-hues-warm-gray-50);
   --ntl-color-text-accent: var(--ntl-teal-600);
-  --ntl-color-text-default: var(--ntl-teal-000);
-  --ntl-color-text-inverse: var(--ntl-teal-800);
-  --ntl-color-text-weak: var(--ntl-neutral-300);
-  --ntl-color-text-weaker: var(--ntl-neutral-400);
+  /* Older name for color.text */
+  --ntl-color-text-default: var(--ntl-color-text);
+  /* Eyebrows above headings. Use instead of eyebrowTextColor */
+  --ntl-color-text-eyebrow: var(--ntl-hues-warm-gray-300);
+  /* Headings. Use instead of headingTextColor */
+  --ntl-color-text-heading: var(--ntl-hues-warm-gray-50);
+  --ntl-color-text-inverse: var(--ntl-hues-off-black);
+  --ntl-color-text-on-accent: var(--ntl-hues-off-black);
+  --ntl-color-text-weak: var(--ntl-hues-warm-gray-300);
+  --ntl-color-text-weaker: var(--ntl-hues-warm-gray-500);
   --ntl-color-warning-bg: var(--ntl-gold-200);
-  --ntl-color-warning-border: var(--ntl-gold-400);
+  /* One color per status: dots, icons, outlines. color.warning.border follows it */
+  --ntl-color-warning-border: var(--ntl-color-status-warning);
   --ntl-color-warning-text: var(--ntl-gold-900);
-  --ntl-eyebrow-text-color: var(--ntl-teal-200);
+  /* Eyebrows above headings. Use instead of eyebrowTextColor */
+  --ntl-eyebrow-text-color: var(--ntl-color-text-eyebrow);
   --ntl-filter-invert: invert(1);
-  --ntl-heading-text-color: var(--ntl-neutral-100);
+  /* Headings. Use instead of headingTextColor */
+  --ntl-heading-text-color: var(--ntl-color-text-heading);
   --ntl-neutral-000: var(--ntl-neutral-dark-000);
   --ntl-neutral-100: var(--ntl-neutral-dark-100);
   --ntl-neutral-200: var(--ntl-neutral-dark-200);
@@ -1000,72 +1511,112 @@
 
 [data-brand="hues"][data-theme="light"], [data-brand="hues"] [data-theme="light"], [data-theme="light"] [data-brand="hues"] {
   --ntl-active-switcher-tab-bg-color: rgb(4.7059% 16.471% 16.471% / 0.04706);
-  --ntl-badge-bg-color: var(--ntl-neutral-100);
-  --ntl-badge-border-color: var(--ntl-neutral-300);
-  --ntl-badge-text-color: var(--ntl-neutral-500);
+  --ntl-badge-bg-color: var(--ntl-hues-warm-gray-100);
+  --ntl-badge-border-color: var(--ntl-hues-warm-gray-200);
+  --ntl-badge-text-color: var(--ntl-hues-warm-gray-700);
   --ntl-blockquote-accent-color: var(--ntl-blue-700);
   --ntl-button-outline-bg-color: rgb(0% 0% 0% / 0);
-  --ntl-button-outline-bg-color-hover: rgb(83.922% 98.039% 97.647%);
-  --ntl-button-outline-stroke-color: var(--ntl-neutral-800);
-  --ntl-button-outline-text-color: var(--ntl-neutral-800);
-  --ntl-button-primary-bg-color: var(--ntl-teal-200);
-  --ntl-button-primary-bg-color-hover: var(--ntl-teal-100);
-  --ntl-button-primary-text-color: var(--ntl-neutral-800);
-  --ntl-button-secondary-bg-color: rgb(4.7059% 16.471% 16.471% / 0.09804);
-  --ntl-button-secondary-bg-color-hover: rgb(4.7059% 16.471% 16.471% / 0.14902);
-  --ntl-button-secondary-text-color: var(--ntl-neutral-800);
-  --ntl-card-bg-color: var(--ntl-neutral-000);
-  --ntl-card-border-color: var(--ntl-neutral-200);
-  --ntl-card-border-color-hover: var(--ntl-neutral-300);
+  --ntl-button-outline-bg-color-hover: var(--ntl-hues-warm-gray-100);
+  --ntl-button-outline-stroke-color: var(--ntl-hues-off-black);
+  --ntl-button-outline-text-color: var(--ntl-hues-off-black);
+  --ntl-button-primary-bg-color: var(--ntl-hues-sky-500);
+  --ntl-button-primary-bg-color-hover: var(--ntl-hues-sky-tint-300);
+  --ntl-button-primary-text-color: var(--ntl-hues-off-black);
+  --ntl-button-secondary-bg-color: var(--ntl-hues-off-black);
+  --ntl-button-secondary-bg-color-hover: var(--ntl-hues-warm-gray-800);
+  --ntl-button-secondary-text-color: var(--ntl-hues-white);
+  /* Tertiary button: white, for low-emphasis actions */
+  --ntl-button-tertiary-bg-color: var(--ntl-hues-white);
+  /* Tertiary button label */
+  --ntl-button-tertiary-text-color: var(--ntl-hues-off-black);
+  --ntl-card-bg-color: var(--ntl-hues-white);
+  --ntl-card-border-color: var(--ntl-hues-warm-gray-200);
+  --ntl-card-border-color-hover: var(--ntl-hues-warm-gray-300);
   --ntl-code-bg-color: var(--ntl-teal-900);
-  --ntl-color-bg: var(--ntl-neutral-000);
-  --ntl-color-bg-2: var(--ntl-neutral-100);
-  --ntl-color-bg-3: var(--ntl-neutral-200);
-  --ntl-color-bg-inverse: var(--ntl-neutral-300);
+  /* Older name for color.bg.page */
+  --ntl-color-bg: var(--ntl-color-bg-page);
+  /* Older name for color.bg.subtle */
+  --ntl-color-bg-2: var(--ntl-color-bg-subtle);
+  /* Older name for color.bg.muted */
+  --ntl-color-bg-3: var(--ntl-color-bg-muted);
+  /* Frosted surfaces; pair with backdrop-filter: blur(). Not the same as color.bgTranslucent */
+  --ntl-color-bg-glass: var(--ntl-hues-alpha-white-80);
+  /* Lighter frosted layer; pair with backdrop-filter: blur() */
+  --ntl-color-bg-glass-subtle: var(--ntl-hues-alpha-white-50);
+  --ntl-color-bg-inverse: var(--ntl-hues-off-black);
+  /* A third fill, one step deeper than subtle: wells inside subtle areas. Use instead of color.bg.3 */
+  --ntl-color-bg-muted: var(--ntl-hues-warm-gray-200);
+  /* Page background. Use instead of color.bg */
+  --ntl-color-bg-page: var(--ntl-hues-warm-gray-50);
+  /* Recessed areas: table stripes, code wells, sidebars. Use instead of color.bg.2 */
+  --ntl-color-bg-subtle: var(--ntl-hues-warm-gray-100);
+  /* Raised surfaces on the page: cards, menus, dialogs */
+  --ntl-color-bg-surface: var(--ntl-hues-white);
   --ntl-color-bg-translucent: rgb(100% 100% 100% / 0.90196);
-  --ntl-color-border-default: rgb(0% 0% 0% / 0.14902);
-  --ntl-color-border-strong: var(--ntl-neutral-300);
-  --ntl-color-border-subtle: rgb(0% 0% 0% / 0.06275);
-  --ntl-color-brand-primary: var(--ntl-blue-700);
-  --ntl-color-brand-primary-hover: var(--ntl-blue-800);
-  --ntl-color-brand-secondary: var(--ntl-teal-300);
-  --ntl-color-brand-secondary-hover: var(--ntl-teal-800);
+  /* Default borders and dividers */
+  --ntl-color-border: var(--ntl-hues-warm-gray-200);
+  /* Older name for color.border */
+  --ntl-color-border-default: var(--ntl-color-border);
+  --ntl-color-border-strong: var(--ntl-hues-off-black);
+  --ntl-color-border-subtle: var(--ntl-hues-warm-gray-100);
+  --ntl-color-brand-primary: var(--ntl-hues-sky-500);
+  --ntl-color-brand-primary-hover: var(--ntl-hues-sky-tint-300);
+  --ntl-color-brand-secondary: var(--ntl-hues-off-black);
+  --ntl-color-brand-secondary-hover: var(--ntl-hues-warm-gray-800);
   --ntl-color-disabled-bg: var(--ntl-neutral-200);
   --ntl-color-disabled-border: var(--ntl-neutral-400);
   --ntl-color-disabled-text: var(--ntl-neutral-400);
   --ntl-color-highlight-bg: var(--ntl-purple-100);
   --ntl-color-highlight-border: var(--ntl-purple-600);
   --ntl-color-highlight-text: var(--ntl-purple-600);
-  --ntl-color-icon: var(--ntl-blue-700);
+  --ntl-color-icon: var(--ntl-hues-off-black);
   --ntl-color-info-bg: var(--ntl-blue-100);
   --ntl-color-info-border: var(--ntl-blue-600);
   --ntl-color-info-text: var(--ntl-blue-600);
   --ntl-color-invalid-bg: var(--ntl-red-100);
-  --ntl-color-invalid-border: var(--ntl-red-600);
+  --ntl-color-invalid-border: var(--ntl-color-status-error);
   --ntl-color-invalid-text: var(--ntl-red-600);
-  --ntl-color-link: var(--ntl-blue-700);
-  --ntl-color-link-default: var(--ntl-blue-700);
-  --ntl-color-link-hover: var(--ntl-blue-800);
+  --ntl-color-link: var(--ntl-hues-off-black);
+  /* Older name for color.link */
+  --ntl-color-link-default: var(--ntl-color-link);
+  --ntl-color-link-hover: var(--ntl-hues-warm-gray-700);
   --ntl-color-link-inverse: var(--ntl-blue-400);
-  --ntl-color-logo-inactive: rgb(70.196% 70.196% 70.196%);
-  --ntl-color-logo-spark: var(--ntl-teal-400);
-  --ntl-color-logo-type: var(--ntl-teal-800);
-  --ntl-color-stroke: rgb(0% 0% 0% / 0.14902);
+  --ntl-color-logo-inactive: var(--ntl-hues-warm-gray-400);
+  --ntl-color-logo-spark: var(--ntl-hues-off-black);
+  --ntl-color-logo-type: var(--ntl-hues-off-black);
+  /* One color per status: dots, icons, outlines. color.invalid.border follows it */
+  --ntl-color-status-error: var(--ntl-hues-red-500);
+  /* One color per status: dots, icons, outlines. color.success.border follows it */
+  --ntl-color-status-success: var(--ntl-hues-green-500);
+  /* One color per status: dots, icons, outlines. color.warning.border follows it */
+  --ntl-color-status-warning: var(--ntl-hues-gold-500);
+  /* Older name for color.border */
+  --ntl-color-stroke: var(--ntl-color-border);
   --ntl-color-success-bg: var(--ntl-green-100);
-  --ntl-color-success-border: var(--ntl-green-300);
+  /* One color per status: dots, icons, outlines. color.success.border follows it */
+  --ntl-color-success-border: var(--ntl-color-status-success);
   --ntl-color-success-text: var(--ntl-green-800);
-  --ntl-color-text: var(--ntl-neutral-700);
+  --ntl-color-text: var(--ntl-hues-off-black);
   --ntl-color-text-accent: var(--ntl-teal-300);
-  --ntl-color-text-default: var(--ntl-neutral-700);
-  --ntl-color-text-inverse: var(--ntl-neutral-100);
-  --ntl-color-text-weak: var(--ntl-neutral-500);
-  --ntl-color-text-weaker: var(--ntl-neutral-400);
+  /* Older name for color.text */
+  --ntl-color-text-default: var(--ntl-color-text);
+  /* Eyebrows above headings. Use instead of eyebrowTextColor */
+  --ntl-color-text-eyebrow: var(--ntl-hues-warm-gray-700);
+  /* Headings. Use instead of headingTextColor */
+  --ntl-color-text-heading: var(--ntl-hues-off-black);
+  --ntl-color-text-inverse: var(--ntl-hues-white);
+  --ntl-color-text-on-accent: var(--ntl-hues-off-black);
+  --ntl-color-text-weak: var(--ntl-hues-warm-gray-700);
+  --ntl-color-text-weaker: var(--ntl-hues-warm-gray-600);
   --ntl-color-warning-bg: var(--ntl-gold-100);
-  --ntl-color-warning-border: var(--ntl-gold-300);
+  /* One color per status: dots, icons, outlines. color.warning.border follows it */
+  --ntl-color-warning-border: var(--ntl-color-status-warning);
   --ntl-color-warning-text: var(--ntl-gold-800);
-  --ntl-eyebrow-text-color: var(--ntl-blue-700);
+  /* Eyebrows above headings. Use instead of eyebrowTextColor */
+  --ntl-eyebrow-text-color: var(--ntl-color-text-eyebrow);
   --ntl-filter-invert: none;
-  --ntl-heading-text-color: var(--ntl-neutral-800);
+  /* Headings. Use instead of headingTextColor */
+  --ntl-heading-text-color: var(--ntl-color-text-heading);
   --ntl-neutral-000: var(--ntl-neutral-light-000);
   --ntl-neutral-100: var(--ntl-neutral-light-100);
   --ntl-neutral-200: var(--ntl-neutral-light-200);