Design Tokens

Spacing (spacing.ts)

export const spacing = {
  xxs: 4,
  xs: 8,
  sm: 12,
  md: 16,
  lg: 24,
  xl: 32,
  xxl: 48,
} as const;

export type SpacingToken = keyof typeof spacing;

Typography (typography.ts)

Map to iOS HIG type scale with Dynamic Type support:

import { Platform, TextStyle } from 'react-native';

export const typography = {
  largeTitle: { fontSize: 34, fontWeight: '700', lineHeight: 41 },
  title1: { fontSize: 28, fontWeight: '700', lineHeight: 34 },
  title2: { fontSize: 22, fontWeight: '700', lineHeight: 28 },
  title3: { fontSize: 20, fontWeight: '600', lineHeight: 25 },
  headline: { fontSize: 17, fontWeight: '600', lineHeight: 22 },
  body: { fontSize: 17, fontWeight: '400', lineHeight: 22 },
  callout: { fontSize: 16, fontWeight: '400', lineHeight: 21 },
  subheadline: { fontSize: 15, fontWeight: '400', lineHeight: 20 },
  footnote: { fontSize: 13, fontWeight: '400', lineHeight: 18 },
  caption1: { fontSize: 12, fontWeight: '400', lineHeight: 16 },
  caption2: { fontSize: 11, fontWeight: '400', lineHeight: 13 },
} as const satisfies Record<string, TextStyle>;

export type TypographyToken = keyof typeof typography;

Theme Hook (useTheme.ts)

import { useColorScheme } from 'react-native';
import { palette } from './colors';

export function useTheme() {
  const colorScheme = useColorScheme();
  const isDark = colorScheme === 'dark';

  const colors = Object.fromEntries(
    Object.entries(palette).map(([key, value]) => [
      key,
      isDark ? value.dark : value.light,
    ])
  ) as Record<keyof typeof palette, string>;

  return { colors, isDark };
}

ADAPTATION RULES

• If the project uses NativeWind: Create tokens as Tailwind config values in tailwind.config.js
• If the project uses Tamagui: Create tokens in the Tamagui config (tamagui.config.ts)
• If the project uses Unistyles: Create tokens as Unistyles themes
• If the project uses plain StyleSheet: Create the token files above with a useTheme hook

CHECKLIST

• Colors defined with light and dark variants
• Spacing scale created (consistent multiplier)
• Typography scale mapped to iOS HIG
• Theme hook or config created for the project's styling approach
• Existing hardcoded values identified for migration
• Token files are TypeScript with as const for type safety
• Updated Shipwright Context in CLAUDE.md with token file locations