1 Tokens de Color
Paleta semántica. Usar siempre los tokens, nunca valores raw.
Primary
#1DAD97
--color-primary
Primary Light
#5ECFBE
--color-primary-light
Primary Dark
#157A6B
--color-primary-dark
Secondary
#F4EDE0
--color-secondary
Success
#16A34A
--color-success
Warning
#D97706
--color-warning
Danger
#DC2626
--color-danger
Text
#111827
--color-text
2 Escala Tipográfica
Delicious Handrawn (display/body) + JetBrains Mono (labels/código). Escala: 12/14/16/20/24/32.
--text-3xl · 40px
El café de especialidad
--text-2xl · 32px
Taller de Barismo
--text-xl · 24px
Suscripción mensual
--text-lg · 20px
Granos de origen único
--text-base · 16px
Cosechados a mano en fincas certificadas, seleccionados por nuestro equipo
--text-sm · 14px
Texto auxiliar y descripciones de producto
--text-xs · 12px · MONO
LABEL CAPS · ETIQUETAS · CÓDIGO · TOKENS
3 Componentes: Botones
4 variantes × 3 tamaños × estados (default, hover, disabled, loading). Siempre pill border-radius.
4 Cards de Producto
3 tipos: producto físico, taller/experiencia, suscripción. Border dashed + pencil shadow.
☕
Café · Origen único
Etiopía Yirgacheffe
Notas de jazmín, bergamota y arándano. Lavado. Altitud 1800–2200m. Cosecha 2025.
Nuevo
🎓
Taller · Presencial
Introducción al V60
Aprende a preparar café de filtro en casa. 3h · max 8 personas · material incluido.
Oferta
📦
Suscripción · Mensual
Caja del Mes
250g de café de temporada + nota de cata + receta. Envío gratuito. Cancela cuando quieras.
5 Formularios e Inputs
Borde dashed + pencil shadow. Estados: default, focus (teal), error (rojo), success (verde).
6 Navegación y Tabs
Tab activo con borde inferior suprimido (encaje visual). Todos los estados de teclado visibles.
- Todos
- Cafés
- Talleres
- Suscripción
- Sobre nosotros
→ Contenido del tab activo "Todos": muestra los 3 tipos de productos del catálogo Cultiva Café.
7 Badges y Etiquetas de Estado
Pill border-radius + box-shadow offset + font mono uppercase. Solid y outline.
Solid
Nuevo
Disponible
Últimas unidades
Agotado
Pedido activo
Enviado
En preparación
Outline
Origen único
Bio certificado
Molienda media
En stock
Pendiente
8 Escala de Espaciado
Base 4px. Nunca usar valores fuera de la escala. Siempre tokens, no px raw.
9 Anti-Patrones Prohibidos
Cada regla incluye un ejemplo incorrecto y el correcto. Si hay conflicto estetica vs. accesibilidad → accesibilidad siempre gana.
✗ Prohibido — Bajo contraste
Texto sobre fondo del mismo tono: ilegible para usuarios con baja visión. Incumple WCAG 2.2 AA (ratio <4.5:1).
ratio: ~1.2:1 ← inaceptable
✓ Correcto — Contraste WCAG AA
Texto blanco sobre primary teal (#1DAD97): ratio 3.8:1 para UI elements. Sombra offset refuerza la legibilidad táctil.
ratio: 3.8:1 ← cumple AA para botones
✗ Prohibido — Espaciado irregular
Usar px fuera de la escala (ej. margin: 11px, padding: 7px) rompe el ritmo visual y hace el mantenimiento imposible.
padding: 7px 11px; /* ← RAW px PROHIBIDO */
✓ Correcto — Tokens de espaciado
Siempre usar los tokens definidos en la escala base-4. Consistencia automática en toda la UI sin esfuerzo manual.
padding: var(--space-2) var(--space-3); /* ← correcto */
10 QA Checklist — Code Review
Ejecutar antes de cada merge. Si cualquier ítem falla, bloquear el PR.
- ✓ Ratio de contraste ≥ 4.5:1 texto normal, ≥ 3:1 texto grande
- ✓ Focus visible en todos los interactivos (outline teal)
- ✓ Sin valores px raw fuera de la escala 4/8/12/16/24/32
- ✓ Sin colores hex raw fuera de los tokens definidos
- ✓ Botones con estado disabled: opacity 0.45, no hover
- ✓ Cards con borde dashed + box-shadow offset visible
- ✓ Labels: font-mono uppercase, min-width para alineación
- ✓ Inputs: border dashed, focus con shadow teal
- ✓ Error states: rojo danger + hint message con ✗
- ✓ Success states: verde success + hint message con ✓
- ✓ Navegación accesible con teclado (Tab/Enter/Space)
- ✓ Tipografía mínima 12px (sin texto below var(--text-xs))
- ✓ Sin CDNs ni fuentes externas en producción
- ✓ Responsive: layout no rompe en 320px mínimo