@titan-design/react-ui 0.11.0 → 0.12.1

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/README.md

@@ -19,7 +19,7 @@ SideNav ...................... organism — the 60px left rail (Shell/SideNav)
 └─ (accent bar) .............. bg-brand-primary edge bar on the active item
 ```
 
-Decisions locked 2026-07-08 (specimen `coordination/design-explorations/shell/S2-sidenav/`): lucide glyphs
+Decisions locked 2026-07-08 (specimen `sources/design/shell/S2-sidenav/`): lucide glyphs
 (activity · history · layers · figure) · **Plan** label (narrower than "Program") · active = **left accent
 bar** (short, centered on the icon+label) · **60px** icon+micro-label · live cue = **muted-green label**
 (`status-live-muted`) on the Live item while a set runs off-Live · four items, no footer, no top-nav. Fixed

package/src/components/shell/SessionRailSpecimen.stories.tsx

@@ -2,7 +2,7 @@
  * S3 · Session Rail — SPECIMEN (rapid-prototype, not yet a hardened component).
  *
  * A faithful React port of the R2/C3 converged rail
- * (coordination/design-explorations/drilldown-pass/r2-synthesis/gallery.html), brought into
+ * (sources/design/drilldown-pass/r2-synthesis/gallery.html), brought into
  * titan Storybook so we can iterate with the token system + real titan components + side-by-side.
  * Raw hex lives here on purpose — it mirrors the gallery 1:1; tokenization happens at harden.
  *

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}

package/src/components/ui/form-field/FormField.tsx

@@ -253,7 +253,7 @@ export function FormActions({
     <View
       className={cn(
         'flex-row items-center gap-3 pt-4',
-        'border-t border-border mt-4',
+        'border-t border-hairline mt-4',
         alignStyles[align],
         className
       )}

package/src/components/ui/help-tip/HelpTip.tsx

@@ -155,7 +155,7 @@ export function HelpTip({
           className={cn(
             'absolute z-50',
             'bg-surface-elevated rounded-lg shadow-lg',
-            'border border-border',
+            'border border-hairline',
             'px-3 py-2',
             placementStyles[placement],
             tooltipClassName

package/src/components/ui/menu/Menu.tsx

@@ -116,7 +116,7 @@ export function MenuList({ children, className }: MenuListProps) {
       <View
         className={cn(
           'absolute z-50 top-full left-0 mt-1 min-w-[160px]',
-          'bg-surface-elevated rounded-lg shadow-lg border border-border',
+          'bg-surface-elevated rounded-lg shadow-lg border border-hairline',
           'py-1 overflow-hidden',
           className
         )}
@@ -195,7 +195,7 @@ export interface MenuDividerProps {
  * Divider between menu items.
  */
 export function MenuDivider({ className }: MenuDividerProps) {
-  return <View className={cn('h-px bg-border my-1', className)} />
+  return <View className={cn('h-px bg-hairline my-1', className)} />
 }
 
 export interface MenuGroupProps {

package/src/components/ui/pill/Pill.tsx

@@ -27,7 +27,7 @@ export interface PillProps extends ViewProps {
 
 const variantColorStyles: Record<PillVariant, Record<PillColor, string>> = {
   subtle: {
-    default: 'bg-surface-raised border-border-subtle text-text-secondary',
+    default: 'bg-surface-raised border-hairline-subtle text-text-secondary',
     primary: 'bg-brand-primary/10 border-brand-primary/25 text-brand-primary',
     secondary: 'bg-brand-secondary/10 border-brand-secondary/25 text-brand-secondary',
     success: 'bg-status-success/10 border-status-success/25 text-status-success',
@@ -36,7 +36,7 @@ const variantColorStyles: Record<PillVariant, Record<PillColor, string>> = {
     info: 'bg-status-info/10 border-status-info/25 text-status-info',
   },
   outline: {
-    default: 'border-border text-text-secondary',
+    default: 'border-hairline text-text-secondary',
     primary: 'border-brand-primary text-brand-primary',
     secondary: 'border-brand-secondary text-brand-secondary',
     success: 'border-status-success text-status-success',

package/src/components/ui/popover/Popover.stories.tsx

@@ -152,12 +152,12 @@ export const WithFormContent: Story = {
           <Text className="text-text-secondary text-xs">
             Enter your new display name below.
           </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">John Doe</Text>
           </View>
           <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
             <PopoverCloseButton>
-              <View className="px-3 py-1.5 rounded-md bg-surface-elevated border border-border">
+              <View className="px-3 py-1.5 rounded-md bg-surface-elevated border border-hairline">
                 <Text className="text-text-primary text-sm">Cancel</Text>
               </View>
             </PopoverCloseButton>

package/src/components/ui/popover/Popover.tsx

@@ -188,7 +188,7 @@ export function PopoverContent({ children, className }: PopoverContentProps) {
       <View
         className={cn(
           'absolute z-50 min-w-[200px]',
-          'bg-surface-elevated rounded-lg shadow-lg border border-border',
+          'bg-surface-elevated rounded-lg shadow-lg border border-hairline',
           'p-4',
           placementStyles[placement],
           className

package/src/components/ui/progress/Progress.tsx

@@ -230,7 +230,7 @@ export function CircularProgress({
             cy={center}
             r={radius}
             fill="none"
-            stroke="var(--color-border-default)"
+            stroke="var(--color-hairline-default)"
             strokeWidth={strokeWidth}
           />
           {/* Progress arc */}
@@ -325,7 +325,7 @@ export function ProgressSteps({
               className={cn(
                 'rounded-full',
                 dot,
-                index <= currentStep ? colorStyles[color] : 'bg-border-strong'
+                index <= currentStep ? colorStyles[color] : 'bg-hairline-strong'
               )}
             />
 
@@ -335,7 +335,7 @@ export function ProgressSteps({
                 className={cn(
                   'flex-1 mx-1',
                   connector,
-                  index < currentStep ? colorStyles[color] : 'bg-border-strong'
+                  index < currentStep ? colorStyles[color] : 'bg-hairline-strong'
                 )}
               />
             )}

package/src/components/ui/radio/Radio.stories.tsx

@@ -188,7 +188,7 @@ export const FormExample: Story = {
           <Radio value="yearly">Yearly (save 20%)</Radio>
         </RadioGroup>
         
-        <View className="pt-4 border-t border-border">
+        <View className="pt-4 border-t border-hairline">
           <Text className="text-sm text-text-secondary">
             Selected: {plan} plan, billed {billing}
           </Text>

package/src/components/ui/radio/Radio.tsx

@@ -117,10 +117,10 @@ const sizeConfig: Record<RadioSize, { outer: string; inner: string; text: string
 }
 
 const colorStyles: Record<RadioColor, { checked: string; unchecked: string }> = {
-  primary: { checked: 'border-brand-primary bg-brand-primary', unchecked: 'border-border-strong' },
-  secondary: { checked: 'border-brand-secondary bg-brand-secondary', unchecked: 'border-border-strong' },
-  success: { checked: 'border-status-success bg-status-success', unchecked: 'border-border-strong' },
-  error: { checked: 'border-status-error bg-status-error', unchecked: 'border-border-strong' },
+  primary: { checked: 'border-brand-primary bg-brand-primary', unchecked: 'border-hairline-strong' },
+  secondary: { checked: 'border-brand-secondary bg-brand-secondary', unchecked: 'border-hairline-strong' },
+  success: { checked: 'border-status-success bg-status-success', unchecked: 'border-hairline-strong' },
+  error: { checked: 'border-status-error bg-status-error', unchecked: 'border-hairline-strong' },
 }
 
 /**

package/src/components/ui/select/Select.tsx

@@ -145,7 +145,7 @@ export function Select<T extends string = string>({
             isInvalid
               ? 'border-border-input-error'
               : variant === 'filled'
-                ? 'border-border-subtle'
+                ? 'border-hairline-subtle'
                 : 'border-border-input',
             !isDisabled && !isInvalid && 'web:hover:border-border-input-hover',
             isOpen && 'border-border-input-focus',
@@ -187,7 +187,7 @@ export function Select<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'
               )}
             >
@@ -229,7 +229,7 @@ function SelectOption<T>({ option }: SelectOptionComponentProps<T>) {
         <View
           className={cn(
             'w-4 h-4 mr-3 rounded border',
-            selected ? 'bg-brand-primary border-brand-primary' : 'border-border-strong'
+            selected ? 'bg-brand-primary border-brand-primary' : 'border-hairline-strong'
           )}
         >
           {selected && <Text className="text-white text-xs text-center">✓</Text>}

package/src/components/ui/surface/Surface.stories.tsx

@@ -15,8 +15,8 @@ const meta: Meta<typeof Surface> = {
     },
     level: {
       control: 'select',
-      options: ['inset', 'background', 'base', 'elevated', 'raised', 'overlay'],
-      description: 'Named charcoal plane (flat background from a semantic token)',
+      options: ['frame', 'background', 'base', 'elevated', 'raised', 'overlay'],
+      description: 'Named grey plane (flat background from a semantic token)',
     },
     pressed: {
       control: 'boolean',
@@ -88,7 +88,7 @@ export const WithGlow: Story = {
   ),
 }
 
-// The named-plane model: flat, full-bleed charcoal planes straight from the
+// The named-plane model: flat, full-bleed grey planes straight from the
 // semantic surface tokens — reaching the darker nav/page shades the numeric
 // lighten model can't. These back the shell / rail / stage.
 export const NamedPlanes: Story = {