Skip to main content

Design System

AppX builds every app on a small design system: two files in constants/ hold your colors, fonts, spacing, corner radii and shadows. Screens reference those files instead of hardcoding values, so a design change is one edit: change the file (or just ask in chat), and every screen that uses the value follows. 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
  theme.ts         ← Fonts, spacing, border radius, shadows

Colors​

constants/colors.ts exports one Colors object. The names below come from the starting template; the values in your app are generated for its design.

const Colors = {
  background: '#FAFAF8',
  surface: '#F0EDE8',
  card: '#FFFFFF',
  primary: '#0D0D0D',
  secondary: '#6B6B6B',
  tertiary: '#A3A3A3',
  accent: '#C8A97E',
  divider: '#E8E5E0',
  error: '#C44D4D',
  // …
};

export { Colors };
export default Colors;

Screens reference Colors.* rather than hardcoding hex values. To change the accent color across your app:

  1. Open constants/colors.ts in the editor
  2. Change accent: '#C8A97E' to your color
  3. Save — every component that uses Colors.accent updates in the preview

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

Spacing, Corners, and Shadows​

constants/theme.ts holds the scales screens share:

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

export const borderRadius = {
  sm: 6,
  md: 12,
  lg: 20,
  xl: 28,
  full: 999,
};

The same file exports fonts and shadows (sm, md, lg, none).

Usage:

import { spacing, borderRadius, shadows } from '@/constants/theme';

card: {
  padding: spacing.md,
  borderRadius: borderRadius.md,
  ...shadows.sm,
}

Dark Mode​

Ask for it in chat:

"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';
import Colors from '@/constants/colors';

// 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"

Fonts​

Available fonts: Inter, DM Sans, Manrope, IBM Plex Sans, Space Grotesk, Sora, Outfit, Nunito, Fraunces, Playfair Display, Lora, IBM Plex Mono.

To switch, ask in chat:

"Use the Inter font family throughout the app"

Customizing the Design System​

The simplest way to customize is through chat:

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

AppX will update constants/colors.ts and constants/theme.ts and apply the change in your screens.

A note on credits​

Restyling through chat is an edit like any other: metered, with a minimum of 1 credit per turn. The design step is part of your first build and is included in the plan card's estimate. 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 builds and edits cost.