Generate Consistent UI Code with Design Tokens

A React Native design-system reference for using token-based core components (Box, HStack/VStack, Text, Button, Input, Card) instead of raw platform components or hard-coded values. Defines the token scales: spacing tokens $1-$8 (4px to 32px), semantic color tokens ($textPrimary, $textSecondary, $textTertiary, $primary500, $statusError, $statusSuccess), and typography size tokens $xs-$2xl (12px to 24px). Documents each core component's API - Box as the base layout primitive, HStack/VStack for flex layouts, Text and Button (with solid, outline, ghost, and link variants) for typography and actions, Input with label, error, and placeholder props for forms, and Card with CardHeader and CardBody for content containers - plus common layout patterns for a full screen (Screen, ScreenHeader, ScreenContent), a form (stacked Inputs plus a loading Button), and a list item row (Avatar, title/subtitle VStack, chevron icon). Anti-patterns are shown side by side with the fix: hard-coded padding or colors in inline styles versus token props, importing raw View or Text from react-native versus importing Box or Text from components/core. Also shows a component-props pattern for building new components that accept only token values (for example padding?: '$2' | '$4' | '$6') rather than arbitrary numbers.

Use when building or reviewing React Native UI screens, forms, or list views in a codebase that has this token-based core component library, and when writing new reusable components that should accept token values rather than raw numbers or hex colors. Not applicable to codebases without this design system's token setup, or to web-only React projects using a different component library - the API surface (Box, HStack, VStack, dollar-prefixed tokens) is specific to this system.

Input is a UI requirement - a screen, form, list, or card. Output is JSX built from the core component set with token props instead of raw style objects, following the documented layout patterns for screens, forms, and list rows.

// WRONG - Hard-coded values
<View style={{ padding: 16, backgroundColor: '#fff' }}>

// CORRECT - Design tokens
<Box padding="$4" backgroundColor="$backgroundPrimary">


// WRONG - Raw platform components
import { View, Text } from 'react-native';

// CORRECT - Core components
import { Box, Text } from 'components/core';

Works with the react-ui-patterns skill for managing UI states, the testing-patterns skill for mocking core components in tests, and Storybook for documenting component variants.

React Native developers working in a codebase built on this token-based design system who need the exact token names, component props, and layout patterns rather than re-deriving them from the library's source.