@titan-design/react-ui 0.11.0 → 0.12.1

package/src/components/custom/Workout/BodyMapDetailPanel.tsx

@@ -220,7 +220,7 @@ export function BodyMapDetailPanel({
           testID="body-map-detail-panel-handle"
         >
           <View
-            className="bg-border-strong"
+            className="bg-hairline-strong"
             style={{ width: 40, height: 4, borderRadius: 2 }}
             accessibilityElementsHidden
           />
@@ -380,7 +380,7 @@ export function BodyMapDetailPanel({
               {contributingExercises!.map((exercise, index) => (
                 <View
                   key={`${exercise.name}-${index}`}
-                  className="flex-row items-center justify-between bg-surface-raised border-border"
+                  className="flex-row items-center justify-between bg-surface-raised border-hairline"
                   style={{
                     gap: 10,
                     paddingVertical: 8,

package/src/components/custom/Workout/DeviationBar.test.tsx

@@ -2,6 +2,7 @@ import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { DeviationBar } from './DeviationBar'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 describe('DeviationBar', () => {
   it('renders the bar and dot', () => {
@@ -62,7 +63,7 @@ describe('DeviationBar', () => {
     const { getByTestId } = render(<DeviationBar deviation={0} />)
     const dot = getByTestId('deviation-dot')
     expect(dot).toHaveStyle({ width: '8px', height: '8px' })
-    expect(dot).toHaveStyle({ borderTopWidth: '1.5px', borderTopColor: '#F3F4F6' })
+    expect(dot).toHaveStyle({ borderTopWidth: '1.5px', borderTopColor: greyRamp[50] })
     expect(dot).toHaveStyle({ boxShadow: '0 0 4px rgba(0,0,0,0.5)' })
   })
 

package/src/components/custom/Workout/DeviationBar.tsx

@@ -1,6 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, type ViewProps, type ViewStyle } from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 const t = getSemanticColors('dark')
 
@@ -13,7 +14,7 @@ export interface DeviationBarProps extends ViewProps {
 function getDotColor(deviation: number): string {
   const abs = Math.abs(deviation)
   if (deviation < -0.3) return t['status-success']
-  if (abs <= 0.3) return '#6B7280'
+  if (abs <= 0.3) return greyRamp[500]
   if (abs <= 0.7) return t['status-warning']
   return t['status-error']
 }
@@ -68,7 +69,7 @@ export function DeviationBar({
           height: dotSize,
           borderRadius: 9999,
           borderWidth: 1.5,
-          borderColor: '#F3F4F6',
+          borderColor: greyRamp[50],
           boxShadow: '0 0 4px rgba(0,0,0,0.5)',
           backgroundColor: getDotColor(clamped),
           left: Math.max(0, Math.min(dotPosition - dotSize / 2, resolvedWidth - dotSize)),

package/src/components/custom/Workout/ExerciseCard.test.tsx

@@ -3,6 +3,7 @@ import { render, screen, fireEvent, within } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { ExerciseCard } from './ExerciseCard'
 import type { SetRowProps } from './SetRow'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
 const baseCollapsedProps = {
   name: 'Bench Press',
@@ -86,9 +87,8 @@ describe('ExerciseCard', () => {
       sets: unifiedSets,
     }
 
-    // Literal-hex text treatments (dark theme neutral 100 / 400).
-    const T_ACTIVE = '#F3F4F6'
-    const T_MUTED = '#9CA3AF'
+    // Read from the tokens, not pinned (see SetRow.test.tsx).
+    const { 'text-primary': T_ACTIVE, 'text-secondary': T_MUTED } = getSemanticColors('dark')
 
     it('renders exercise name via the real ExerciseCardHeading header', () => {
       render(<ExerciseCard {...expandedProps} />)

package/src/components/custom/Workout/ExerciseCard.tsx

@@ -220,7 +220,7 @@ function CollapsedCard({
 
 const DARK = getSemanticColors('dark')
 /** The header↔body seam. */
-const BODY_DIVIDER = DARK['border-subtle']
+const BODY_DIVIDER = DARK['hairline-subtle']
 
 /** Project the set rows onto the heading strip's per-set state (done / active / todo). */
 function deriveHeaderSetStates(sets: SetRowProps[]): SetStripSet[] {
@@ -262,7 +262,7 @@ function ExpandedCard({
 
   return (
     <View
-      className="bg-surface-elevated border-border"
+      className="bg-surface-elevated border-hairline"
       style={{
         borderWidth: 1,
         ...borderRadius,

package/src/components/custom/Workout/ExerciseDetailPage.tsx

@@ -193,7 +193,7 @@ function TabBar({ active, onSelect }: TabBarProps) {
       className="flex-row"
       style={{
         borderBottomWidth: 1,
-        borderBottomColor: resolveColor('border-default'),
+        borderBottomColor: resolveColor('hairline-default'),
       }}
       accessibilityRole={'tablist' as ViewProps['accessibilityRole']}
       testID="exercise-detail-page-tabs"
@@ -247,7 +247,7 @@ function StatStrip({ stats, unit }: { stats: ExerciseDetailStats; unit: 'lbs' |
         return (
           <View
             key={key}
-            className="bg-surface-elevated border-border"
+            className="bg-surface-elevated border-hairline"
             style={{
               flex: 1,
               padding: 12,
@@ -297,7 +297,7 @@ function SectionCard({
 }) {
   return (
     <View
-      className="bg-surface-elevated border-border"
+      className="bg-surface-elevated border-hairline"
       style={{
         borderWidth: 1,
         borderRadius: 12,
@@ -421,7 +421,7 @@ function VbtSummaryRow({ summary }: { summary: VbtSummary }) {
       {cells.map((cell) => (
         <View
           key={cell.label}
-          className="bg-surface-elevated border-border"
+          className="bg-surface-elevated border-hairline"
           style={{
             flex: 1,
             padding: 12,

package/src/components/custom/Workout/InputBar.tsx

@@ -19,7 +19,7 @@ export interface InputBarProps {
 }
 
 const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
-const INPUT_CLASSNAME = 'bg-surface-raised border-border-strong text-text-primary'
+const INPUT_CLASSNAME = 'bg-surface-raised border-hairline-strong text-text-primary'
 
 const inputStyle = {
   fontSize: 14,
@@ -55,7 +55,7 @@ export function InputBar({
       style={{
         width: '100%',
         borderTopWidth: 1,
-        borderTopColor: resolveColor('border-default'),
+        borderTopColor: resolveColor('hairline-default'),
         paddingTop: 10,
         paddingHorizontal: 16,
         paddingBottom: 12,

package/src/components/custom/Workout/LiveAuraFrame.stories.tsx

@@ -82,7 +82,7 @@ const meta: Meta<typeof LiveAuraFrame> = {
     docs: {
       description: {
         component:
-          'Full-surface color-flood frame tied to a coaching category. Wraps content on a charcoal ' +
+          'Full-surface color-flood frame tied to a coaching category. Wraps content on a grey ' +
           'base and layers a radial wash — amber at threshold (VL20), red at stop (VL28+, pulsing) — ' +
           'derived from the semantic warning / error tokens via `alpha()`. Children pass through. ' +
           'Rendered here at live-screen size so the flood reads (it is meant to tint a whole panel, ' +

package/src/components/custom/Workout/LiveAuraFrame.test.tsx

@@ -19,7 +19,7 @@ describe('LiveAuraFrame', () => {
     expect(screen.getByText('Cable Row')).toBeInTheDocument()
   })
 
-  it('sits on the charcoal base surface', () => {
+  it('sits on the grey base surface', () => {
     render(<LiveAuraFrame category="productive" />)
     expect(screen.getByTestId('live-aura-frame')).toHaveStyle({
       backgroundColor: t['background-base'],

package/src/components/custom/Workout/LiveAuraFrame.tsx

@@ -45,7 +45,7 @@ export function liveAuraColor(category: LiveAuraCategory): string | null {
 
 /**
  * Full-surface color-flood frame tied to a coaching category. Wraps `children`
- * on a charcoal base and layers a radial wash (amber at threshold, red at stop)
+ * on a grey base and layers a radial wash (amber at threshold, red at stop)
  * as a decorative, pointer-transparent overlay. The wash uses a solid
  * `backgroundColor` fallback (native) plus a web-only `backgroundImage` radial
  * gradient; both derive from the same semantic token via `alpha()`.
@@ -62,7 +62,7 @@ export function LiveAuraFrame({
   const tint = color ? alpha(color, floodOpacity[category]) : 'transparent'
 
   // Match R2's canonical aura: a top-down radial wash that FADES TO TRANSPARENT
-  // by ~62%, so the charcoal base shows through the lower panel — NOT a flat
+  // by ~62%, so the grey base shows through the lower panel — NOT a flat
   // full-surface tint. On web (the target: MCP dashboard + Storybook) render the
   // gradient only; native has no gradient support, so fall back to a solid tint.
   const floodStyle = {
@@ -84,7 +84,7 @@ export function LiveAuraFrame({
           borderRadius: 10,
           backgroundColor: t['background-base'],
           borderWidth: 1,
-          borderColor: t['border-default'],
+          borderColor: t['hairline-default'],
         },
         style,
       ]}

package/src/components/custom/Workout/MesoCard.tsx

@@ -10,10 +10,12 @@ import {
   MESO_ACCENT_GRADIENT_LIGHT,
 } from '../../../theme/extracted-colors-dataviz'
 
+const HAIRLINE_DEFAULT = getSemanticColors('dark')['hairline-default']
+
 const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 const BRAND_PRIMARY_DARK = MESO_ACCENT_GRADIENT_DARK
 const BRAND_PRIMARY_LIGHT = MESO_ACCENT_GRADIENT_LIGHT
-const BORDER_DEFAULT = '#1F1F1F'
+const BORDER_DEFAULT = HAIRLINE_DEFAULT
 
 /** Gradient stops for the 3px top accent: dark -> primary -> light. */
 const ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY, BRAND_PRIMARY_LIGHT]

package/src/components/custom/Workout/MuscleGroupChip.tsx

@@ -1,6 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 const t = getSemanticColors('dark')
 
@@ -15,7 +16,7 @@ export interface MuscleGroupChipProps extends ViewProps {
 }
 
 const dotColorMap: Record<VolumeStatus, string> = {
-  untrained: '#2C2C2C',
+  untrained: greyRamp[900],
   behind: t['brand-secondary'],
   ontrack: t['status-success'],
   target: t['brand-primary'],
@@ -31,13 +32,13 @@ export function MuscleGroupChip({
 }: MuscleGroupChipProps) {
   const dotColor = volumeStatus
     ? dotColorMap[volumeStatus]
-    : '#2C2C2C'
+    : greyRamp[900]
 
   const statusLabel = volumeStatus ?? 'no status'
 
   const content = (
     <View
-      className={['bg-surface-raised border-border', className].filter(Boolean).join(' ')}
+      className={['bg-surface-raised border-hairline', className].filter(Boolean).join(' ')}
       style={{
         flexDirection: 'row',
         alignItems: 'center',

package/src/components/custom/Workout/PrHistoryModal.tsx

@@ -10,7 +10,7 @@ const RECENT_BORDER = 'rgba(249,180,21,0.3)'
 const RECENT_GLOW = '0 0 12px rgba(249,180,21,0.06)'
 // Native-safe fallback for the conditional row border (recent uses a computed
 // rgba, so className can't express both branches).
-const BORDER_DEFAULT = resolveColor('border-default')
+const BORDER_DEFAULT = resolveColor('hairline-default')
 
 export type PrRecordType = 'e1rm' | 'weight' | 'reps' | 'volume' | 'velocity'
 
@@ -172,7 +172,7 @@ export function PrHistoryModal({
     >
       <View
         accessibilityElementsHidden
-        className="bg-border"
+        className="bg-hairline"
         style={{
           alignSelf: 'center',
           width: 40,

package/src/components/custom/Workout/ProgramPlanningPage.tsx

@@ -388,7 +388,7 @@ export function ProgramPlanningPage({
         )}
 
         <View
-          className="bg-surface-elevated border-border"
+          className="bg-surface-elevated border-hairline"
           style={{
             borderWidth: 1,
             borderRadius: 12,

package/src/components/custom/Workout/README.md

@@ -105,7 +105,7 @@ type props without pulling the dependency.
   `SetStrip`/`SetBar` colors are the real titan ramp pins (`primitiveRamps` red-600 /
   orange-400 / amber-300 / green-300); the rail surfaces bind to the charcoal ramp +
   a subtle neumorphic inset (`neumorphicShadows.charcoal.pressed.subtle`). The heading
-  design is locked in `coordination/.../S3-sessionrail/DECISIONS-ExerciseRow.md`; the
+  design is locked in `sources/design/shell/S3-sessionrail/DECISIONS-ExerciseRow.md`; the
   exploration specimens live under `Custom/Workout/Explorations/*` (do not repoint yet).
   In Storybook the family nests by composition under **`Shell/SessionRail/…`**
   (organism → `ExerciseCardHeading` → `ExerciseHeading` → its atoms/molecules →

package/src/components/custom/Workout/ReadinessCheck.tsx

@@ -116,7 +116,7 @@ function EmojiSlider({ factor }: EmojiSliderProps) {
               accessibilityLabel={`${factor.label} level ${level} of 5`}
               aria-checked={selected}
               testID="readiness-check-emoji"
-              className={selected ? undefined : 'border-border bg-surface-raised'}
+              className={selected ? undefined : 'border-hairline bg-surface-raised'}
               style={({ pressed }) => ({
                 flex: 1,
                 alignItems: 'center',
@@ -172,7 +172,7 @@ function WarmUpCard({ validation }: { validation: WarmUpValidation }) {
   const badge = WARMUP_BADGE[validation.status]
   return (
     <View
-      className="border-border bg-surface-raised"
+      className="border-hairline bg-surface-raised"
       style={{
         marginTop: 16,
         padding: 12,

package/src/components/custom/Workout/RestTimer.tsx

@@ -188,7 +188,7 @@ export function RestTimer({
       style={{
         width: '100%',
         borderTopWidth: 1,
-        borderTopColor: resolveColor('border-default'),
+        borderTopColor: resolveColor('hairline-default'),
         paddingVertical: 12,
         paddingHorizontal: 16,
       }}
@@ -253,7 +253,7 @@ export function RestTimer({
 
       {/* Progress bar */}
       <View
-        className="bg-border"
+        className="bg-hairline"
         style={{
           height: 3,
           borderRadius: 2,

package/src/components/custom/Workout/S3SetTypes.stories.tsx

@@ -9,11 +9,11 @@
  */
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Fragment } from 'react'
-import { primitiveColors, primitiveRamps as ramp } from '../../../theme/tokens/primitives'
+import { primitiveRamps as ramp, greyRamp } from '../../../theme/tokens/primitives'
 import { GREY, RAIL_W, SET_GAP, T_PRIMARY, T_SECONDARY, T_TERTIARY, INSET, velColor, reps, Page, sectionTitle } from './setHeadingKit'
 
 // ---- variable-zone (floor→max) upcoming color — real ramp candidates (no invented hex)
-const VAR_GREY = primitiveColors.charcoal[200] // #3C3C3C — lighter charcoal (the paler-grey reference)
+const VAR_GREY = greyRamp[800] // #3C3C3C — lighter grey (the paler-grey reference)
 const VAR_BLUE_800 = ramp.blue[800] // #14407E — clearly blue, a touch brighter
 const VAR_BLUE_900 = ramp.blue[900] // #112C5A — dark muted navy, recessive
 const VAR_CYAN_900 = ramp.cyan[900] // #0B3149 — teal alt, sidesteps info-blue adjacency
@@ -115,7 +115,7 @@ function Sheet() {
         {/* 1. variable rep-range — real ramp candidates for the variable zone */}
         <Col label="1 · variable rep-range — LOCKED: cyan 900">
           {([
-            ['grey · charcoal 200', VAR_GREY],
+            ['grey · grey 200', VAR_GREY],
             ['blue 800 · #14407E', VAR_BLUE_800],
             ['blue 900 · #112C5A', VAR_BLUE_900],
             ['cyan 900 · #0B3149', VAR_CYAN_900],

package/src/components/custom/Workout/SessionHeader.stories.tsx

@@ -9,7 +9,7 @@ import { SessionHeader, type SessionHeaderPlanEntry } from './SessionHeader'
  * bar (fill ∝ sets done, coloured against the elapsed-vs-budget pace with a live marker),
  * a mono `n/total sets` label and a ⏱ elapsed readout. Upcoming, the tiles become
  * Date/Time/Until, the bar is the empty plan shape, and the readout shows the planned
- * duration. Rendered on the raised charcoal plane.
+ * duration. Rendered on the raised grey plane.
  */
 const meta: Meta<typeof SessionHeader> = {
   title: 'Shell/SessionRail/SessionHeader',
@@ -20,7 +20,7 @@ const meta: Meta<typeof SessionHeader> = {
       description: {
         component:
           '**Molecule** (shell S3). The session-rail heading — title, stat tiles, chunked ' +
-          'pace bar, sets label + ⏱ readout, on the raised charcoal plane. Composes ' +
+          'pace bar, sets label + ⏱ readout, on the raised grey plane. Composes ' +
           '[MetricTiles](?path=/docs/workout-metrictiles--docs) / ' +
           '[ScheduleTiles](?path=/docs/workout-scheduletiles--docs) + ' +
           '[SegmentedProgressBar](?path=/docs/workout-segmentedprogressbar--docs) + ' +

package/src/components/custom/Workout/SessionHeader.tsx

@@ -51,7 +51,7 @@ export interface SessionHeaderProps extends ViewProps {
  * done, coloured green/amber against the elapsed-vs-budget pace, with a live marker),
  * a mono `n/total sets` label and a ⏱ elapsed readout. Upcoming (`next` set), the tiles
  * become Date/Time/Until, the bar is the empty plan shape, and the readout shows the
- * planned duration. Rendered on the raised charcoal plane; presentational. Composes
+ * planned duration. Rendered on the raised grey plane; presentational. Composes
  * {@link MetricTiles} / {@link ScheduleTiles} + {@link SegmentedProgressBar} +
  * {@link TimerReadout}.
  */

package/src/components/custom/Workout/SessionRail.stories.tsx

@@ -10,7 +10,7 @@ const t = getSemanticColors('dark')
  * `SessionRail` (shell organism) — the live-workout exercise list: a flat raised
  * `SessionHeader` glance (title, stat tiles, chunked pace bar) over a sunk, inset list
  * of ExerciseCard rail headings. The header plan (chunk widths ∝ sets) is derived from
- * `exercises`. Surfaces bind to the charcoal ramp; the list depth is a subtle neumorphic
+ * `exercises`. Surfaces bind to the grey ramp; the list depth is a subtle neumorphic
  * inset. Driven entirely by props.
  */
 const meta: Meta<typeof SessionRail> = {
@@ -37,7 +37,7 @@ const meta: Meta<typeof SessionRail> = {
       description: {
         component:
           '**Organism** (shell S3). The live-workout exercise list: raised header glance over ' +
-          'a sunk inset list, subtle neumorphic depth (charcoal ramp + `neumorphicShadows`). ' +
+          'a sunk inset list, subtle neumorphic depth (grey ramp + `neumorphicShadows`). ' +
           'Composes ' +
           '[SessionHeader](?path=/docs/shell-sessionrail-sessionheader--docs) + ' +
           '[ExerciseCardHeading](?path=/docs/workout-exercisecardheading--docs) × N. ' +

package/src/components/custom/Workout/SessionRail.tsx

@@ -1,7 +1,8 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, type ViewProps } from 'react-native'
-import { primitiveColors } from '../../../theme/tokens/primitives'
-import { neumorphicShadows } from '../../../theme/shadows'
+import { greyRamp } from '../../../theme/tokens/primitives'
+import { insetWell } from '../../../theme/materials'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { Surface } from '../../ui/surface'
 import { ExerciseCardHeading } from './ExerciseCardHeading'
 import { ExerciseCard } from './ExerciseCard'
@@ -17,7 +18,9 @@ import type { ExerciseIndicatorKind } from './ExerciseIndicator'
 // recessed via its inner shadow yet paler than the header, so the transparent
 // exercise headings on it never blend into the header plane. Surface owns both backgrounds,
 // so the rail no longer hand-sets them.
-const DIVIDER = primitiveColors.charcoal[300] // #2C2C2C — row divider (raised to read on surface-elevated #2A2827)
+const SEMANTIC = getSemanticColors('dark')
+/** Row divider — one step up from the well it sits in so the line reads. */
+const DIVIDER = greyRamp[875]
 
 const DEFAULT_WIDTH = 246
 
@@ -124,9 +127,14 @@ export function SessionRail({
         next={next}
       />
 
+      {/* The list is a WELL cut into the rail: one plane down from the rail's
+          `elevated`, recessed by the shared inset material rather than by a
+          neumorphic pressed shadow (which had no room to read at this
+          lightness). `level` follows the well's tone so on-surface text
+          resolves against what is actually painted. */}
       <Surface
-        level="elevated"
-        style={[{ flex: 1 }, neumorphicShadows.charcoal.pressed.subtle]}
+        level="base"
+        style={[{ flex: 1 }, insetWell(SEMANTIC['surface-base'])]}
         testID="session-rail-list"
       >
         {exercises.map((ex, i) => (

package/src/components/custom/Workout/SetBar.tsx

@@ -1,5 +1,5 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { primitiveColors, primitiveRamps } from '../../../theme/tokens/primitives'
+import { primitiveRamps, greyRamp } from '../../../theme/tokens/primitives'
 import { SegmentedBar, type SegmentedBarSegment } from './SegmentedBar'
 
 /**
@@ -13,8 +13,8 @@ export const SET_STRIP_ZONES = {
   fastest: primitiveRamps.green[300],
 } as const
 
-/** Grey fill for planned-but-unperformed reps / upcoming sets (charcoal placeholder). */
-const TODO_COLOR = primitiveColors.charcoal[300]
+/** Grey fill for planned-but-unperformed reps / upcoming sets (grey placeholder). */
+const TODO_COLOR = greyRamp[900]
 
 /**
  * The learned "variable / unknown / opportunity" semantic (cyan-900, a real ramp

package/src/components/custom/Workout/SetRow.test.tsx

@@ -3,10 +3,13 @@ import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { View } from 'react-native'
 import { SetRow, type SetRowProps } from './SetRow'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-// Literal-hex text treatments (dark theme neutral 100 / 400).
-const T_ACTIVE = '#F3F4F6'
-const T_MUTED = '#9CA3AF'
+// Text treatments, read from the tokens rather than pinned as hexes. These
+// used to be hand-copied literals and silently desynced when the greys moved
+// to the warm ramp (TD-07.14). The assertion still bites — it checks the
+// component reaches for the right ROLE — it just no longer restates the value.
+const { 'text-primary': T_ACTIVE, 'text-secondary': T_MUTED } = getSemanticColors('dark')
 
 const doneRow: SetRowProps = {
   state: 'done',

package/src/components/custom/Workout/StatusDot.tsx

@@ -1,6 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, Text, type ViewProps } from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 const t = getSemanticColors('dark')
 
@@ -28,7 +29,7 @@ const solidVariantColors: Record<string, string> = {
   success: t['status-success'],
   warning: t['status-warning'],
   error: t['status-error'],
-  neutral: '#6B7280',
+  neutral: greyRamp[500],
 }
 
 const ringVariantStyles: Record<string, Record<string, unknown>> = {
@@ -71,10 +72,10 @@ const iconColors: Record<StatusDotVariant, string> = {
   success: '#0A5C52',
   warning: '#6B4000',
   error: '#5C1A1A',
-  neutral: '#D1D5DB',
+  neutral: greyRamp[200],
   'on-track': t['status-success'],
   deviation: t['status-warning'],
-  future: '#6B7280',
+  future: greyRamp[500],
 }
 
 const sizeDimensions = {
@@ -146,7 +147,7 @@ export function StatusDot({
       >
         <View accessibilityElementsHidden>{dot}</View>
         <Text
-          style={{ fontSize: 12, lineHeight: 16, color: '#9CA3AF' }}
+          style={{ fontSize: 12, lineHeight: 16, color: greyRamp[400] }}
           accessibilityElementsHidden
         >
           {label}

package/src/components/custom/Workout/StrengthTrendChart.tsx

@@ -477,7 +477,7 @@ export function StrengthTrendChart({
           <View
             testID="strength-trend-chart-tooltip"
             accessibilityElementsHidden
-            className="bg-surface-elevated border-border-strong"
+            className="bg-surface-elevated border-hairline-strong"
             style={{
               position: 'absolute',
               left: Math.max(

package/src/components/custom/Workout/TrainingStatusPage.tsx

@@ -114,7 +114,7 @@ function SummaryCards({ summary }: { summary: TrainingStatusSummary }) {
         return (
           <View
             key={key}
-            className="bg-surface-elevated border-border"
+            className="bg-surface-elevated border-hairline"
             style={{
               flexGrow: 1,
               flexBasis: '46%',
@@ -265,7 +265,7 @@ export function TrainingStatusPage({
         <SummaryCards summary={summary} />
 
         <View
-          className="bg-surface-elevated border-border"
+          className="bg-surface-elevated border-hairline"
           style={{
             borderWidth: 1,
             borderRadius: 12,

package/src/components/custom/Workout/VelocityStrip.test.tsx

@@ -414,8 +414,11 @@ describe('VelocityStrip all-zero velocities (NaN guard)', () => {
 
 // Literal-hex slot colors (must match the component's tokens exactly).
 // TODO_SOLID = the LANDED surface-relative solid to-do tone (base/dark plane blended toward the
-// on-surface neutral) — replaced the old fixed charcoal #2C2C2C. Solid fill, not a dashed outline.
-const TODO_SOLID = '#4C4E55'
+// on-surface neutral) — replaced the old fixed grey #2C2C2C. Solid fill, not a dashed outline.
+// Pinned rather than recomputed on purpose: deriving it here would just mirror
+// SetBarChart's mixHex and stop catching a change to the blend itself.
+// = mixHex(grey-925, text-tertiary, 0.55); moved with the warm ramp (TD-07.14).
+const TODO_SOLID = '#5B5957'
 const VARIABLE_CYAN = '#0B3149'
 const CONTINUE_OUTLINE = '#22465F'
 describe('VelocityStrip set-type modes (compact)', () => {

package/src/components/custom/Workout/VelocityStrip.tsx

@@ -2,7 +2,7 @@
 import { useEffect, useState } from 'react'
 import { View, Text, Pressable, Animated, type ViewProps, type ViewStyle } from 'react-native'
 import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
-import { primitiveColors, sequentialEffort } from '../../../theme/tokens/primitives'
+import { sequentialEffort, greyRamp } from '../../../theme/tokens/primitives'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { alpha } from '../../../utils/colors'
 import { formatVelocity } from '../../../utils/workout-format'
@@ -456,14 +456,14 @@ const EXPANDED_HEIGHT = 60
 /** Default `compact` (flat resting strip) height (px) — a THIN radius-2 pill row, the resting glance. */
 const COMPACT_HEIGHT = 8
 
-/** The dashed running-best reference line color (the lightest charcoal step). */
-const HERO_REFERENCE_COLOR = primitiveColors.charcoal[0]
+/** The dashed running-best reference line color (the lightest grey step). */
+const HERO_REFERENCE_COLOR = greyRamp[600]
 
 /**
  * A dashed running-best reference line spanning the plot width, absolutely positioned a
  * pixel `offset` from the given `anchor` edge. Shared by the single `hero` chart (anchored
  * to the baseline, `bottom`) and BOTH wings of the diverging dual chart (anchored to the
- * centre axis, `top`) so the three sites render one line treatment (charcoal-0, 1px dashed).
+ * centre axis, `top`) so the three sites render one line treatment (grey-0, 1px dashed).
  * Presentation-only + non-interactive — the numeric best lives in each chart's container
  * accessibility label, so the line itself is hidden from the a11y tree.
  *

package/src/components/custom/Workout/VolumeLandmarkBar.tsx

@@ -1,7 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, Text, type ViewProps } from 'react-native'
 import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
-import { primitiveColors } from '../../../theme/tokens/primitives'
+import { greyRamp } from '../../../theme/tokens/primitives'
 import { ZoneTrack } from './ZoneTrack'
 import { DataRow } from '../../ui/data-row/DataRow'
 import type { VolumeLandmarks } from './muscleTaxonomy'
@@ -11,9 +11,9 @@ import type { VolumeLandmarks } from './muscleTaxonomy'
 // BodyMap / MesoProgressBar so a muscle reads identically across the app.
 const HEAT = WORKOUT_TOKENS.heatmap
 
-// The muted, un-reached track colour — the same charcoal step ZoneTrack defaults
+// The muted, un-reached track colour — the same grey step ZoneTrack defaults
 // to, so the bar sits on the shared gauge-track surface.
-const NEUTRAL_TRACK = primitiveColors.charcoal[200]
+const NEUTRAL_TRACK = greyRamp[800]
 const MONO = 'monospace'
 
 export type VolumeZone = 'under' | 'maintenance' | 'productive' | 'approaching' | 'over'

package/src/components/custom/Workout/WeightBadge.test.tsx

@@ -2,6 +2,11 @@ import { describe, it, expect, vi } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { WeightBadge } from './WeightBadge'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+// Read from the token, not pinned: these used to be hand-copied hexes and
+// silently desynced when borders became alpha hairlines (TD-07.16).
+const T = getSemanticColors('dark')
 
 describe('WeightBadge', () => {
   it('renders value and default unit', () => {
@@ -71,7 +76,7 @@ describe('WeightBadge', () => {
     it('uses default border color when not a PR', () => {
       render(<WeightBadge value={225} />)
       expect(screen.getByTestId('weight-badge')).toHaveStyle({
-        borderTopColor: '#1F1F1F',
+        borderTopColor: T['hairline-default'],
       })
     })