@titan-design/react-ui 0.11.0 → 0.12.0

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'],
       })
     })
 

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

@@ -8,6 +8,7 @@ import {
   type BaseBadgeProps,
 } from './BaseBadge'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 export type WeightBadgeSize = BaseBadgeSize
 
@@ -43,7 +44,7 @@ export function WeightBadge({
   ...props
 }: WeightBadgeProps) {
   const config = baseBadgeSizeConfig[size]
-  const textColor = isPr ? getSemanticColors('dark')['brand-primary'] : '#9CA3AF'
+  const textColor = isPr ? getSemanticColors('dark')['brand-primary'] : greyRamp[400]
   // Dumbbell reads clearly as a weight/strength metric and is unit-agnostic
   // across estimated-1RM and N-rep-max contexts (vs. TrendingUp which implies
   // change/trend rather than a load value).

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

@@ -8,6 +8,8 @@ import {
 } from './MuscleGroupChip'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 
+const HAIRLINE_DEFAULT = getSemanticColors('dark')['hairline-default']
+
 const t = getSemanticColors('dark')
 
 export type WorkoutStatus = 'completed' | 'today' | 'upcoming'
@@ -48,7 +50,7 @@ export interface WorkoutCardProps extends ViewProps {
 const COLORS = {
   statusSuccess: t['status-success'],
   brandPrimary: t['brand-primary'],
-  borderDefault: '#1F1F1F',
+  borderDefault: HAIRLINE_DEFAULT,
   brandPrimarySubtle: 'rgba(255,121,0,0.06)',
 }
 

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

@@ -3,6 +3,9 @@ import { useEffect, useState } from 'react'
 import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { WORKOUT_PILL_DELOAD } from '../../../theme/extracted-colors-dataviz'
+import { greyRamp } from '../../../theme/tokens/primitives'
+
+const HAIRLINE_DEFAULT = getSemanticColors('dark')['hairline-default']
 
 const t = getSemanticColors('dark')
 
@@ -35,7 +38,7 @@ const statusBorderStyles: Record<WorkoutPillStatus, Record<string, unknown>> = {
   completed: { borderWidth: 1, borderColor: 'rgba(46,213,115,0.3)' },
   current: { borderWidth: 1, borderColor: 'rgba(255,121,0,0.3)' },
   next: { borderWidth: 1, borderColor: 'rgba(255,121,0,0.4)' },
-  upcoming: { borderWidth: 1, borderColor: '#1F1F1F' },
+  upcoming: { borderWidth: 1, borderColor: HAIRLINE_DEFAULT },
   missed: { borderWidth: 1, borderColor: 'rgba(209,67,67,0.25)' },
   deload: { borderWidth: 1, borderColor: 'rgba(186,41,150,0.3)' },
 }
@@ -44,7 +47,7 @@ const textColors: Record<WorkoutPillStatus, string> = {
   completed: t['status-success'],
   current: t['brand-primary'],
   next: t['brand-primary'],
-  upcoming: '#6B7280',
+  upcoming: greyRamp[500],
   missed: 'rgba(209,67,67,0.7)',
   deload: WORKOUT_PILL_DELOAD,
 }

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

@@ -2,7 +2,7 @@
 import { useState } from 'react'
 import { View, Text, type ViewProps, type DimensionValue, type LayoutChangeEvent } from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
-import { primitiveColors } from '../../../theme/tokens/primitives'
+import { primitiveColors, greyRamp } from '../../../theme/tokens/primitives'
 import { alpha } from '../../../utils/colors'
 import { Tooltip } from '../../ui/tooltip/Tooltip'
 
@@ -13,8 +13,8 @@ function glowShadow(color: string): string {
   return `0 0 5px 1px ${alpha(color, 0.3)}, 0 0 10px 3px ${alpha(color, 0.12)}`
 }
 
-/** Muted, un-reached track colour — a charcoal step, matches the IntensityBar track family. */
-const DEFAULT_TRACK_COLOR = primitiveColors.charcoal[200]
+/** Muted, un-reached track colour — a grey step, matches the IntensityBar track family. */
+const DEFAULT_TRACK_COLOR = greyRamp[800]
 /** Default needle / fill-marker colour. */
 const DEFAULT_MARKER_COLOR = primitiveColors.white
 /** Tick mark + tick label colour. */
@@ -139,7 +139,7 @@ export interface ZoneTrackProps extends ViewProps {
   trackHeight?: number
   /** How far a needle marker overhangs the track top + bottom, in px. Overrides the `size` default (6 default / 9 wall). */
   needleOverhang?: number
-  /** Muted colour of the track behind / beyond the fill. Default a charcoal step. */
+  /** Muted colour of the track behind / beyond the fill. Default a grey step. */
   trackColor?: string
   className?: string
 }

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

@@ -5,19 +5,25 @@
  */
 import type { ReactNode } from 'react'
 import { TempoDisplay } from './TempoDisplay'
+import { greyRamp } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
 // ---- geometry
 export const RAIL_W = 232
 export const SET_GAP = 5
 
-// ---- surface + text tokens (dark theme; charcoal + neutral ramps)
-export const GREY = '#2C2C2C' // charcoal 300 — upcoming/placeholder
-export const BORDER_SUBTLE = '#1C1C1C' // charcoal 500 — row dividers
-export const T_PRIMARY = '#F3F4F6' // neutral 100
-export const T_SECONDARY = '#9CA3AF' // neutral 400
-export const T_TERTIARY = '#6B7280' // neutral 500
-export const RAISED = '#1F1F1F' // charcoal 400 — nav + heading raised plane
-export const INSET = '#131313' // charcoal 800 — sunk exercise-list column
+// ---- surface + text tokens (dark theme)
+// These were hand-copied hexes labelled with their grey/neutral steps, which
+// is exactly how they silently stopped matching the ramps they named. They read
+// from the tokens now, so a retune reaches them.
+const T = getSemanticColors('dark')
+export const GREY = greyRamp[900] // upcoming/placeholder
+export const BORDER_SUBTLE = greyRamp[950] // row dividers
+export const T_PRIMARY = T['text-primary']
+export const T_SECONDARY = T['text-secondary']
+export const T_TERTIARY = T['text-tertiary']
+export const RAISED = greyRamp[925] // nav + heading raised plane
+export const INSET = greyRamp[975] // sunk exercise-list column
 // depth lives on the sunk list: inner shadow from the heading (top) + nav (left). Raised plane is flat.
 export const INSET_SHADOW =
   'inset 0 9px 12px -6px rgba(0,0,0,0.85), inset 7px 0 10px -6px rgba(0,0,0,0.7), inset 0 -1px 0 rgba(255,255,255,0.02)'

package/src/components/custom/Workout/velocity-story-kit.tsx

@@ -20,13 +20,13 @@ import type { ReactNode } from 'react'
 import type { Decorator } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { VelocityStrip, DualVelocityStrip, type VelocitySet } from './VelocityStrip'
-import { surfaceRampDark } from '../../../theme/tokens/primitives'
+import { greyRamp } from '../../../theme/tokens/primitives'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 
 const t = getSemanticColors('dark')
 
 /** The real dark surface-background plane — stories sit on the token, not an ad-hoc grey. */
-export const SURFACE_BG = surfaceRampDark.background
+export const SURFACE_BG = greyRamp[950]
 
 export const VIEW_LABEL = t['text-secondary']
 export const VIEW_NOTE = t['text-tertiary']

package/src/components/custom/charts/SetBarChart.tsx

@@ -20,7 +20,7 @@ import {
   type LayoutChangeEvent,
 } from 'react-native'
 import { primitiveRamps } from '../../../theme/tokens/primitives'
-import { barPaper } from '../../../theme/bar-paper'
+import { barPaper } from '../../../theme/materials'
 import { useOnSurfaceColor, useSurface, surfaceBackground } from '../../ui/surface/SurfaceContext'
 import { useLiveRepGrowth } from './live-rep-growth'
 
@@ -313,7 +313,7 @@ export function SetBarChart({
   const flipStyle = flip ? ({ transform: [{ scaleY: -1 as number }] } as const) : null
 
   // Planned/to-do reps + the baseline draw in a SURFACE-relative neutral (on-surface tertiary)
-  // so they stay legible on every plane instead of a fixed charcoal.
+  // so they stay legible on every plane instead of a fixed grey.
   const placeholderColor = useOnSurfaceColor('tertiary')
   // The expanded strip's solid to-do tone: the surface plane blended toward the neutral (the same
   // relative model), so a `todoVariant="solid"` section holds ~constant contrast on every plane.
@@ -590,7 +590,7 @@ export interface SideRailSection {
 /**
  * The ONE shared gutter/side-rail lockup used by BOTH the single hero and the diverging dual, so a
  * single chart is pixel-identical to the dual's upper half — going dual only adds a lower section.
- * A fixed-width gutter (34px hero / 18px rail) with the `border-border` right hairline (the vertical
+ * A fixed-width gutter (34px hero / 18px rail) with the `border-hairline` right hairline (the vertical
  * axis) and one rotated, height-responsive, initials-collapsing label per section (each `sectionExtent`
  * tall). The single passes ONE section; the dual passes two (up + down wings). Rendered null when no
  * section carries a label. The rotate lives on a wrapper sized to `sectionExtent` so `numberOfLines`

package/src/components/custom/stepper/Stepper.stories.tsx

@@ -137,7 +137,7 @@ export const VerticalWithContent: Story = {
             <Text className="text-text-secondary text-sm">
               Fill in your profile details to continue.
             </Text>
-            <View className="bg-surface-input border border-border rounded-md px-3 py-2">
+            <View className="bg-surface-input border border-hairline rounded-md px-3 py-2">
               <Text className="text-text-secondary text-sm">Display Name</Text>
             </View>
           </View>

package/src/components/custom/stepper/Stepper.tsx

@@ -91,7 +91,7 @@ function StepConnector({ index }: StepConnectorProps) {
       <View
         className={cn(
           'flex-1 h-0.5 mx-2',
-          isCompleted ? 'bg-brand-primary' : 'bg-border'
+          isCompleted ? 'bg-brand-primary' : 'bg-hairline'
         )}
       />
     )
@@ -101,7 +101,7 @@ function StepConnector({ index }: StepConnectorProps) {
     <View
       className={cn(
         'w-0.5 h-8 ml-4 my-1',
-        isCompleted ? 'bg-brand-primary' : 'bg-border'
+        isCompleted ? 'bg-brand-primary' : 'bg-hairline'
       )}
     />
   )
@@ -171,7 +171,7 @@ export function StepIndicator({
   const statusStyles: Record<StepStatus, string> = {
     completed: 'bg-brand-primary border-brand-primary',
     active: 'bg-brand-primary border-brand-primary',
-    upcoming: 'bg-surface-base border-border-strong',
+    upcoming: 'bg-surface-base border-hairline-strong',
     error: 'bg-status-error border-status-error',
   }
 

package/src/components/shell/DeviceMenu.tsx

@@ -43,7 +43,7 @@ export function DeviceMenu({
       <PopoverTrigger>
         <DeviceIndicator status={status} />
       </PopoverTrigger>
-      <PopoverContent className="right-0 left-auto mt-[10px] w-[326px] bg-surface-elevated border border-border-strong rounded-[10px] p-[7px]">
+      <PopoverContent className="right-0 left-auto mt-[10px] w-[326px] bg-surface-elevated border border-hairline-strong rounded-[10px] p-[7px]">
         <Typography
           variant="monoLabel"
           color="tertiary"
@@ -52,7 +52,7 @@ export function DeviceMenu({
           Devices — {boundCount} bound · {availCount} available
         </Typography>
         {devices.map((device, i) => (
-          <View key={device.id} className={cn(i > 0 && 'border-t border-border')}>
+          <View key={device.id} className={cn(i > 0 && 'border-t border-hairline')}>
             <DeviceRow
               device={device}
               onPress={onSelectDevice ? () => onSelectDevice(device) : undefined}

package/src/components/shell/SideNav.tsx

@@ -55,7 +55,7 @@ export function SideNav({
     <View
       accessibilityRole="tablist"
       className={cn(
-        'w-[60px] items-center gap-[6px] border-r border-border bg-background-base py-3',
+        'w-[60px] items-center gap-[6px] border-r border-hairline bg-background-base py-3',
         className
       )}
     >

package/src/components/shell/TopBar.tsx

@@ -58,7 +58,7 @@ export function TopBar({
       // shared chrome gradient (web); solid bg-surface-elevated is the native fallback
       style={surfaceGradient.chrome() as object}
       className={cn(
-        'h-[46px] flex-row items-center gap-[14px] px-4 bg-surface-elevated border-b border-border',
+        'h-[46px] flex-row items-center gap-[14px] px-4 bg-surface-elevated border-b border-hairline',
         className
       )}
     >

package/src/components/ui/autocomplete/Autocomplete.stories.tsx

@@ -287,7 +287,7 @@ export const FormExample: Story = {
           isRequired
         />
 
-        <View className="pt-2 border-t border-border">
+        <View className="pt-2 border-t border-hairline">
           <Text className="text-sm text-text-secondary">
             Selected: {country ? `${countryOptions.find(c => c.value === country)?.label}` : '-'}
             {city ? `, ${cityOptions[country!]?.find(c => c.value === city)?.label}` : ''}

package/src/components/ui/autocomplete/Autocomplete.tsx

@@ -238,7 +238,7 @@ export function Autocomplete<T extends string = string>({
           <View
             className={cn(
               'absolute z-50 top-full left-0 right-0 mt-1',
-              'bg-surface-elevated rounded-md shadow-lg border border-border',
+              'bg-surface-elevated rounded-md shadow-lg border border-hairline',
               'max-h-60 overflow-hidden'
             )}
           >

package/src/components/ui/avatar/Avatar.tsx

@@ -67,7 +67,7 @@ export function Avatar({
       accessibilityLabel={alt || resolvedFallback || 'Avatar'}
       className={cn(
         'items-center justify-center rounded-full overflow-hidden',
-        !nameColor && 'bg-border-strong',
+        !nameColor && 'bg-hairline-strong',
         styles.container,
         className
       )}
@@ -102,7 +102,7 @@ const badgeColors: Record<string, string> = {
   success: 'bg-status-success',
   error: 'bg-status-error',
   warning: 'bg-status-warning',
-  default: 'bg-border-strong',
+  default: 'bg-hairline-strong',
 }
 
 /**

package/src/components/ui/badge/Badge.tsx

@@ -25,7 +25,7 @@ export interface BadgeProps extends ViewProps {
 
 const variantColorStyles: Record<BadgeVariant, Record<BadgeColor, string>> = {
   solid: {
-    default: 'bg-border-strong text-text-inverse',
+    default: 'bg-hairline-strong text-text-inverse',
     primary: 'bg-brand-primary text-text-inverse',
     secondary: 'bg-brand-secondary text-text-inverse',
     success: 'bg-status-success text-text-inverse',
@@ -43,7 +43,7 @@ const variantColorStyles: Record<BadgeVariant, Record<BadgeColor, string>> = {
     info: 'bg-status-info-subtle text-status-info',
   },
   outline: {
-    default: 'border border-border-strong text-text-secondary',
+    default: 'border border-hairline-strong text-text-secondary',
     primary: 'border border-brand-primary text-brand-primary',
     secondary: 'border border-brand-secondary text-brand-secondary',
     success: 'border border-status-success text-status-success',

package/src/components/ui/card/Card.tsx

@@ -45,10 +45,10 @@ export interface CardProps extends ViewProps {
 
 const variantStyles: Record<CardVariant, string> = {
   elevated: '', // Will be set dynamically via elevation system
-  outline: 'border-2 border-border-strong',  // Thicker border with stronger contrast
+  outline: 'border-2 border-hairline-strong',  // Thicker border with stronger contrast
   filled: '', // Will be set dynamically via elevation system
-  accent: 'border border-border',
-  subtle: 'border border-border-subtle',
+  accent: 'border border-hairline',
+  subtle: 'border border-hairline-subtle',
 }
 
 /**

package/src/components/ui/checkbox/Checkbox.tsx

@@ -91,7 +91,7 @@ export const Checkbox = forwardRef<View, CheckboxProps>(function Checkbox(
           styles.box,
           isChecked || isIndeterminate
             ? 'bg-brand-primary border-brand-primary'
-            : 'bg-transparent border-border',
+            : 'bg-transparent border-hairline',
           isInvalid && 'border-status-error',
           !isDisabled && 'web:hover:border-brand-primary'
         )}

package/src/components/ui/collapse/Collapse.tsx

@@ -180,7 +180,7 @@ export function Accordion({
 
   return (
     <AccordionContext.Provider value={{ openIndices, toggleIndex, allowMultiple }}>
-      <View className={cn('w-full divide-y divide-border', className)} {...props}>
+      <View className={cn('w-full divide-y divide-hairline', className)} {...props}>
         {React.Children.map(children, (child, index) => {
           if (React.isValidElement(child)) {
             return React.cloneElement(child as React.ReactElement<any>, { index })

package/src/components/ui/data-row/DataRow.stories.tsx

@@ -73,6 +73,6 @@ export const CustomClassName: Story = {
   args: {
     label: 'Bordered Row',
     value: 'With custom styles',
-    className: 'border-b border-border px-4',
+    className: 'border-b border-hairline px-4',
   },
 }

package/src/components/ui/drawer/Drawer.tsx

@@ -125,7 +125,7 @@ export function Drawer({
         >
           {/* Header */}
           {(title || showCloseButton) && (
-            <View className="flex-row items-center justify-between px-4 py-3 border-b border-border">
+            <View className="flex-row items-center justify-between px-4 py-3 border-b border-hairline">
               {title && (
                 <Text className="text-lg font-semibold text-text-primary">
                   {title}
@@ -165,7 +165,7 @@ export interface DrawerHeaderProps extends ViewProps {
 export function DrawerHeader({ className, children, ...props }: DrawerHeaderProps) {
   return (
     <View
-      className={cn('px-4 py-3 border-b border-border', className)}
+      className={cn('px-4 py-3 border-b border-hairline', className)}
       {...props}
     >
       {children}
@@ -217,7 +217,7 @@ export function DrawerFooter({ className, children, ...props }: DrawerFooterProp
     <View
       className={cn(
         'flex-row items-center justify-end gap-3',
-        'px-4 py-3 border-t border-border',
+        'px-4 py-3 border-t border-hairline',
         className
       )}
       {...props}