Sistema de diseño
Lo mínimo para que todas las páginas se construyan con las mismas piezas. Cada valor existe como variable en assets/css/main.css y debe trasladarse a los ajustes globales de Elementor.
Logotipo
Se conserva el logotipo actual (símbolo salvia y wordmark caligráfico grafito), vectorizado desde el archivo publicado. Se añade una versión horizontal para el header y versiones claras para fondos oscuros. La caligrafía vive solo en el logo: no se usa como tipografía de interfaz.
Vertical · original
Horizontal · header
Claro · fondos oscuros
Símbolo · favicon y avatarColor
Derivado del símbolo (salvia), del wordmark (grafito), del verde que ya usa el sitio (#656742) y de la luz dorada de la fotografía de Vibra Fest (ámbar). El ámbar es escaso a propósito: marca la brújula, el foco y el paso activo.
#1B1C15 · secciones oscuras
#2C2E1F · bloques destacados
#4C5032 · botón primario
#656742 · heredado del sitio
#959863 · símbolo
#C3C59F · texto sobre oscuro
#E4E5D3 · selección
#F1F0E9 · fondo
#FBFBF7 · tarjetas
#20211A · texto
#55574B · texto secundario
#C4863A · acento
Tipografía
Newsreader (serif editorial con ejes de peso y tamaño óptico) para títulos, cifras y citas; la cursiva marca el giro de cada frase. Hanken Grotesk para texto, interfaz y formularios. Ambas libres (SIL OFL) y autoalojadas. Capitalización española en todos los títulos.
--t-xxl · Newsreader 340Necesita dirección.--t-xl · h1 interioresPocas personas. Verificadas.--t-l · h2 de sección¿Qué estás viviendo?--t-m · h3, tarjetasGuía «Tu brújula interior»--t-s · leadTe ayudamos a entender qué necesitas hoy.--t-base · Hanken 400Cada profesional de la Red pasó por una selección antes de aparecer aquí.eyebrow · Hanken 500Sin mayúsculas sostenidasComponentes
Botones y enlaces
Enlace con flecha Enlace suave
Forma de píldora: eco del círculo del símbolo. Un solo botón primario por bloque.
Etiquetas y estados
«Ejemplo» marca contenido ilustrativo en el prototipo. Desaparece en producción.
Formulario
El hilo
Línea vertical con nodos, tomada del tallo y el círculo del símbolo. Se usa solo donde hay un recorrido: progreso del test, pasos de la ruta, línea de tiempo.
- Te ubicas
- Recibes tu ruta
- Eliges con quién avanzar
Forma, espacio y movimiento
Radios
3 px en fotos y tarjetas (editorial), 6 px en campos, píldora en botones y etiquetas.
Espacio
Escala de 8 (8, 16, 24, 32, 48, 64, 96, 128). Secciones de 72 a 144 px según ancho. Rejilla de 12 columnas, máximo 1320 px.
Sombras
Una sola, para elementos flotantes y tarjetas al pasar el cursor. Nada de degradados decorativos.
Fotografía
Documental, real, de los encuentros. Color natural; blanco y negro solo como contrapunto. Recortes con punto focal definido.
Movimiento
Aparición suave al hacer scroll, cambio de foto en la lista de temas, transición entre preguntas. Todo se desactiva con «reducir movimiento».
Ritmo de fondos
Papel, blanco, noche y olivo se alternan para separar capítulos sin líneas ni cajas.