@titan-design/react-ui 0.5.0 → 0.6.0

package/src/theme/tokens/primitives.ts

@@ -62,6 +62,34 @@ export const primitiveColors = {
     900: '#7F1D1D',
   },
 
+  // Vivid green scale (live/go success)
+  greenVivid: {
+    50: '#E9FBF0',
+    100: '#C8F7DA',
+    200: '#9FF0BF',
+    300: '#6BE79D',
+    400: '#47DE84', // Success vivid light
+    500: '#2ED573', // Success vivid main
+    600: '#22B85F',
+    700: '#1A9950', // Success vivid dark
+    800: '#157A40',
+    900: '#105C30',
+  },
+
+  // Vivid red scale (alert)
+  redVivid: {
+    50: '#FFECEE',
+    100: '#FFD6DB',
+    200: '#FFB3BC',
+    300: '#FF8593',
+    400: '#FF6070', // Error vivid light
+    500: '#FF4757', // Error vivid main
+    600: '#E63548',
+    700: '#C42539', // Error vivid dark
+    800: '#9E1C2C',
+    900: '#7A1520',
+  },
+
   // Amber scale (warning)
   amber: {
     50: '#FFFBEB',
@@ -152,6 +180,225 @@ export const primitiveColors = {
   transparent: 'transparent',
 } as const
 
+/**
+ * Derived tonal ramps (TD-05.09 color foundations)
+ *
+ * Seven OKLCH-generated hue ramps, 11 perceptual lightness steps each (50 -> 950).
+ * Built with hue-torsion + a chroma arc, anchored through existing brand/semantic
+ * hexes. `pin` marks the step each ramp flows through its anchor.
+ * This is the single source of truth for chromatic hexes — the categorical palette
+ * below references these steps rather than duplicating values.
+ * See coordination/design-explorations/foundations.
+ */
+export const primitiveRamps = {
+  red: {
+    50: '#FFF4F4',
+    100: '#FFE3E5',
+    200: '#FFC2C5',
+    300: '#FF9A9D',
+    400: '#F77175',
+    500: '#E05254',
+    600: '#D14343', // pin
+    700: '#A4221C',
+    800: '#7E1002',
+    900: '#5A0900',
+    950: '#3D0400',
+  },
+  orange: {
+    50: '#FFF5ED',
+    100: '#FFE6D4',
+    200: '#FFC7A2',
+    300: '#FFA063',
+    400: '#FF7900', // pin
+    500: '#DA5F00',
+    600: '#B94A00',
+    700: '#983804',
+    800: '#6F290F',
+    900: '#4E1C0C',
+    950: '#331107',
+  },
+  amber: {
+    50: '#FFF7DD',
+    100: '#FFEAA9',
+    200: '#FFD352',
+    300: '#F9B415', // pin
+    400: '#E08C00',
+    500: '#C27400',
+    600: '#A45E00',
+    700: '#814D14',
+    800: '#5B3A1A',
+    900: '#442503',
+    950: '#301500',
+  },
+  green: {
+    50: '#E3FFEE',
+    100: '#B5FFD2',
+    200: '#58F69E',
+    300: '#2ED573', // pin
+    400: '#21C05D',
+    500: '#22A444',
+    600: '#298732',
+    700: '#2B6B25',
+    800: '#264D1C',
+    900: '#1B3515',
+    950: '#11220D',
+  },
+  cyan: {
+    50: '#E6FBFF',
+    100: '#C2F6FF',
+    200: '#62EAFF',
+    300: '#22D3EE', // pin
+    400: '#01B5D1',
+    500: '#2697B7',
+    600: '#307B9B',
+    700: '#2A617F',
+    800: '#22465F',
+    900: '#0B3149',
+    950: '#001F36',
+  },
+  blue: {
+    50: '#EFF8FF',
+    100: '#D9EFFF',
+    200: '#ACDBFF',
+    300: '#78C2FF',
+    400: '#3CA8FF',
+    500: '#2196F3', // pin
+    600: '#1072CB',
+    700: '#135AA8',
+    800: '#14407E',
+    900: '#112C5A',
+    950: '#091B3C',
+  },
+  magenta: {
+    50: '#FFF3F9',
+    100: '#FFE2F1',
+    200: '#FFBDE2',
+    300: '#FF8FD5',
+    400: '#ED69C3',
+    500: '#D548AF',
+    600: '#BA2996',
+    700: '#9C0D7A', // pin
+    800: '#77005A',
+    900: '#56003F',
+    950: '#3B0029',
+  },
+} as const
+
+/**
+ * Categorical (qualitative) palette — an ordered, CVD-safe series expressed as
+ * references into {@link primitiveRamps} (one source of truth; the palette moves
+ * with the ramps).
+ *
+ * Design: a single canonical hue order (blue, magenta, red, orange, green, cyan,
+ * amber), with steps chosen vivid-midtone-first and fanned lighter/darker as the
+ * series grows to preserve separation. The sequence is nested-stable — a chart
+ * with N series uses the first N colors, and the series index is stable as N
+ * changes. Colorblind-safe worst-case deuteranopia/protanopia floor 8 holds
+ * through {@link CATEGORICAL_CVD_SAFE_MAX} colors; the 7th is an extended color
+ * that should be paired with a legend or other secondary encoding.
+ *
+ * Two variants: `default` (vivid, sits on neutral/light surfaces, legible under
+ * black text) and `dark` (deeper shades legible under white text on a fill). A
+ * separate "light" variant was dropped — the vivid `default` picks already clear
+ * black-text contrast, so it doubles as the light-context palette.
+ */
+export const categoricalPalette = {
+  default: [
+    primitiveRamps.blue[500],
+    primitiveRamps.magenta[500],
+    primitiveRamps.red[500],
+    primitiveRamps.orange[400],
+    primitiveRamps.green[300],
+    primitiveRamps.cyan[300],
+    primitiveRamps.amber[600], // extended (7th) — pair with a legend
+  ],
+  dark: [
+    primitiveRamps.blue[600],
+    primitiveRamps.magenta[600],
+    primitiveRamps.red[500],
+    primitiveRamps.orange[600],
+    primitiveRamps.green[800],
+    primitiveRamps.cyan[800],
+    primitiveRamps.amber[500], // extended (7th) — pair with a legend
+  ],
+} as const
+
+/** Largest series count that holds the CVD floor without a legend. */
+export const CATEGORICAL_CVD_SAFE_MAX = 6
+
+/**
+ * Categorical palette variant.
+ * - `default` : vivid; neutral/light surfaces, legible under black text
+ * - `dark`    : deeper shades, legible under white text on a filled swatch
+ */
+export type CategoricalVariant = keyof typeof categoricalPalette
+
+/**
+ * Get a color from the ordered categorical palette by series index.
+ * The palette is nested-stable, so the color for a given index does not change
+ * with the total series count; `index` simply wraps past the end.
+ *
+ * @param index - 0-based series index (wraps past the end)
+ * @param variant - `default` (black-text / light surfaces) or `dark` (white text)
+ * @returns The hex color string
+ */
+export function getCategoricalColor(index: number, variant: CategoricalVariant = 'default'): string {
+  const palette = categoricalPalette[variant]
+  index = Math.max(0, Math.floor(index))
+  return palette[index % palette.length]
+}
+
+/**
+ * Diverging status scale (BodyMap training-status: under → optimal → over) as
+ * references into {@link primitiveRamps}. A true diverging shape — `optimal` is
+ * the lightest center, the extremes go darker — so the signal reads in lightness
+ * (colorblind-robust; worst-case deut/protanopia min ΔE ~10.9) and the direction
+ * reads in the blue↔red axis (the CVD-safe hue pair).
+ *
+ * Tuned so every stop is dark enough for the fill yet light enough that BLACK
+ * text clears 4.5:1 on all five — no per-cell white/black flipping. The value
+ * valley is symmetric: the two mid-arms (maintenance / approaching) sit at equal
+ * lightness (both ~0.53 relative luminance), the ends darker.
+ */
+export const divergingScale = [
+  primitiveRamps.blue[500], // under
+  primitiveRamps.cyan[300], // maintenance
+  primitiveRamps.green[200], // optimal (light center)
+  primitiveRamps.amber[300], // approaching
+  primitiveRamps.red[600], // over
+] as const
+
+/**
+ * Sequential "effort" scale (low → high intensity: green → yellow → orange → red)
+ * as references into {@link primitiveRamps}. A 6-stop ordinal palette; the
+ * velocity/RPE strip sub-samples it. Every adjacent pair clears the CVD floor
+ * (min deut/protan ΔE ≥ 4.5), and within that the hue walk is kept smooth —
+ * the amber-200 → amber-300 → orange-400 run steps the yellow→orange transition
+ * gradually rather than lurching. Order encodes magnitude, so it tolerates the
+ * green↔red CVD pair. Stops 0–3 take black text; the dark reds take white.
+ */
+export const sequentialEffort = [
+  primitiveRamps.green[300],
+  primitiveRamps.amber[200],
+  primitiveRamps.amber[300],
+  primitiveRamps.orange[400],
+  primitiveRamps.red[600],
+  primitiveRamps.red[700],
+] as const
+
+/**
+ * Best-contrast text color (black or white) for a solid fill — for labels sitting
+ * on categorical/diverging/effort swatches. Uses the WCAG relative-luminance ratio.
+ */
+export function bestTextColor(hex: string): '#000000' | '#FFFFFF' {
+  const [r, g, b] = [0, 2, 4].map((i) => {
+    const c = parseInt(hex.replace('#', '').slice(i, i + 2), 16) / 255
+    return c >= 0.04045 ? ((c + 0.055) / 1.055) ** 2.4 : c / 12.92
+  })
+  const l = 0.2126 * r + 0.7152 * g + 0.0722 * b
+  return (l + 0.05) / 0.05 >= 1.05 / (l + 0.05) ? '#000000' : '#FFFFFF'
+}
+
 /**
  * Discrete rainbow palette for data visualization
  * Based on Paul Tol's color schemes: https://personal.sron.nl/~pault/#fig:scheme_rainbow_discrete

package/src/theme/tokens/semantic.ts

@@ -17,49 +17,54 @@
  * - interactive-* : Hover/focus/active/disabled states
  */
 
-import { primitiveColors as p, discreteRainbow } from './primitives'
+import { primitiveColors as p, primitiveRamps as ramp, discreteRainbow } from './primitives'
 
 // Light mode semantic colors (default)
 export const semanticColorsLight = {
   // Brand colors (brand-*)
-  'brand-primary': p.accent[400],              // #FF7900
-  'brand-primary-light': p.accent[200],        // #FF9630
-  'brand-primary-dark': p.accent[700],         // #D0620C
+  'brand-primary': ramp.orange[400],
+  'brand-primary-light': ramp.orange[300],
+  'brand-primary-dark': ramp.orange[500],
   'brand-primary-subtle': 'rgba(255, 121, 0, 0.08)',
-  'brand-primary-hover': p.accent[500],
-  'brand-primary-active': p.accent[600],
+  'brand-primary-hover': ramp.orange[500],
+  'brand-primary-active': ramp.orange[600],
 
-  'brand-secondary': p.steel[500],           // #406D87
-  'brand-secondary-light': p.steel[300],     // #678498
-  'brand-secondary-dark': p.steel[700],      // #32556D
-  'brand-secondary-subtle': 'rgba(64, 109, 135, 0.08)',
-  'brand-secondary-hover': p.steel[600],
-  'brand-secondary-active': p.steel[700],
+  'brand-secondary': ramp.cyan[600],
+  'brand-secondary-light': ramp.cyan[500],
+  'brand-secondary-dark': ramp.cyan[700],
+  'brand-secondary-subtle': 'rgba(48, 123, 155, 0.08)',
+  'brand-secondary-hover': ramp.cyan[700],
+  'brand-secondary-active': ramp.cyan[800],
 
   // Text on brand backgrounds (on-*)
   'on-brand-primary': p.white,
   'on-brand-secondary': p.white,
 
   // Status colors (status-*)
-  'status-success': p.teal[500],             // #14B8A6
-  'status-success-light': p.teal[400],       // #43C6B7
-  'status-success-dark': p.teal[700],        // #0E8074
-  'status-success-subtle': p.teal[50],
-
-  'status-error': p.red[600],                // #D14343
-  'status-error-light': p.red[400],          // #DA6868
-  'status-error-dark': p.red[700],           // #922E2E
-  'status-error-subtle': p.red[50],
-
-  'status-warning': p.amber[500],            // #FFB020
-  'status-warning-light': p.amber[400],      // #FFBF4C
-  'status-warning-dark': p.amber[600],       // #B27B16
-  'status-warning-subtle': p.amber[50],
-
-  'status-info': p.sky[500],                 // #2196F3
-  'status-info-light': p.sky[400],           // #64B6F7
-  'status-info-dark': p.sky[700],            // #0B79D0
-  'status-info-subtle': p.sky[50],
+  'status-success': ramp.green[300],
+  'status-success-light': ramp.green[200],
+  'status-success-dark': ramp.green[600],
+  'status-success-subtle': ramp.green[50],
+
+  'status-error': ramp.red[600],
+  'status-error-light': ramp.red[500],
+  'status-error-dark': ramp.red[700],
+  'status-error-subtle': ramp.red[50],
+
+  'status-error-vivid': p.redVivid[500],     // vivid alert red
+  'status-error-vivid-light': p.redVivid[400],
+  'status-error-vivid-dark': p.redVivid[700],
+  'status-error-vivid-subtle': 'rgba(255, 71, 87, 0.12)',
+
+  'status-warning': ramp.amber[300],
+  'status-warning-light': ramp.amber[200],
+  'status-warning-dark': ramp.amber[500],
+  'status-warning-subtle': ramp.amber[50],
+
+  'status-info': ramp.blue[500],
+  'status-info-light': ramp.blue[300],
+  'status-info-dark': ramp.blue[600],
+  'status-info-subtle': ramp.blue[50],
 
   // Text on status backgrounds (on-status-*)
   'on-status-success': p.white,
@@ -85,16 +90,16 @@ export const semanticColorsLight = {
 
   // Data visualization colors (data-*)
   // First 10 colors from discrete rainbow optimized for charts
-  'data-1': discreteRainbow[9],               // #1965B0 - Blue
-  'data-2': discreteRainbow[14],              // #4EB265 - Green
-  'data-3': discreteRainbow[17],              // #F7F056 - Yellow
-  'data-4': discreteRainbow[25],              // #DC050C - Red
-  'data-5': discreteRainbow[8],               // #882E72 - Purple
-  'data-6': discreteRainbow[20],              // #F4A736 - Orange
-  'data-7': discreteRainbow[13],              // #7BAFDE - Light Blue
-  'data-8': discreteRainbow[15],              // #90C987 - Light Green
-  'data-9': discreteRainbow[3],               // #CAACCB - Lavender
-  'data-10': discreteRainbow[22],             // #EE8026 - Dark Orange
+  'data-1': discreteRainbow[9],               // Blue
+  'data-2': discreteRainbow[14],              // Green
+  'data-3': discreteRainbow[17],              // Yellow
+  'data-4': discreteRainbow[25],              // Red
+  'data-5': discreteRainbow[8],               // Purple
+  'data-6': discreteRainbow[20],              // Orange
+  'data-7': discreteRainbow[13],              // Light Blue
+  'data-8': discreteRainbow[15],              // Light Green
+  'data-9': discreteRainbow[3],               // Lavender
+  'data-10': discreteRainbow[22],             // Dark Orange
 
   // Text colors (text-*)
   'text-primary': '#121828',
@@ -107,8 +112,8 @@ export const semanticColorsLight = {
 
   // Surface colors (surface-*) - for elevated containers
   'surface-base': p.white,
-  'surface-elevated': p.neutral[50],          // #FAFAFA - slightly off-white for elevated cards
-  'surface-raised': p.neutral[100],           // #F3F4F6 - light gray for raised cards
+  'surface-elevated': p.neutral[50],          // slightly off-white for elevated cards
+  'surface-raised': p.neutral[100],           // light gray for raised cards
   'surface-overlay': p.white,
   'surface-input': p.neutral[50],             // Input field background (filled variant)
 
@@ -121,6 +126,7 @@ export const semanticColorsLight = {
   'border-default': '#E8E9EB',
   'border-subtle': p.neutral[100],
   'border-strong': p.neutral[300],
+  'border-prominent': p.neutral[400],        // high-visibility divider
   'border-focus': p.blue[600],
   'border-input': p.neutral[300],             // Input field border
   'border-input-hover': p.neutral[400],       // Input field border on hover
@@ -146,43 +152,48 @@ export const semanticColorsLight = {
 // Dark mode semantic colors
 export const semanticColorsDark = {
   // Brand colors stay the same in dark mode
-  'brand-primary': p.accent[400],
-  'brand-primary-light': p.accent[200],
-  'brand-primary-dark': p.accent[700],
+  'brand-primary': ramp.orange[400],
+  'brand-primary-light': ramp.orange[300],
+  'brand-primary-dark': ramp.orange[500],
   'brand-primary-subtle': 'rgba(255, 121, 0, 0.12)',
-  'brand-primary-hover': p.accent[300],
-  'brand-primary-active': p.accent[200],
+  'brand-primary-hover': ramp.orange[300],
+  'brand-primary-active': ramp.orange[200],
 
-  'brand-secondary': p.steel[500],
-  'brand-secondary-light': p.steel[300],
-  'brand-secondary-dark': p.steel[700],
-  'brand-secondary-subtle': 'rgba(64, 109, 135, 0.12)',
-  'brand-secondary-hover': p.steel[400],
-  'brand-secondary-active': p.steel[300],
+  'brand-secondary': ramp.cyan[600],
+  'brand-secondary-light': ramp.cyan[500],
+  'brand-secondary-dark': ramp.cyan[700],
+  'brand-secondary-subtle': 'rgba(48, 123, 155, 0.12)',
+  'brand-secondary-hover': ramp.cyan[500],
+  'brand-secondary-active': ramp.cyan[400],
 
   // Text on brand backgrounds
   'on-brand-primary': p.white,
   'on-brand-secondary': p.white,
 
   // Status colors
-  'status-success': p.teal[500],
-  'status-success-light': p.teal[400],
-  'status-success-dark': p.teal[700],
-  'status-success-subtle': 'rgba(20, 184, 166, 0.12)',
-
-  'status-error': p.red[600],
-  'status-error-light': p.red[400],
-  'status-error-dark': p.red[700],
+  'status-success': ramp.green[300],
+  'status-success-light': ramp.green[200],
+  'status-success-dark': ramp.green[600],
+  'status-success-subtle': 'rgba(46, 213, 115, 0.12)',
+
+  'status-error': ramp.red[600],
+  'status-error-light': ramp.red[500],
+  'status-error-dark': ramp.red[700],
   'status-error-subtle': 'rgba(209, 67, 67, 0.12)',
 
-  'status-warning': p.amber[500],
-  'status-warning-light': p.amber[400],
-  'status-warning-dark': p.amber[600],
-  'status-warning-subtle': 'rgba(255, 176, 32, 0.12)',
+  'status-error-vivid': p.redVivid[500],
+  'status-error-vivid-light': p.redVivid[400],
+  'status-error-vivid-dark': p.redVivid[700],
+  'status-error-vivid-subtle': 'rgba(255, 71, 87, 0.12)',
 
-  'status-info': p.sky[500],
-  'status-info-light': p.sky[400],
-  'status-info-dark': p.sky[700],
+  'status-warning': ramp.amber[300],
+  'status-warning-light': ramp.amber[200],
+  'status-warning-dark': ramp.amber[500],
+  'status-warning-subtle': 'rgba(249, 180, 21, 0.12)',
+
+  'status-info': ramp.blue[500],
+  'status-info-light': ramp.blue[300],
+  'status-info-dark': ramp.blue[600],
   'status-info-subtle': 'rgba(33, 150, 243, 0.12)',
 
   // Text on status backgrounds
@@ -229,21 +240,22 @@ export const semanticColorsDark = {
   'text-link-hover': p.blue[400],
 
   // Surface colors - dark backgrounds
-  'surface-base': p.charcoal[700],         // #161616 - main surface
-  'surface-elevated': p.charcoal[600],     // #191919 - elevated surface
-  'surface-raised': p.charcoal[500],       // #1C1C1C - raised surface
-  'surface-overlay': p.charcoal[600],      // #191919 - overlay surface
-  'surface-input': p.charcoal[600],        // #191919 - input surface
+  'surface-base': p.charcoal[700],         // main surface
+  'surface-elevated': p.charcoal[600],     // elevated surface
+  'surface-raised': p.charcoal[500],       // raised surface
+  'surface-overlay': p.charcoal[600],      // overlay surface
+  'surface-input': p.charcoal[600],        // input surface
 
   // Background colors
-  'background-base': p.charcoal[900],      // #101010 - darkest charcoal
-  'background-default': p.charcoal[700],    // #161616 - main background
-  'background-subtle': p.charcoal[500],     // #1C1C1C - subtle background
+  'background-base': p.charcoal[900],      // darkest charcoal
+  'background-default': p.charcoal[700],    // main background
+  'background-subtle': p.charcoal[500],     // subtle background
 
   // Border colors
-  'border-default': p.charcoal[400],       // #1F1F1F - default border
-  'border-subtle': p.charcoal[500],        // #1C1C1C - subtle border
-  'border-strong': p.charcoal[300],        // #2C2C2C - strong border
+  'border-default': p.charcoal[400],       // default border
+  'border-subtle': p.charcoal[500],        // subtle border
+  'border-strong': p.charcoal[300],        // strong border
+  'border-prominent': p.charcoal[200],     // high-visibility divider
   'border-focus': '#828DF8',
   'border-input': p.neutral[600],
   'border-input-hover': p.neutral[500],
@@ -259,7 +271,7 @@ export const semanticColorsDark = {
   'interactive-disabled-text': 'rgba(255, 255, 255, 0.26)',
 
   // Divider
-  'divider': p.charcoal[400],              // #1F1F1F - divider color
+  'divider': p.charcoal[400],              // divider color
 
   // Avatar default
   'avatar-background': p.neutral[600],

package/src/theme/workout-tokens.ts

@@ -2,31 +2,32 @@
  * Workout-specific tokens not yet in the main Tailwind config.
  * Use these inline instead of Tailwind classes.
  */
+import { divergingScale, sequentialEffort, primitiveRamps as ramp } from './tokens/primitives'
+
 export const WORKOUT_TOKENS = {
   // Canonical 4-band performance scale — the single source for BOTH the
   // VelocityStrip zone bars and the SetRow RPE color (TD-03.43). The direction
   // is intentionally inverted between the two consumers: for velocity, green =
-  // fastest/best; for RPE, green = easiest. Each component maps its own
-  // thresholds onto these four colors. Kept as vivid data-viz values (distinct
-  // from the muted status tokens) and theme-independent, so — like the heatmap
-  // scale below — they are consumed inline as a JS import rather than CSS vars.
-  // A JS import also resolves on native RN, unlike var(--…) strings.
+  // fastest/best; for RPE, green = easiest. This is the [0,1,2,4] subsample of
+  // the canonical `sequentialEffort` primitive. The `orange` key is the band
+  // label. Consumed inline (RN).
   scale: {
-    green: '#2ed573',
-    yellow: '#ffd43b',
-    orange: '#ffa502',
-    red: '#ff4757',
+    green: sequentialEffort[0],
+    yellow: sequentialEffort[1],
+    orange: sequentialEffort[2], // gold band
+    red: sequentialEffort[4],
   },
 
-  // BodyMap volume heatmap scale (drive dynamic SVG fills, so inline values).
-  // Maps weekly-volume status against MEV/MAV/MRV landmarks to a fill color.
+  // BodyMap volume heatmap — the canonical `divergingScale` (under → optimal →
+  // over): a true diverging shape with a light green center, cool-blue under-
+  // trained end and warm-red over-reaching end (colorblind-robust in lightness).
   heatmap: {
-    none: '#E0E0E0', // gray — no training data
-    under: '#4A90D9', // cool blue — below MEV
-    maintenance: '#F5C842', // warm yellow — MEV to MAV
-    productive: '#4CAF50', // green — MAV to MRV
-    approaching: '#FFA502', // orange — near MRV
-    over: '#FF6B35', // red-orange — over MRV
+    none: '#E0E0E0', // no training data
+    under: divergingScale[0], // below MEV
+    maintenance: divergingScale[1], // MEV to MAV
+    productive: divergingScale[2], // optimal center — MAV to MRV
+    approaching: divergingScale[3], // near MRV
+    over: divergingScale[4], // over MRV
   },
 
   // Badge border-radius (rounded-sm is 4px, we need 2px)
@@ -36,12 +37,12 @@ export const WORKOUT_TOKENS = {
   // components use the CSS custom properties (var(--color-surface-*/border-*))
   // directly. Only theme-independent data-viz values remain below.
 
-  // Intensity bar specific
+  // Intensity bar specific — over-target tiers deepen along the red ramp.
   intensity: {
     track: '#333333',
-    over1: '#D14343',
-    over2: '#A62626',
-    over3: '#7A1C1C',
+    over1: ramp.red[600], // matches status-error
+    over2: ramp.red[700],
+    over3: ramp.red[800],
     targetLine: 'rgba(33, 150, 243, 0.5)',
     atTargetGlow:
       '0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)',

package/src/utils/avatar-color.ts

@@ -1,6 +1,6 @@
-const AVATAR_COLORS = [
-  '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8'
-]
+import { AVATAR_CATEGORICAL_COLORS } from '../theme/extracted-colors-ui'
+
+const AVATAR_COLORS = AVATAR_CATEGORICAL_COLORS
 
 export function avatarColor(name: string): string {
   let hash = 0

package/tailwind.config.js

@@ -44,6 +44,12 @@ module.exports = {
             dark: 'var(--color-status-error-dark)',
             subtle: 'var(--color-status-error-subtle)',
           },
+          'error-vivid': {
+            DEFAULT: 'var(--color-status-error-vivid)',
+            light: 'var(--color-status-error-vivid-light)',
+            dark: 'var(--color-status-error-vivid-dark)',
+            subtle: 'var(--color-status-error-vivid-subtle)',
+          },
           warning: {
             DEFAULT: 'var(--color-status-warning)',
             light: 'var(--color-status-warning-light)',
@@ -132,6 +138,7 @@ module.exports = {
           DEFAULT: 'var(--color-border-default)',
           subtle: 'var(--color-border-subtle)',
           strong: 'var(--color-border-strong)',
+          prominent: 'var(--color-border-prominent)',
           focus: 'var(--color-border-focus)',
           input: {
             DEFAULT: 'var(--color-border-input)',
@@ -184,10 +191,10 @@ module.exports = {
         xl: '0px 20px 25px rgba(100, 116, 139, 0.12)',
         // Glow shadows (colored radial glow for emphasis)
         'glow-primary': '0 0 20px 2px rgba(var(--color-brand-primary-rgb, 255, 121, 0), 0.4)',
-        'glow-secondary': '0 0 20px 2px rgba(var(--color-brand-secondary-rgb, 64, 109, 135), 0.4)',
-        'glow-success': '0 0 20px 2px rgba(var(--color-status-success-rgb, 20, 184, 166), 0.35)',
+        'glow-secondary': '0 0 20px 2px rgba(var(--color-brand-secondary-rgb, 48, 123, 155), 0.4)',
+        'glow-success': '0 0 20px 2px rgba(var(--color-status-success-rgb, 46, 213, 115), 0.35)',
         'glow-error': '0 0 20px 2px rgba(var(--color-status-error-rgb, 209, 67, 67), 0.4)',
-        'glow-warning': '0 0 20px 2px rgba(var(--color-status-warning-rgb, 255, 176, 32), 0.35)',
+        'glow-warning': '0 0 20px 2px rgba(var(--color-status-warning-rgb, 249, 180, 21), 0.35)',
         'glow-info': '0 0 20px 2px rgba(var(--color-status-info-rgb, 33, 150, 243), 0.35)',
         'glow-sm': '0 0 12px 0px',
         'glow-md': '0 0 20px 2px',