Skip to main content

Design System

AppX builds every app on a consistent design system — a constants/ directory holding your colors, typography, and spacing. Because every screen references it instead of hardcoding values, a global design change is a one-line edit: change the file (or just ask in chat), and the whole app updates. It's real Expo + React Native code, so you can read and tweak any of it.

Project Structure​

Generated apps include:

constants/
  colors.ts        ← Color palette and semantic colors
  typography.ts    ← Font sizes, weights, line heights
  spacing.ts       ← Padding and margin scale
  theme.ts         ← Combined theme export (optional)

Colors​

constants/colors.ts defines all the colors used in your app:

export const colors = {
  // Brand
  primary: '#3b82f6',      // Main accent color
  primaryDark: '#2563eb',  // Pressed state
  secondary: '#06b6d4',    // Secondary accent

  // Neutrals
  background: '#ffffff',
  surface: '#f9fafb',
  border: '#e5e7eb',

  // Text
  textPrimary: '#111827',
  textSecondary: '#6b7280',
  textDisabled: '#d1d5db',

  // Semantic
  success: '#22c55e',
  warning: '#f59e0b',
  error: '#ef4444',
  info: '#3b82f6',
};

Every component references colors.* rather than hardcoding hex values. To change the primary color across your entire app:

  1. Open constants/colors.ts in the editor
  2. Change primary: '#3b82f6' to your color
  3. Save — all components using colors.primary update instantly

Or just describe it in chat: "Change the primary brand color to purple #7c3aed" — AppX will update the colors file.

Typography​

constants/typography.ts defines text styles:

export const typography = {
  // Sizes
  xs: 12,
  sm: 14,
  base: 16,
  lg: 18,
  xl: 20,
  '2xl': 24,
  '3xl': 30,
  '4xl': 36,

  // Weights
  regular: '400' as const,
  medium: '500' as const,
  semibold: '600' as const,
  bold: '700' as const,

  // Line heights
  tight: 1.25,
  normal: 1.5,
  relaxed: 1.75,
};

Usage in components:

title: {
  fontSize: typography['2xl'],
  fontWeight: typography.bold,
  lineHeight: typography['2xl'] * typography.tight,
}

Dark Mode​

If you ask AppX to add dark mode, it generates a dual-color system:

export const lightColors = {
  background: '#ffffff',
  surface: '#f9fafb',
  textPrimary: '#111827',
  // ...
};

export const darkColors = {
  background: '#111827',
  surface: '#1f2937',
  textPrimary: '#f9fafb',
  // ...
};

A useTheme() hook reads the device's color scheme preference and returns the right palette.

To add dark mode to your app:

"Add dark mode support. The app should follow the device's system setting (light/dark)."

Icons​

AppX uses lucide-react-native for all icons. It includes over 1,000 icons in a consistent style.

Usage:

import { Home, User, Settings, ChevronRight } from 'lucide-react-native';

// In JSX:
<Home size={24} color={colors.primary} />

Browse available icons at lucide.dev.

To use a specific icon in your design:

"Use the Bell icon from lucide-react-native in the header for notifications"

Fonts​

By default, AppX apps use the system font (San Francisco on iOS, Roboto on Android). For a custom font:

"Use the Inter font family throughout the app"

AppX will:

  1. Import expo-font
  2. Load the font from Google Fonts via @expo-google-fonts/inter
  3. Update the _layout.tsx to wait for fonts to load
  4. Apply Inter throughout the typography constants

Available font families from @expo-google-fonts: Inter, Roboto, Poppins, Nunito, Raleway, Montserrat, Lato, Merriweather, and hundreds more.

Spacing Scale​

Consistent spacing makes layouts look polished:

export const spacing = {
  xs: 4,
  sm: 8,
  md: 12,
  base: 16,
  lg: 20,
  xl: 24,
  '2xl': 32,
  '3xl': 48,
};

Usage:

container: {
  padding: spacing.base,
  gap: spacing.md,
}

Customizing the Design System​

The simplest way to customize is through chat:

"Update the design system:
- Primary color: #7c3aed (purple)
- Background: #faf5ff (very light purple)
- Rounded corners: 16px for cards, 8px for inputs
- Font: Poppins, semi-bold for headings"

AppX will update constants/colors.ts, constants/typography.ts, and apply the border radius changes throughout your components.

A note on credits​

Redesigning through chat is just like any other edit — it's metered by how much actually changes, with a minimum of 1 credit per turn, and retries within the same turn are free. If you ask AppX to generate a fresh design system from scratch, that's about 1 credit. See Credits for the full picture.

Code Editor

Edit design files directly.

Chat-Driven Editing

Restyle your app by describing it.

Prompting Tips

Describe design intent clearly.

Credits

What edits and generation cost.