Design System & Tokens Both

TapTidy maintains visual consistency across Web and Android through a single canonical design token repository.

Design Token Pipeline

All design decisions (color palettes, priority badges, spacing scales, border radii, shadows, and typography) are defined in design-system/tokens.json.

The code generation pipeline compiles these tokens into platform-native outputs:

• Web PWA: Generates src/ui/src/generated/design-tokens.css and TypeScript types in src/ui/src/generated/designTokens.ts.
• Android Compose: Generates Kotlin constants in android/app/src/main/java/com/taptidy/app/designsystem/generated/DesignTokens.kt.

Component Galleries & Previews

• Web: Storybook component catalog located under src/ui/src/stories.
• Android: Jetpack Compose @Preview functions and Showkase component browser in debug builds.

Token Update Workflow

1. Modify token values in design-system/tokens.json.
2. Generate platform artifacts: npm run tokens:generate.
3. Verify alignment: npm run tokens:check.