🎨 Guía de Estilo Visual
Mantén la consistencia estética del universo Testigos de Solarpunk en todas tus creaciones
🌈 Paleta de Colores Principal
Amarillo Solar
var(--madfam-yellow)
Acentos principales, CTAs, highlights
Verde Sostenible
var(--madfam-green)
Elementos naturales, botones secundarios
Púrpura Creativo
#9C27B0
Elementos artísticos, badges, creatividad
Azul Tecnológico
var(--madfam-blue)
Enlaces, elementos tech, datos
Naranja Comunidad
#FF5722
Elementos sociales, calor humano
📝 Tipografía
Títulos Principales
Fuente: Poppins Bold
Tamaño: 2.5rem - 4rem
Uso: H1, títulos hero
Subtítulos
Fuente: Poppins SemiBold
Tamaño: 1.5rem - 2rem
Uso: H2, H3, secciones
Texto Cuerpo
Fuente: Poppins Regular
Tamaño: 1rem
Uso: Párrafos, contenido
Código/Técnico
Fuente: JetBrains Mono
Tamaño: 0.875rem
Uso: Códigos, metadatos
✂️ Estética Magazine Cutout
Principios Clave
- 📄 Bordes Irregulares: Usa clip-path para crear bordes de papel recortado
- 🎨 Texturas de Papel: Efectos de ruido y grano para simular papel real
- 💫 Sombras Realistas: Drop shadows que simulan papel sobre superficie
- 🎭 Colores Vibrantes: Paleta saturada como revistas de los 70s
Ejemplo de emoji con estética cutout
📸 Referencias Visuales por Contexto
Neo-Cuernavaca Urbano
- Arquitectura bioclimática
- Jardines verticales
- Transporte limpio
- Plazas comunitarias
Espacios Tecnológicos
- Laboratorios bio-tech
- Paneles solares integrados
- Interfaces holográficas
- Diseño minimalista
Vestuario Personajes
- Materiales sostenibles
- Colores tierra + vibrantes
- Accesorios tecnológicos
- Estilo funcional-estético
⚙️ Design Tokens CSS
/* Colores Principales */
--amarillo-solar: var(--madfam-yellow);
--verde-sostenible: var(--madfam-green);
--purpura-creativo: #9C27B0;
--azul-tecnologico: var(--madfam-blue);
--naranja-comunidad: #FF5722;
/* Espaciado */
--espacio-xs: 0.25rem;
--espacio-sm: 0.5rem;
--espacio-md: 1rem;
--espacio-lg: 1.5rem;
--espacio-xl: 2rem;
--espacio-xxl: 3rem;
/* Magazine Cutout */
--cutout-border: polygon(
2% 0%, 98% 2%, 100% 8%, 98% 92%,
100% 98%, 92% 100%, 8% 98%, 0% 92%, 2% 8%
);
/* Transiciones */
--transicion-rapida: 0.2s ease;
--transicion-normal: 0.3s ease;
--transicion-lenta: 0.5s ease;