GUÍA DE ESTILOS
El sistema visual completo de ZTZ. Diseñado para mantener la coherencia narrativa y estética del cómic en todas las interfaces.
1. PALETA DE COLORES
Primary (Cyan)
CSS: var(--primary)
Tailwind: bg-primary
Secondary (Yellow)
CSS: var(--secondary)
Tailwind: bg-secondary
Comic Panel (Cream)
CSS: var(--comic-panel-bg)
Uso: Fondos de tarjetas
Destructive (Red)
CSS: var(--destructive)
Tailwind: bg-destructive
Background & Foreground (Adaptable)
Estos colores cambian automáticamente entre modo claro y oscuro. Usa siempre bg-background y text-foreground para textos principales.
Muted (Secundario)
Para fondos secundarios y textos de menor jerarquía. Usa bg-muted y text-muted-foreground.
2. TIPOGRAFÍAS
Bangers
Uso: Títulos principales (H1, H2), onomatopeyas, números gigantes y llamadas de atención muy fuertes.
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ 0123456789 !?
Barlow Condensed
Uso: Títulos secundarios (H3, H4), etiquetas (badges), botones y navegación. Siempre usar en mayúsculas (uppercase) y con font-weight bold o black.
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ 0123456789
Inter
Uso: Párrafos, descripciones largas, formularios y textos de lectura. Mantiene la legibilidad en tamaños pequeños.
Inter Bold - Para destacar dentro del texto.
Inter Regular - abcdefghijklmnñopqrstuvwxyz ABCDEFGHIJKLMNÑOPQRSTUVWXYZ 0123456789
3. ELEMENTOS UI & UX
Botones (Buttons)
Etiquetas (Badges / Eyebrows)
Formularios (Inputs)
4. ELEMENTOS DE CÓMIC
Panel de Cómic (Tarjeta)
Clase: .comic-panel
Fondo crema, borde negro de 4px, sombra sólida de 4px sin desenfoque (blur). Al hacer hover, se eleva y la sombra crece a 8px.
Bocadillo (Bubble / Esfumeta)
Clase: .comic-bubble
Borde grueso redondeado con una "cola" generada por CSS usando los pseudo-elementos ::before y ::after.