Los tokens y componentes de DESIGN.md. Todo lo que se ve en la aplicación sale de aquí: ninguna pantalla inventa estilos por su cuenta.
Atomic design en cuatro capas. Cada capa solo usa la de abajo.
ui/
Primitivas de Base UI generadas por shadcn. Accesibilidad y comportamiento.
atoms/
Piezas indivisibles propias: importe, distintivo de estado, botón de envío.
molecules/
Combinaciones pequeñas: campo, aviso, encabezado, selector de cantidad.
organisms/
Bloques completos: tarjeta de producto, cabecera del sitio.
Navy profundo y oro del escudo, sobre una neutra fría. Cada color de fondo tiene su par de texto (on-…) para que el contraste nunca quede al azar.
Marca
primary
brand-teal-deep
brand-teal-mid
club-aventureros
club-conquis
club-guias-mid
secondary (oro)
gold-soft
tertiary-container
primary-fixed
Superficies
background
card
surface-container-low
surface-container
surface-container-high
inverse-surface
Estado
success-container
warning-container
error-container
destructive
border
outline-variant
Plus Jakarta Sans es la única del sistema. Titulares en pesos altos con letra ligeramente condensada; etiquetas en semi-bold.
display-lg
48/56 · 800
Insignias y especialidades
headline-lg
32/40 · 700
Insignias y especialidades
headline-lg-mobile
28/36 · 700
Insignias y especialidades
headline-md
24/32 · 700
Insignias y especialidades
body-lg
18/28 · 400
Insignias y especialidades
body-md
16/24 · 400
Insignias y especialidades
label-lg
14/20 · 600
Insignias y especialidades
label-sm
12/16 · 600 · versalitas
Insignias y especialidades
Radio nivel 2: 8px en botones y campos, 16px en contenedores de producto. Escala de 8px sobre base de 4px. La elevación se comunica con capas tonales y bordes de 1px, no con sombras; la única sombra del sistema está tintada con el navy y se reserva a modales.
rounded-md · 8px
Botones, campos, tarjetas pequeñas
rounded-lg · 16px
Contenedores de producto
shadow-elevated
Solo modales y drawers
xs
sm
md
lg
xl
xxl
Primario navy, secundario oro con texto navy, fantasma y contorno. Todos miden 44px de alto: SPEC §7.1 exige objetivos táctiles de al menos 44px porque estos formularios se llenan desde el móvil.
Fondo blanco y borde gris claro; al enfocar, el borde pasa a navy. La etiqueta va siempre en label-lg.
Con este número te escribe la sede.
Los siete estados de la máquina de órdenes (SPEC §4), cada uno con su capa tonal. Texto pequeño en versalitas.
Un único componente para todos los mensajes en bloque, para que no vuelvan a aparecer párrafos de colores sueltos por las pantallas.
Retiro en sede
Pago verificado
Falta el costo del envío
Comprobante rechazado
Formato vertical de escaparate: la insignia arriba en una banda de altura fija, y debajo categoría, nombre y la fila de precio con la acción. Es lo que pinta la densidad «grande» de la vitrina.
Aves Madrugadoras
Formato horizontal: miniatura al lado de categoría, nombre y precio, y la acción abajo a lo ancho. El ladillo lleva el acento de la línea. Sin foto propia se enseña el emblema del club.
Salud y Ciencia
Rayitos de Sol
Para las colas de verificación de sede (F4) y los lotes de producción (F5). Filas con divisores de 1px, sin sombra.
| Orden | Club | Estado | Total |
|---|---|---|---|
| ORD-000012 | Club Los Pioneros | Falta el pago | $ 45.500 |
| ORD-000013 | Club Centinelas | Verificando el pago | $ 21.000 |
| ORD-000014 | Club Alfa | Pago verificado | $ 87.500 |
Contenedor punteado, mensaje breve y una sola acción.
Todavía no tienes pedidos
Lo que se resuelve sin salir de la pantalla vive en la capa 50, sobre un velo de teal profundo al 60% con desenfoque, y es la única capa que lleva shadow-elevated. El cajón entra deslizándose desde el borde derecho —430px en escritorio, ancho completo en móvil— y el modal aparece centrado. Cierran los tres caminos: la X, Escape y el velo. Los botones abren los de verdad, no una copia.
El cajón del carrito es la pantalla del pedido: no hay ruta «/carrito». El modal de acceso hace lo mismo con «/login» y «/registro», que siguen existiendo porque es a donde redirige el proxy cuando falta la sesión.
La base de cada pantalla es el móvil y el escritorio es la capa de encima. Márgenes de 16px que crecen a 64px, rejilla de 4 columnas que pasa a 12, y objetivos táctiles de 44px en todo lo pulsable. Los líderes de club llenan estos formularios desde el teléfono.
4 columnas en móvil · 12 en escritorio. Redimensiona la ventana.
