08 — Design system · COMAL

Tokens definidos en Paper como CSS variables. Fuente de verdad: archivo Paper + este documento.

Tokens de color

--color-background: #F4F2EF;
--color-surface: #FFFFFF;
--color-ink: #1A1A1A;
--color-ink-muted: #5C5955;
--color-ink-subtle: #8A8680;
--color-border: #E0DCD6;
--color-primary: #E85D04;
--color-primary-strong: #C44D03;
--color-primary-soft: #FFF0E6;
--color-secondary: #5C6B5A;
--color-secondary-soft: #E8EDE7;
--color-danger: #B42318;
--color-danger-soft: #FEE4E2;
--color-warning: #B54708;
--color-info: #175CD3;

Espaciado

4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 px

Radios

4 (sm) · 8 (md) · 12 (lg) · 16 (xl) · 9999 (full)

Componentes

Button

Variante	Uso
Primary	CTA principal (bg primary, text white)
Secondary	Alternativa (surface + border)
Ghost	Texto ink, sin borde
Danger	Acciones destructivas
Disabled	opacity 0.45, no pointer

Altura táctil mínima: 44px. Padding horizontal 18–28px.

Input

Label 12–14px medium sobre campo
Campo: border border, radius md, padding 12–14
Focus: border primary 1.5–2px
Error: border danger + texto danger

Chip / Filter

Default: surface + border
Selected: ink bg + white text (listado) o primary-soft + primary border (estaciones)

Card cocina

Imagen 16:9 o altura fija ~120–140
Badge VERIFICADA / 24H
Título Fraunces 18
Meta 13 muted
Precio display alineado a la derecha

Slot hour

Disponible: surface + border
Selected: primary + white mono
Occupied: border fill + subtle text, no interactive

Bottom nav (móvil)

4 tabs: Explorar · Reservas · Acceso · Perfil
Active: primary stroke + label primary

Fondo ink; item activo #2A2A2A

Status badges

Estado	Estilo
En curso	primary-soft / primary-strong
Confirmada	secondary-soft / secondary
Bloqueada	border / muted
Error	danger-soft / danger

Empty / Error

Icono en frame 64–72, título Fraunces, body muted, CTA primary + secondary link

Breakpoints

640 · 768 · 1024 · 1280

Responsive rules

Viewport	Layout explorar
<768	Lista vertical + chips + bottom nav
≥1024	Sidebar filtros + grid 3 cols + top nav

Librería en Paper

Implementada en artboards: botones, chips, cards, slots, badges, nav, sidebar, empty, error, check-in dark.