Design System v1.0

Miel & Grano
Café Design System

Sistema de diseño UI con estética de cafetería acogedora: tokens cálidos, tipografía suave y componentes accesibles (WCAG 2.2 AA).

Cliente: Miel & Grano Cafetería Skill: sistema-diseno-cafe-tonos-calidos Versión: 1.0.0 — 2026
01
Paleta de Color
Tokens semánticos derivados de la identidad de Miel & Grano. Todos los pares texto/fondo cumplen WCAG 2.2 AA (ratio mínimo 4.5:1).
✓
Primary
--color-primary
#5D4432
AAA 8.3:1
Secondary
--color-secondary
#E9E3DD
AA 5.1:1
Surface
--color-surface
#F9F7F5
AA 6.2:1
Text
--color-text
#3E2B1E
AAA 12.1:1
Success
--color-success
#16A34A
AA 4.6:1
Warning
--color-warning
#D97706
AA 4.7:1
Danger
--color-danger
#DC2626
AA 5.0:1
Text Muted
--color-text-muted
#7D6153
AA 4.5:1
02
Tipografía
Escala desktop-first expresiva. Georgia como alternativa de sistema para Poppins; JetBrains Mono para labels y código.
H1 / Display
3rem · 700
ls: -0.02em
El mejor café de Malasaña
H2 / Heading
2.25rem · 600
ls: -0.015em
Orígenes de temporada
H3 / Subheading
1.875rem · 600
Tostado artesanal
H4 / Section
1.5rem · 500
Menú de la semana
Body LG
1.125rem · 400
Seleccionamos cada grano directamente con los productores para garantizar frescura y trazabilidad.
Body MD
1rem · 400
Ofrecemos espresso, filter, aeropress y métodos alternativos cada semana según cosecha. Reserva tu mesa y disfruta de nuestra repostería artesanal.
Body SM
0.875rem · 400
Precio incluye IVA. Disponible de lunes a viernes 8:00 – 20:00h. Sábados 9:00 – 18:00h.
Label / Caps
0.75rem · 500
mono · ls: 0.1em
Origen: Etiopía · Varietal: Heirloom · Proceso: Natural
Code / Mono
0.875rem · 400
--color-primary: #5D4432;
03
Escala de Espaciado
Sistema 8pt derivado: 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48px. Nunca usar valores arbitrarios fuera de la escala.
--space-1 (2px)
2px · micro separador
--space-2 (4px)
4px · icon + label gap
--space-3 (8px)
8px · inline gap
--space-4 (12px)
12px · padding sm
--space-5 (16px)
16px · padding base
--space-6 (24px)
24px · section padding
--space-7 (32px)
32px · card gap
--space-8 (48px)
48px · section margin
04
Border Radius
Cuatro niveles: sm para microelemenos, md para controles, lg para tarjetas, full para píldoras y avatares.
sm
4px
--radius-sm
md
8px
--radius-md
lg
16px
--radius-lg
full
9999px
--radius-full
05
Botones
Anatomía: [icono?] + label. Mínimo 44×44px en touch. Todos los estados deben ser explícitos: default, hover, focus-visible, disabled, loading.
Variantes
Tamaños
Estados
06
Formularios
Focus ring visible siempre (outline 3px offset 3px). Mensajes de error inline bajo el campo. Label siempre visible (no usar solo placeholder).
Como aparecerá en tu bono de fidelización.
⚠ Introduce un correo válido.
07
Tarjetas
Cuatro variantes: default, elevated, filled y primary. Padding siempre --space-6. Nunca border-radius menor a --radius-md en tarjetas.
Novedad
Ethiopia Yirgacheffe
Proceso natural. Notas de arándanos, bergamota y chocolate blanco. Cosecha 2025/26.
Destacado
Guatemala Huehuetenango
Lavado. Caramelo, almendra tostada y cítrico suave. Ideal como flat white.
Bono especial
Bono Barista ×10
10 cafés de especialidad al precio de 8. Sin caducidad. Transferible.
08
Tarjetas de Producto
Hover: elevación + translate-Y -2px. Imagen mínimo 140px. Precio siempre --color-primary. Origen en label monoespaciado.
☕
Espresso Solo
Extracción de 9 bar, 25 segundos. Crema densa y persistente.
1,80€ IT · ESP
🍵
V60 Filter
Rotación semanal de origen. Notas florales y frutales de temporada.
3,50€ ETH · COL
🥐
Croissant mantequilla
Horneado cada mañana. Masa de 72 horas de fermentación.
2,20€ ARTESANO
🍫
Brownie de dátiles
Sin azúcar refinado. Chocolate 85%, nueces y vainilla Bourbon.
2,80€ SIN GLUTEN
09
Badges y Alertas
Badges: solo texto o texto + dot. Alertas: siempre con border-left 4px + icono semántico. Nunca usar solo color para transmitir estado.
Badges
Specialty Disponible Últimas unidades Agotado Sin lactosa Temporada Vegano
Alertas de sistema
✓
Reserva confirmada
Tu mesa para 2 personas el sábado 21 de junio a las 10:30h está reservada. Recibirás confirmación por email.
⚠
Quedan pocas mesas
Solo 2 mesas disponibles para el próximo fin de semana. Reserva cuanto antes para asegurar tu plaza.
✕
Error al procesar el pago
No hemos podido completar la compra del bono. Verifica los datos de tu tarjeta e inténtalo de nuevo.
ℹ
Cerramos por vacaciones
Del 14 al 21 de agosto permaneceremos cerrados. ¡Hasta pronto!
10
Navegación Principal
Altura fija 64px. Logo + nav links + CTA. Item activo: background rgba primary 0.08 + font-weight 600. Focus-visible con outline primario.
☕
Miel & Grano
Inicio Menú Reservas Blog Sobre nosotros
Abierto ahora
11
Estadísticas y Fidelización
KPIs para el dashboard del barista. Tarjeta de fidelización "Granos" con sistema de sellos progresivos.
Visitas hoy
147
↑ +12% vs ayer
Cafés servidos
312
↑ +8% vs semana
Ticket medio
6,40€
— igual que ayer
Reservas activas
28
↓ -3 cancelaciones
Miel & Grano
Ana García López · Miembro desde 2024
480
Granos acumulados
☕
☕
☕
☕
☕
☕
☕
·
·
·
7/10 cafés · 3 más para tu café gratis
12
Anti-patrones Prohibidos
Reglas de migración para componentes existentes. "Must" = no negociable. "Should" = fuerte recomendación.
✓ Correcto — Hacer
Usar siempre tokens semánticos (--color-primary), nunca valores raw (#5D4432 directo en CSS).
Mantener contraste mínimo 4.5:1 en todos los pares texto/fondo.
Espaciado siempre con valores de la escala (2/4/8/12/16/24/32/48px).
Focus-visible siempre explícito con outline 3px en color primario.
Labels siempre visibles aunque el campo tenga placeholder.
Mensajes de error en texto, no solo con color rojo.
Área de toque mínimo 44×44px en controles interactivos.
Usar jerarquía tipográfica para comunicar importancia antes de usar color.
✕ Incorrecto — No hacer
No usar texto gris claro (#CCC) sobre fondo blanco (contraste insuficiente).
No usar spacing aleatorio (ej. padding: 13px) fuera de la escala.
No quitar el outline de focus con outline:none sin alternativa visible.
No mezclar familias tipográficas no especificadas (ej. Comic Sans, Roboto).
No usar colores de éxito/peligro para elementos decorativos sin significado semántico.
No usar border-radius fuera de los 4 valores definidos (sm/md/lg/full).
No añadir sombras custom fuera de --shadow-sm/md/lg.
No omitir el estado :disabled en componentes que puedan deshabilitarse.
13
Checklist de QA
Ejecutar en cada code review. Todos los items marcados deben pasar antes de merge a main.
Miel & Grano Design System · v1.0.0 Skill: sistema-diseno-cafe-tonos-calidos · CULTIVA IA Branding-Diseno WCAG 2.2 AA · MIT License