Tokens de Diseño

Tokens de color y tipografía exportados para uso fuera de React Native (web, marketing, documentación, herramientas de diseño).

Propiedades CSS personalizadas

: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;
}

Tipografía

Familia tipográfica

Inter (Google Fonts) — una sans-serif altamente legible optimizada para lectura en pantalla. Se carga con @expo-google-fonts/inter.

Pesos cargados: 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold).

Escala de tamaños

Tres opciones configurables por el usuario:

Token	Chico	Mediano (default)	Grande
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

Todos los valores en puntos. En web, se escalan por 0.85x con WEB_SCALE_FACTOR.

Archivos fuente

• Definiciones de tipografía: lib/typography.ts
• Definiciones de color: constants/colors.ts