Atlas · Design system

01 · Foundations

Color

Paleta semántica de tokens. Todos los componentes referencian estas variables; cambiar un valor aquí propaga al sistema entero. Alterna entre light y dark con el toggle del header.

Brand · Alpine green

Color identitario. Escala 50 (más sutil) → 700 (más saturado). En dark mode los valores se invierten semánticamente: 50 sigue siendo tinte sutil pero oscuro, 700 pasa a ser texto claro sobre fondos oscuros.

--brand-50

Hover bg, tinte sutil

--brand-100

Active bg, checks suaves

--brand-200

Borders, gradients, ambientes

--brand-500

Acción primaria, focus

--brand-600

Hover de brand, links

--brand-700

Texto brand sobre claros

Accent · Warm coral

Color de CTAs primarios, energía y acentos. Usar con moderación — debe seguir leyéndose como "el botón que cuenta más".

--accent-50

Tinte muy sutil, badges

--accent-100

Active bg suave

--accent-500

CTA primario

--accent-600

Hover de CTA

Semánticos

Estados universales. Usar consistentemente para que verde-éxito siga siendo éxito en cualquier pantalla.

--success

Validaciones, completaciones

--warning

Avisos, dolor leve

--danger

Errores, alertas críticas

--info

Info neutra, enlaces

Por deporte

Color identitario rápido para tags, border-left de sesiones y covers de plantillas.

--sport-run

Running · coral

--sport-bike

Ciclismo · alpine green

--sport-swim

Natación · water blue

--sport-hike

Senderismo · earth brown

--sport-climb

Montañismo · rock red

--sport-kayak

Kayak · teal

--sport-tri

Multi-deporte · purple

Superficies

Backgrounds y borders. Niveles de elevación visual.

--bg-base

Canvas, página

--bg-surface

Cards, modales

--bg-muted

Chips, hover suave

--border-subtle

Dividers internos

--border-default

Inputs, selects

Texto

Texto primario · cuerpo y headings

--text-primary

Texto secundario · subtítulos y soporte

--text-secondary

Texto terciario · captions y meta

--text-tertiary

Texto sobre superficie brand

--text-on-brand · sobre brand-700

02 · Foundations

Tipografía

4 familias con propósitos diferenciados. Escala de 9 pasos con razón ~1.2× entre tamaños consecutivos.

Familias

--font-sans · Inter

UI, cuerpo y labels. Lectura corta.

--font-display · Space Grotesk

Headings y números prominentes.

--font-prose · Lora

Diario y lectura larga. Serif para sensación de "escritura".

--font-mono · system mono

Código, atajos ⌘K, números técnicos.

Escala de tamaños

Display 40

--text-display · 40px

Hero title 32

--text-3xl · 32px

Page title 28

--text-2xl · 28px

Section title 22

--text-xl · 22px

Card title 18

--text-lg · 18px

Body enfatizado 16

--text-md · 16px

Body por defecto 15

--text-base · 15px

Helper / secondary 13

--text-sm · 13px

Captions y meta 11

--text-xs · 11px

03 · Foundations

Espaciado

Escala base 4px. Todo el espaciado del sistema usa estos valores — gaps, padding, margins.

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-5 · 20px

--space-6 · 24px

--space-8 · 32px

--space-10 · 40px

--space-12 · 48px

--space-16 · 64px

04 · Foundations

Border radius

5 niveles de redondeo. Coherencia visual: mismo radius para elementos al mismo nivel jerárquico.

--radius-sm · 6px

Tags, chips internos

--radius-md · 10px

Inputs, buttons

--radius-lg · 16px

Cards, sections

--radius-xl · 24px

Hero, featured

--radius-full

Pills, avatares

05 · Foundations

Sombras

3 niveles de elevación + 1 variante brand. En dark mode las sombras se vuelven ambient (negro · baja opacidad).

--shadow-sm

Cards en reposo

--shadow-md

Cards hover, popovers

--shadow-lg

Modales, drawers

--shadow-brand

Featured cards brand

06 · Components

Botones

Tres variantes principales. Estados: default, hover (pasa el cursor), focus visible (tabula con teclado), disabled.

Variantes

Estados

Pasa el cursor para ver hover · tabula con Tab para ver focus visible (halo brand).

07 · Components

Form fields

.field wrapper, .checkbox custom, .search input. Estados completos: default, focus, error, disabled.

Field · estados

Default

Con valor

Con acción

Mínimo 12 caracteres

Con error

Ingresa un correo válido.

Disabled

Checkbox

No seleccionado Seleccionado · acepto los términos

Search

08 · Components

Cards

Contenedor base. Variante --elevated con shadow-md.

Contenedor base. Border subtle + shadow-sm.

Misma estructura pero con shadow-md. Para hover de cards interactivas o cards principales.

09 · Components

Filtros y chips

Toggles compactos para filtrar listas o seleccionar opciones múltiples.

Filter chips · con count

Chip · con icono

Running Ciclismo Triatlón

Filter select

10 · Components

Pills y badges

Pills semánticos

Listo Pendiente En progreso Bloqueado

Status pill · con dot

Activa

Severity · 3 niveles

Leve

Moderada

Grave

Difficulty bars

Principiante

Intermedio

Avanzado

11 · Components

Charts e indicadores

Ring chart

60%

brand · 60%

80%

success · 80%

30%

warning · 30%

Day dots · estados de progreso por día

1 2 3 4 5 6 7

Energy dots · escala 1-5

Macros bar · proteína, carbos, grasas

Proteína 92 / 130 g

Carbohidratos 233 / 320 g

Grasas 56 / 80 g

12 · Iconografía

Iconos

Set inspirado en Lucide. Stroke 2px, viewbox 24×24, stroke-linecap y linejoin redondeados. Renderizados a 18px en UI, 20-24px en hero/CTA.

chevron-right

chevron-left

chevron-down

check

x

plus

search

bell

edit

more-vertical

clock

moon

sun

eye

bookmark

zap

heart

mountain · brand

bike

runner

waves

activity

smile

lock

13 · Patterns

Patrones compuestos

Ejemplos de cómo se combinan componentes para construir UI real. Snapshots tomados de los wireframes de la fase 3.

Volumen 8:32

Sesiones 5 / 7

Correo

Pierna baja

Tensión muscular del gemelo

Sobrecarga del gastrocnemio por incremento brusco. Recuperación 5-10 días.