Zebra Ediciones · Sistema de diseño v0
Styles
Manual de marca vivo. La paleta está sampleada de los assets reales: las fotos del shoot del catálogo (may 2026) y las portadas de los libros. Referencia estructural: zahoribooks.com. Tipografía: decisión editorial de Daniela.
Color · base
Click en un swatch copia el hex.
Color · accents
Regla: un accent por bloque. Solo el amarillo puede repetirse — es la marca. Texto siempre en ink sobre accents claros; paper sobre verde.
Tipografía
Una sola familia: EB Garamond (Google Fonts) — serif editorial, pesos 400 / 500 / 600 + itálica. Fallback: Georgia, serif.
Aa Bb Cc 0123
El veloz murciélago hindú comía feliz cardillo y kiwi.
La cigüeña tocaba el saxofón detrás del palenque de paja.
| Uso | Clase | Tamaño | Muestra |
|---|---|---|---|
| Statement / hero | text-4xl md:text-6xl | 36 → 60px | Zebra |
| Título de página (h1) | text-5xl md:text-6xl | 48 → 60px | Zebra |
| Título de sección (h2) | text-3xl | 30px | Zebra |
| Subtítulo / card title | text-xl | 20px | Zebra |
| Cuerpo grande | text-lg | 18px | Zebra |
| Cuerpo | text-base | 16px | Zebra |
| Secundario / autor | text-sm | 14px | Zebra |
| Etiquetas / kicker | text-xs tracking-widest uppercase | 12px | Zebra |
Espaciado y layout
| Uso | Clase | Valor |
|---|---|---|
| Bloque de sección (vertical) | py-16 / py-20 / py-24 | 64 / 80 / 96px |
| Margen lateral de página | px-6 | 24px |
| Contenedores | max-w-7xl · 6xl · 5xl · 3xl | 1280 · 1152 · 1024 · 768px |
| Gap de grid (cards) | gap-6 md:gap-8 | 24 → 32px |
| Padding de botón | px-8 py-3 | 32 × 12px |
| Radio de esquinas | rounded-sm | 2px — casi recto, editorial |
Componentes
Botones
Card de libro (D8)
La cebra anaranjada
Cecilia Noriega Figari
Portada · título medium · autor. Sin precio en cards.
CTA Foreign Rights · variantes
Acción flotante para bajar el catálogo PDF. Único botón en naranja
(exclusivo FR). En producción: G · Starburst (g1-12), implementado
en rights.astro. Las demás variantes quedan de referencia.
A · Pill + icono
rounded-full · shadow teñida · lift hover
B · Editorial cuadrado + chip
rounded-[2px] · cumple regla de marca
C · Outline → fill (hover)
border 1.5px · se llena al hover
D · Sello / label punteado
border dashed · chip mono
E · Documento de dos pisos
header naranja + cuerpo crema
F · Link minimal + flecha
underline · flecha baja al hover
foreign rights
catalogue PDF · English
G · Starburst · en producción
sello con picos · -rotate-6 · hover endereza + crece
Reglas del sistema
- Las ilustraciones y fotos del catálogo son las protagonistas — el color las acompaña, nunca compite.
- Un accent por bloque. Nunca arcoíris. Solo amarillo puede repetirse.
- Cada sección del home es un bloque de color pleno (paper → amarillo → verde → crema → ink).
- Naranja es exclusivo de Foreign Rights.
- Texto en ink sobre accents claros; paper sobre verde e ink.
- Esquinas casi rectas (2px), bordes de 1px, estética editorial.
- EB Garamond en todo. Sin segunda familia.