Sistema de diseño
Trazo y plano
Una sola forma de hacer las cosas: contorno grueso, color plano y sombra desplazada, igual en la interfaz y en las ilustraciones. Las páginas eligen un rol (t-h2, btn-primary…) y nunca un tamaño, grosor o color propio.
Tipografía
Títulos en Fraunces, un serif suave con carácter; texto en Nunito, una sans de terminaciones redondas que acompaña el trazo redondeado. Los tamaños crecen solos entre móvil y escritorio.
Display
Fraunces 900 · 44 → 88 px · interlineado 0,95
Recetas que se cocinan solas
H1
Fraunces 900 · 40 → 68 px · 0,98
Un título de página
H2
Fraunces 900 · 32 → 48 px · 1,02
Un título de sección
H3
Fraunces 800 · 24 → 32 px · 1,1
Un bloque grande
H4
Fraunces 800 · 22 px · 1,15
Título de tarjeta
H5
Fraunces 800 · 18 px · 1,2
Nombre de receta
Precio
Fraunces 900 · 40 px · 1
24 €
Lead
Nunito 400 · 18 → 20 px · 1,55 · apagado
La frase que abre una página y explica de qué va.
Texto
Nunito 400 · 16 px · 1,6 · mínimo para cualquier párrafo
El texto normal de cualquier párrafo, tarjeta o lista. Se lee bien en móvil y en escritorio.
Texto apagado
Nunito 400 · 16 px · 1,6 · muted
Descripciones de tarjeta y textos de apoyo: mismo tamaño, color secundario.
Nota
Nunito 400 · 16 px · 1,45 · notas cortas bajo botones y campos
Aún no cobramos nada · te avisamos cuando abra.
Controles
Nunito 700 · 15 px · navegación y botones pequeños
Recetas · Club · Apoya
Etiqueta
Nunito 800 · 13 px · mayúsculas · +14 %
Marcas y escuelas
Color
Ocho colores, cada uno con un solo trabajo. El tomate es solo para la acción principal: si todo es tomate, nada destaca.
#2b1a10
Texto, líneas y sombras
#fff8ea
Tarjetas y superficies
#f6e7c8
Fondo de página
#efcfae
Fondo de las ilustraciones
#c8431c
La acción principal
#f4b92a
Destacar y marcar
#5f6f27
Gratis y hecho
#6a5646
Texto secundario
Contraste del texto: tomate con papel 4,6:1 · olivo con papel 5,2:1 · muted con crema 5,4:1 · tinta con crema 13,7:1.
Botones
Uno primario por vista. El resto, secundarios. Dentro de una frase, enlace.
Un enlace dentro de un texto.
btn btn-primary · btn btn-secondary · tamaños btn-sm / btn-lg · btn-block a todo el ancho · link para texto.
Etiquetas y elecciones
Formularios y tarjetas
Notas del formulario, siempre en letra mínima.
Tarjeta
Contorno de 3 px, esquinas de 24 px y sombra plana de 6 px: la misma que usan las ilustraciones.
Ilustración
Las ilustraciones son 3D con trazo: contorno de 3,4 px (grande), 2,4 px (detalle) o 1,6 px (fino), luz cálida desde arriba a la izquierda y un solo brillo duro como mucho. Se renderizan en /arte (solo en desarrollo) y se guardan en public/arte.
Reglas rápidas
- Ninguna frase por debajo de 16 px: se usa t-body, t-lead o t-caption. Solo las etiquetas (chips, rótulos en mayúsculas y controles, de 13 a 15 px) son más pequeñas.
- Un H1 por página; después H2 → H3 en orden, sin saltar niveles.
- Un solo botón primario por vista.
- Texto secundario siempre con
text-muted, nunca con transparencias de la tinta. - Márgenes entre bloques: 64 px (
mt-16) entre secciones y 24 px (gap-6) entre tarjetas. - Contenedor:
pagepara páginas ywrapdentro de secciones; ancho máximo 72 rem.