La identidad visual de la marca. Una sola fuente de verdad para que todo lo que produzca —propuestas, contratos, bocetos, documentos— se vea coherente y profesional, sin tener que revisar el portafolio cada vez.
Base oscura verde bosque con un acento lima vibrante. El acento se usa con criterio: CTAs, links y detalles — no para grandes superficies.
Una sola familia para todo (variable, pesos 300–700). Títulos con tracking negativo (-0.02em); etiquetas en mayúsculas con tracking amplio.
Forma de píldora (border-radius:50px), peso 600, leve tracking. El primario es lima sólido con glow; el secundario es contorno.
Fondo elevado, borde sutil, radio medio. En hover: el borde se tiñe de lima y aparece el glow.
La misma identidad de punta a punta, sin parches.
Plazos definidos y comunicación directa.
Te dejo todo listo y te enseño a mantenerlo.
| --radius-sm / md / lg / pill | 8px · 14px · 20px · 50px (píldoras) |
| --shadow-1 | 0 8px 30px rgba(0,0,0,.25) — sombra base |
| --shadow-glow | 0 0 40px rgba(122,193,66,.15) — glow lima |
| --ease-out | cubic-bezier(.22,1,.36,1) — la curva de todo |
| --dur-fast / base | .15s · .3s |
| espaciado | escala 8 · 12 · 16 · 24 · 40 · 64 · 96px |
| animación de entrada | clase .fade-in con IntersectionObserver; respetar prefers-reduced-motion |
:root del <style> de este archivo al inicio de cualquier documento nuevo y usá las variables (var(--accent), etc.) en vez de hardcodear colores. Cargá Space Grotesk desde Google Fonts si el archivo no tiene la fuente local del portafolio.
Para contextos de las clases de ajedrez existe un tema alternativo claro, con la paleta del tablero: crema #F0D9B5 / marrón acento #B58863, texto #2F2014. Misma tipografía y tokens. Usar solo en material de ajedrez; el resto va con la marca principal.