Sistema de diseño
Los tokens y componentes con los que está hecho este sitio, renderizados en vivo desde el mismo CSS. Cambia el estilo base, la paleta de acento o el tema y todo lo de abajo —y el resto del sitio— lo sigue.
Estilo base
Cada estilo define sus propios neutros y paletas de acento. Cosmos: índigo frío con acentos saturados. Paper: papel cálido con acentos terrosos, el look original.
Paletas de acento
Un acento por paleta, con una variante de texto más oscura en modo claro y otra más clara en modo oscuro, y dos tonos complementarios (los puntos pequeños) para las ilustraciones. Las paletas cambian con el estilo base; tu elección se guarda en este navegador.
Tokens de color
Neutros del estilo base actual, en OKLCH. Los valores cambian con el estilo y el tema.
--paperFondo de página--paper-2Superficies elevadas--cardTarjetas y chips--inkTexto principal--ink-softTexto de lectura--mutedTexto secundario--faintDecoración--lineBordes--line-softDivisores--accentAcento--accent-inkTexto de acento--accent-softTinte de acento--accent-2Ámbar de ilustración--accent-3Turquesa de ilustración
Tipografía
Newsreader para títulos y lectura, Hanken Grotesk para la interfaz. Ambas alojadas en el sitio como fuentes variables recortadas.
Sistemas frontend que escalan entre equipos: tokens compartidos, componentes accesibles y los pipelines que los publican.
Layout
--maxw1080pxAncho del contenido--padclamp(20px, 5vw, 64px)Margen de páginaradius6px · 7px · 999pxChips y tarjetas · imágenes · píldoras y botones
Componentes
Movimiento
Toda animación está detrás de prefers-reduced-motion: no-preference y vuelve al layout estático.
- Hover
0.2s easeColor, opacidad, flechas- Reveal
0.7s cubic-bezier(0.2, 0.7, 0.2, 1)Secciones que aparecen al hacer scroll- Cascada
pasos de 35–120msChips, entrada del hero, contadores- Por scroll
animation-timeline: view()Línea del timeline de experiencia- Página
View transitionsTítulos compartidos entre /work y los casos