Colors

The color system uses semantic naming to ensure consistent styling across your app.

Color Categories

Primary Colors

Token	Usage
primary	Primary buttons, active states
primaryVariant	Hover/pressed states, active tab indicators
onPrimary	Text/icons on primary backgrounds

Secondary Colors

Token	Usage
secondary	Branding, ighlights, links
secondaryVariant	Hover/pressed states
onSecondary	Text/icons on secondary backgrounds

Background Colors

Token	Usage
background	Screen backgrounds, containers
backgroundVariant	Card backgrounds, input backgrounds, surface buttons, tab bars
onBackground	Primary text color, headings, body text

Neutral Colors

Token	Usage
neutral	Secondary text, icons, disabled states
neutralVariant	Placeholder text, hint text, subtle borders, dividers
onNeutral	Text on neutral backgrounds

Base Colors

Token	Usage
base	Page containers, base white/black
baseVariant	Modal backdrop, dropdown overlays, scrims
onBase	Text on base surfaces

Semantic Colors

Token	Usage
success	Success messages, checkmarks, positive states
warning	Warning messages, caution indicators
error	Error messages, validation errors, destructive actions

Usage in Components

With Components

Most components accept a color prop using the semantic token name:

<Container backgroundColor="backgroundVariant">
  {/* Content */}
</Container>

<Typography color="primary">Primary text</Typography>

<Icon icon="Check" color="success" />

Direct Access

const { colors } = useTheme();

<View style={{ backgroundColor: colors.primary }}>
  <Text style={{ color: colors.onPrimary }}>Hello</Text>
</View>

Light vs Dark Mode

Each color has different values for light and dark modes:

{
  "colors": {
    "light": {
      "background": "#FBFBFB",
      "onBackground": "#121212"
    },
    "dark": {
      "background": "#121212",
      "onBackground": "#E0E0E0"
    }
  }
}

The correct colors are automatically applied based on the current theme mode.

Color Formats

Supported color formats:

• Hex: #RRGGBB or #RRGGBBAA
• RGBA: rgba(255, 255, 255, 0.5)

{
  "base": "#FFFFFF",
  "baseVariant": "rgba(80, 80, 80, 0.5)"
}

Accessibility

When choosing colors, ensure:

• Sufficient contrast between text and background (WCAG 2.1 AA minimum)
• onPrimary has good contrast with primary
• onBackground has good contrast with background
• Error states are distinguishable without relying solely on color