Sistema de diseño
Los tokens y componentes con los que está hecho este sitio, renderizados en vivo desde el mismo CSS. Cambia la paleta de acento o el tema y todo lo de abajo —y el resto del sitio— lo sigue.
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. Tu elección se guarda en este navegador.
Tokens de color
Neutros cálidos en OKLCH. Los valores cambian con 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
Tipografía
Newsreader para títulos y lectura, Hanken Grotesk para la interfaz. Ambas alojadas en el sitio como fuentes variables recortadas.
Display — Newsreader 400Rodrigo
Título de sección — Newsreader 400Tipografía
Encabezado — Newsreader 500Hangar Design System
Cuerpo — Hanken Grotesk 400, 17px
Sistemas frontend que escalan entre equipos: tokens compartidos, componentes accesibles y los pipelines que los publican.
Etiqueta — Hanken Grotesk 600, mayúsculasStaff Frontend Engineer
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