Design Tokens

Exported color and typography tokens for use outside React Native (web, marketing, documentation, design tools).

CSS Custom Properties

:root {
  --color-primary: #00B4D8;
  --color-primary-dark: #0096B7;
  --color-accent: #FF6B6B;
  --color-background: #0A1628;
  --color-surface: #132240;
  --color-surface-light: #1A2D50;
  --color-surface-highlight: #223A60;
  --color-text: #F0F4F8;
  --color-text-secondary: #8BA4C4;
  --color-text-muted: #5A7399;
  --color-border: #1E3355;
  --color-success: #4ADE80;
  --color-warning: #FBBF24;
  --color-error: #F87171;

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

Typography

Font Family

Inter (Google Fonts) — a highly legible sans-serif optimized for screen readability. Loaded via:

@expo-google-fonts/inter

Loaded weights: 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold).

Size Scale

Three user-configurable text size presets:

Token	Small	Medium (default)	Large
xs	12	14	16
sm	13	15	17
caption	14	16	18
body2	15	17	19
body	16	18	20
bodyLarge	17	18	20
subtitle	18	19	21
subtitle2	19	20	22
heading3	20	22	24
heading2	22	24	26
heading	28	30	32
display	32	34	36
timer	56	56	56

All values in points. On web, values are scaled by 0.85x via the following constant:

WEB_SCALE_FACTOR

Source Files

• Typography definitions:

lib/typography.ts

• Color definitions:

constants/colors.ts