🎨 Visual Style Guide
Maintain aesthetic consistency of the Solarpunk Witnesses universe in all your creations
🌈 Main Color Palette
Solar Yellow
var(--madfam-yellow)
Main accents, CTAs, highlights
Sustainable Green
var(--madfam-green)
Natural elements, secondary buttons
Creative Purple
#9C27B0
Artistic elements, badges, creativity
Technological Blue
var(--madfam-blue)
Links, tech elements, data
Community Orange
#FF5722
Social elements, human warmth
📝 Typography
Main Titles
Font: Poppins Bold
Size: 2.5rem - 4rem
Usage:
H1, hero titles
Subtitles
Font: Poppins SemiBold
Size: 1.5rem - 2rem
Usage:
H2, H3, sections
Body Text
Font: Poppins Regular
Size: 1rem
Usage:
Paragraphs, content
Code/Technical
Font: JetBrains
Mono
Size: 0.875rem
Usage:
Codes, metadata
✂️ Magazine Cutout Aesthetic
Key Principles
- 📄 Irregular Borders: Use clip-path to create cut paper borders
- 🎨 Paper Textures: Noise and grain effects to simulate real paper
- 💫 Realistic Shadows: Drop shadows that simulate paper on surface
- 🎭 Vibrant Colors: Saturated palette like 70s magazines
Example of emoji with cutout aesthetic
📸 Visual References by Context
Neo-Cuernavaca Urban
- Bioclimatic architecture
- Vertical gardens
- Clean transportation
- Community plazas
Technological Spaces
- Bio-tech laboratories
- Integrated solar panels
- Holographic interfaces
- Minimalist design
Character Wardrobe
- Sustainable materials
- Earth + vibrant colors
- Technological accessories
- Functional-aesthetic style
⚙️ CSS Design Tokens
/* Main Colors */
--amarillo-solar: var(--madfam-yellow);
--verde-sostenible: var(--madfam-green);
--purpura-creativo: #9C27B0;
--azul-tecnologico: var(--madfam-blue);
--naranja-comunidad: #FF5722;
/* Spacing */
--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%
);
/* Transitions */
--transicion-rapida: 0.2s ease;
--transicion-normal: 0.3s ease;
--transicion-lenta: 0.5s ease;