@titan-design/react-ui 0.11.0 → 0.12.0

package/src/components/custom/Fatigue/SilverRedPalette.stories.tsx

@@ -8,7 +8,7 @@
  */
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
-import { primitiveColors } from '../../../theme/tokens/primitives'
+import { primitiveColors, greyRamp } from '../../../theme/tokens/primitives'
 import { alpha } from '../../../utils/colors'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import {
@@ -23,8 +23,8 @@ import {
   FONT_MONO,
 } from './fatigue-tokens'
 
-const PAGE_BG = primitiveColors.charcoal[900]
-const PANEL_BG = primitiveColors.charcoal[800]
+const PAGE_BG = greyRamp[975]
+const PANEL_BG = greyRamp[950]
 const t = getSemanticColors('dark')
 
 const meta: Meta = {
@@ -161,7 +161,7 @@ const PHASE_AXIS: SwatchDef[] = [
   },
   {
     name: 'Idle',
-    token: 'PHASE_AXIS_COLOR.idle · charcoal[300]',
+    token: 'PHASE_AXIS_COLOR.idle · grey[300]',
     value: PHASE_AXIS_COLOR.idle,
     note: 'Pauses / holds on the phase band.',
   },

package/src/components/custom/Fatigue/VelocityHero.stories.tsx

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { VelocityHero } from './VelocityHero'
-import { primitiveColors } from '../../../theme/tokens/primitives'
+import { greyRamp } from '../../../theme/tokens/primitives'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { MOCK_MEAN_VELOCITIES } from './fatigue-mock'
 
-const PAGE_BG = primitiveColors.charcoal[900]
-const PANEL_BG = primitiveColors.charcoal[800]
+const PAGE_BG = greyRamp[975]
+const PANEL_BG = greyRamp[950]
 const t = getSemanticColors('dark')
 
 const meta: Meta<typeof VelocityHero> = {

package/src/components/custom/Fatigue/VerdictHero.stories.tsx

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { VerdictHero } from './VerdictHero'
-import { primitiveColors } from '../../../theme/tokens/primitives'
+import { greyRamp } from '../../../theme/tokens/primitives'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { FATIGUE_STATES, WARMING_UP_MODEL } from './fatigue-mock'
 
-const PAGE_BG = primitiveColors.charcoal[900]
+const PAGE_BG = greyRamp[975]
 const t = getSemanticColors('dark')
 
 const meta: Meta<typeof VerdictHero> = {

package/src/components/custom/Fatigue/fatigue-tokens.ts

@@ -5,7 +5,7 @@
  * the family inherits the surface-ramp refresh when it lands.
  */
 import { getSemanticColors } from '../../../theme/tokens/semantic'
-import { primitiveColors, primitiveRamps } from '../../../theme/tokens/primitives'
+import { primitiveRamps, greyRamp } from '../../../theme/tokens/primitives'
 import type { DimensionTone, FatigueVerdictState, SamplePhase } from './fatigue-model'
 
 const t = getSemanticColors('dark')
@@ -34,9 +34,9 @@ export const STATE_LABEL: Record<FatigueVerdictState, string> = {
  * language: eccentric magenta, concentric cyan, hold and idle in the grey family.
  *
  * The idle grey has to read as BAND MATERIAL (a pause the lifter held), not as a
- * hole in the strip: at charcoal[300] it sat inside the surface-ramp's own value
+ * hole in the strip: at grey[300] it sat inside the surface-ramp's own value
  * range (`surface-raised` #31302F) so a short pause between ECC and CON read as a
- * gap. charcoal[200] clears every content plane while staying quieter than the two
+ * gap. grey[200] clears every content plane while staying quieter than the two
  * saturated phase tones, so the band reads contiguous and the phases still lead.
  *
  * `hold` stays GREY rather than taking a hue of its own. It was briefly amber, which
@@ -48,17 +48,17 @@ export const STATE_LABEL: Record<FatigueVerdictState, string> = {
  *
  * Hold and idle are separated by VALUE rather than hue, plus the `HOLD` label and the
  * fact that a hold PACES (it has a prescribed duration) while idle never fills:
- *   unfilled hold  charcoal[300]  — darker than idle
- *   idle           charcoal[200]
- *   filled hold    charcoal[100]  — brighter than idle
+ *   unfilled hold  grey[300]  — darker than idle
+ *   idle           grey[200]
+ *   filled hold    grey[100]  — brighter than idle
  * so a hold reads apart from dead time at any fill level, including the narrow runs
  * where the label drops out.
  */
 export const PHASE_AXIS_COLOR: Record<SamplePhase, string> = {
   eccentric: primitiveRamps.magenta[800],
   concentric: primitiveRamps.cyan[800],
-  hold: primitiveColors.charcoal[100],
-  idle: primitiveColors.charcoal[200],
+  hold: greyRamp[700],
+  idle: greyRamp[800],
 }
 
 /**
@@ -72,8 +72,8 @@ export const PHASE_AXIS_COLOR: Record<SamplePhase, string> = {
 export const PHASE_AXIS_BASE_COLOR: Record<SamplePhase, string> = {
   eccentric: primitiveRamps.magenta[950],
   concentric: primitiveRamps.cyan[950],
-  hold: primitiveColors.charcoal[300],
-  idle: primitiveColors.charcoal[200],
+  hold: greyRamp[900],
+  idle: greyRamp[800],
 }
 
 /**
@@ -114,7 +114,7 @@ export const PACING_TONE_MIN_CONTRAST = 4.5
 // SHADES OF RED when there's an issue. No greens, no ambers — those languages belong
 // to the verdict tones / velocity-loss bands, not here.
 /** On-track / at-or-above-working. */
-export const SILVER = primitiveColors.neutral[300]
+export const SILVER = greyRamp[200]
 export const RED_LIGHT = primitiveRamps.red[400]
 export const RED_MID = primitiveRamps.red[600]
 export const RED_DEEP = primitiveRamps.red[800]
@@ -124,7 +124,7 @@ export const GRIND_THRESHOLD = 0.35
 /** A quiet grey the controlled line dims toward as it drifts (never a colour): a dimmed
  *  cool grey in the SAME neutral family as SILVER, so a fully-drifted line reads dim-silver
  *  rather than sinking toward black. Shared with the ROM chart. */
-export const DRIFT_GREY = primitiveColors.neutral[600]
+export const DRIFT_GREY = greyRamp[700]
 
 export function clamp01(v: number): number {
   return Math.min(1, Math.max(0, v))

package/src/components/custom/Sidebar/Sidebar.tsx

@@ -64,7 +64,7 @@ export function Sidebar({
       <View
         style={{ width: currentWidth }}
         className={cn(
-          'h-full flex-col bg-surface-base border-r border-border transition-all duration-200',
+          'h-full flex-col bg-surface-base border-r border-hairline transition-all duration-200',
           className
         )}
         {...props}
@@ -85,7 +85,7 @@ export interface SidebarHeaderProps {
  */
 export function SidebarHeader({ children, className }: SidebarHeaderProps) {
   return (
-    <View className={cn('px-4 py-4 border-b border-border-subtle', className)}>
+    <View className={cn('px-4 py-4 border-b border-hairline-subtle', className)}>
       {children}
     </View>
   )
@@ -120,7 +120,7 @@ export interface SidebarFooterProps {
  */
 export function SidebarFooter({ children, className }: SidebarFooterProps) {
   return (
-    <View className={cn('px-2 py-4 border-t border-border-subtle', className)}>
+    <View className={cn('px-2 py-4 border-t border-hairline-subtle', className)}>
       {children}
     </View>
   )
@@ -252,6 +252,6 @@ export interface SidebarDividerProps {
  */
 export function SidebarDivider({ className }: SidebarDividerProps) {
   return (
-    <View className={cn('h-px mx-4 my-2 bg-border-subtle', className)} />
+    <View className={cn('h-px mx-4 my-2 bg-hairline-subtle', className)} />
   )
 }

package/src/components/custom/Table/Table.tsx

@@ -590,7 +590,7 @@ export function TableSelectAllCell({ className }: TableSelectAllCellProps) {
             ? 'bg-brand-primary border-brand-primary'
             : someSelected
             ? 'bg-brand-primary-subtle border-brand-primary'
-            : 'border-border-strong bg-transparent'
+            : 'border-hairline-strong bg-transparent'
         )}
       >
         {(allSelected || someSelected) && (
@@ -629,7 +629,7 @@ export function TableSelectCell({ rowId, className }: TableSelectCellProps) {
           'w-5 h-5 rounded border-2 items-center justify-center',
           isSelected
             ? 'bg-brand-primary border-brand-primary'
-            : 'border-border-strong bg-transparent web:hover:border-brand-primary'
+            : 'border-hairline-strong bg-transparent web:hover:border-brand-primary'
         )}
       >
         {isSelected && (

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

@@ -273,7 +273,7 @@ function WorkoutHeader({
         </View>
       </View>
       <View
-        className="bg-border"
+        className="bg-hairline"
         style={{ height: 4, borderRadius: 2 }}
         testID="active-workout-page-progress-track"
       >
@@ -305,7 +305,7 @@ function ExerciseList({ groups, focusedId, onToggle }: ExerciseListProps) {
           return (
             <View
               key={group.exercise.id}
-              className="bg-surface-elevated border-border"
+              className="bg-surface-elevated border-hairline"
               style={{
                 borderWidth: 1,
                 borderRadius: 12,
@@ -399,7 +399,7 @@ export function ActiveWorkoutPage({
 
       {(showRest || showInput) && (
         <View
-          style={{ borderTopWidth: 1, borderTopColor: resolveColor('border-default') }}
+          style={{ borderTopWidth: 1, borderTopColor: resolveColor('hairline-default') }}
           testID="active-workout-page-bottom-bar"
         >
           {showRest && rest != null ? (

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

@@ -3,6 +3,11 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { Text, View } from 'react-native'
 import { BaseBadge } from './BaseBadge'
+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('BaseBadge', () => {
   it('renders children', () => {
@@ -12,7 +17,7 @@ describe('BaseBadge', () => {
 
   it('defaults to the plain variant border color', () => {
     render(<BaseBadge testID="bb"><Text>x</Text></BaseBadge>)
-    expect(screen.getByTestId('bb')).toHaveStyle({ borderTopColor: '#1F1F1F' })
+    expect(screen.getByTestId('bb')).toHaveStyle({ borderTopColor: T['hairline-default'] })
   })
 
   it('applies the pr variant border color', () => {

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

@@ -30,7 +30,7 @@ export const baseBadgeSizeConfig: Record<
 }
 
 const variantColors: Record<BaseBadgeVariant, { backgroundColor: string; borderColor: string }> = {
-  plain: { backgroundColor: t['surface-raised'], borderColor: '#1F1F1F' },
+  plain: { backgroundColor: t['surface-raised'], borderColor: t['hairline-default'] },
   pr: {
     backgroundColor: 'rgba(255, 121, 0, 0.12)',
     borderColor: 'rgba(255, 121, 0, 0.3)',

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

@@ -278,7 +278,7 @@ function ViewToggle({ view, onViewChange }: ViewToggleProps) {
               borderRadius: 9999,
               backgroundColor: active ? 'rgba(255,121,0,0.16)' : 'transparent',
               borderWidth: 1,
-              borderColor: active ? BRAND_PRIMARY : resolveColor('border-strong'),
+              borderColor: active ? BRAND_PRIMARY : resolveColor('hairline-strong'),
             }}
             testID={`body-map-toggle-${side}`}
           >
@@ -324,7 +324,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }: MuscleButtonProps)
         paddingVertical: 3,
         borderRadius: 9999,
         borderWidth: 1,
-        borderColor: highlighted ? BRAND_PRIMARY : resolveColor('border-default'),
+        borderColor: highlighted ? BRAND_PRIMARY : resolveColor('hairline-default'),
       }}
       testID={`body-map-muscle-${entry.key}`}
     >

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/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}.
  */