Lucía Zambudio · Sistema Visual · 2026
Visual
Guidelines
una marca que suena antes de que
empiece la música
01
Sistema de Color
El negro mora no es un color independiente — es el último grado del sistema lavanda. Toda la oscuridad nace del mismo hue, lo que hace que los fondos vibren sutilmente con la lavanda cuando se combinan.
8 tokens · 4 rampas completas
Sistema Lavanda → Negro Mora (rampa completa)
Crema → Gris Cálido (sin marrón, desaturado)
Dorado — Primary / CTA
Salmón — M03 Cejillas (rosa-melocotón, no coral)
Malva · Acento rosado
#E2A300 sobre crema #FAF4E2 → ratio 3.2:1, no cumple WCAG AA. Para texto sobre crema usar siempre #0C0B0F o #7A5800
01b
City Pop
Degradados firma del sistema. Cada uno es un estado de ánimo, no una paleta. Se usan en heroes, portadas de módulo y materiales de campaña — nunca en UI funcional.
4 degradados · referencia City Pop · Japan años 80
02 · Tipografía
Sistema de fuentes
Tres familias con roles precisos. Playfair da peso y calidez editorial. Fira Sans Condensed construye la estructura técnica y muscular. Montserrat enlaza en cuerpo.
Display · Titulares
Playfair Display
400 italic · 700 · Bold Italic
Display · UI · Estructura
Fira Sans Condensed
400 · 600 · 700 · 800 · 900
A LA GUITARRA
Body L · Párrafo largo
Montserrat
300 · 400 · 500 · 600
Body M · Texto compacto
Fira Sans Condensed
400 · 500 · normal
FSC 900 · upper
FSC 800 + PD italic
FSC 700 upper
y la escala cromática
FSC 700 upper
Montserrat 300
FSC 400
FSC 700 upper
Uso en web · especificaciones operacionales
| Rol | Familia | Peso · estilo | Tamaño | Dónde |
|---|---|---|---|---|
| display-hero | FSC + Playfair Display italic | 800 + 400i | clamp(40px, 6vw, 96px) + clamp(20px, 3vw, 42px) | Héroes, portadas de módulo, campaña |
| h1-solo | Fira Sans Condensed | 900 · uppercase | clamp(32px, 5vw, 80px) | Títulos sin pairing (PPT, documentos) |
| h2 | Fira Sans Condensed | 700 · uppercase · ls .02em | clamp(20px, 2.5vw, 36px) | Títulos de sección en web y academia |
| eyebrow | Fira Sans Condensed | 700 · uppercase · ls .32em | 10–12px | Sobre-título, etiqueta de módulo, categoría |
| body-l | Montserrat | 300–400 · lh 1.75 | 15–18px | Párrafos, texto largo, descripciones de curso |
| body-m | Fira Sans Condensed | 400 · lh 1.65 | 13–15px | UI, etiquetas, notas, fichas, tablas |
| caption | Fira Sans Condensed | 700 · uppercase · ls .2em | 9–11px | Tags, precios, badges, meta de producto |
03 · Espaciado
Sistema de espacio
Escala 4pt. Todos los valores son múltiplos de 4. El espacio respira — nunca se comprime.
04 · Componentes UI
Librería de elementos
Botones, etiquetas, formularios y tarjetas. Todos comparten la misma gramática visual: sin radio en botones CTA, texto uppercase condensado, oro como acción principal.
Botones
Etiquetas · Tags
Formulario
Tu email
Tarjetas — Modo oscuro
Tarjetas — Modo claro (Escuela)
05 · Motivos Visuales
Iconografía y texturas
Elementos gráficos que vienen del instrumento. Las cuerdas como líneas de tensión. El traste como estructura. La onda como huella sonora.
Guitarrista
6 cuerdas horizontales. La primera en oro.
Productora de Audio
Forma de onda. Amplitudes irregulares en vertical.
Directora Musical
Batuta diagonal. Punta en oro.
Profesora
Metrónomo con péndulo en oro.
Técnica de Sonido
3 faders con sliders en oro. Mesa de mezclas.
Cantautora
Corazón con melodía en oro dentro.
Las Cuerdas
6 líneas horizontales. Cuerda 1 = oro. Cuerda 4 = lila. Cuerda 6 = salmon.
La Cruz
Intersección horizontal-vertical. Tensión y equilibrio. Traste + cuerda.
Forma de Onda
Amplitud irregular. Sonido como forma. Usa salmon.
Faders
Mesa de sonido. Barras verticales con niveles. Faceta de técnica.
Diagrama de Acorde
Representación de posición en el mástil. Dots en oro.
06 · Aplicación Web
luciazambudio.com
Dos modos, dos territorios. Oscuro para el portfolio artístico, la identidad, lo que Lucía es. Claro para la escuela, los cursos, lo que Lucía enseña.
| Contexto | Modo | Razón |
|---|---|---|
| Web general (luciazambudio.com) | Dark | Las fotos de Lucía funcionan mejor sobre oscuro |
| Academia · Escuela · Materiales didácticos | Light | Legibilidad y tono académico |
| PPT de módulo (portadas + slides) | Dark | Coherencia visual en presentación |
| Portadas de producto · Redes sociales | Dark | Impacto visual, coherencia con la marca artística |
Excepción: una portada de material académico puede ir en dark para dar impacto — pero el cuerpo del material siempre en light.
Modo oscuro · Portfolio · Artista
con criterio.
Modo claro · Escuela · Cursos
GUITARRA
07 · Aplicación Editorial
Materiales del curso
El mismo sistema visual en papel y pantalla. Las presentaciones PPTX, los apuntes PDF y las fichas de lección comparten tokens, tipografía y jerarquía.
Presentaciones PPTX
Apuntes PDF
08 · Variables CSS
Tokens completos
Copia y pega estos tokens al comienzo de cualquier archivo CSS o en el :root de Elementor para aplicar el sistema al completo.
| Variable | Valor | Uso |
|---|---|---|
| Fondos | ||
| --mora | #0D0C12 | Fondo base. El más oscuro. |
| --surface | #1C1B22 | Tarjetas, superficies sobre mora. |
| --surface-2 | #23222A | Hover states, capas intermedias. |
| --line | #2A2833 | Bordes, separadores, dividers. |
| Texto · Acentos | ||
| --cream | #FAF4E2 | Texto principal sobre fondos oscuros. |
| --gold | #E2A300 | Acento principal. CTAs. Números destacados. |
| --gold-h | #C99200 | Estado hover del gold. |
| --salmon | #DC977B | Acento cálido. Énfasis editorial. Cursivas. |
| --lila | #9B8FB8 | Acento frío. Portfolio, em en títulos. |
| --mauve | #886675 | Acento rosado. Puto Pop. Proyecto artístico. |
| --warm-gray | #6E6C68 | Texto secundario, subtítulos, dim. |
| Modo claro · Escuela | ||
| --light-bg | #FAF4E2 | Fondo base del modo claro. |
| --light-surface | #F2EAD0 | Cards y superficies en modo claro. |
| --light-border | #DDD5B8 | Bordes en modo claro. |
| --light-text | #1A1826 | Texto principal modo claro. |
| --light-muted | #6B6455 | Texto secundario modo claro. |
| Tipografías | ||
| --fe | 'Playfair Display' | Display, titulares editoriales, cursivas. |
| --fd | 'Fira Sans Condensed' | Eyebrow, UI, etiquetas, estructura. |
| --fb | 'Montserrat' | Cuerpo de texto, párrafos. |
CSS · Copiar y pegar
:root {
--mora: #0D0C12;
--surface: #1C1B22;
--surface-2: #23222A;
--line: #2A2833;
--warm-gray: #6E6C68;
--lila: #9B8FB8;
--mauve: #886675;
--salmon: #DC977B;
--gold: #E2A300;
--gold-h: #C99200;
--cream: #FAF4E2;
--light-bg: #FAF4E2;
--light-surface:#F2EAD0;
--light-border: #DDD5B8;
--light-text: #1A1826;
--light-muted: #6B6455;
--fe: 'Playfair Display', Georgia, serif;
--fd: 'Fira Sans Condensed', sans-serif;
--fb: 'Montserrat', sans-serif;
}