Design System ·
Tinta sobre papel. El portfolio corre sobre un solo sistema editorial: un escritorio crema, hojas más claras enmarcadas en tinta, un acento rojo lapicera mezclado en tres temperaturas y un tintero oscuro para cerrar. Esta página lo documenta, construida con el mismo sistema que describe.
Tinta sobre papel
La metáfora guía cada decisión. La página es un escritorio crema; cada proyecto es una hoja más clara enmarcada con borde de tinta y doble filete de imprenta; el énfasis se dibuja a mano en rojo lapicera; y el sitio termina levantando el papel para revelar el tintero: un acto final oscuro donde vive el contacto. Tres colores sostienen todo el caparazón: crema, tinta y un rojo. El resto es escala, la serif a 8vw contra 15.5px de cuerpo.
El caparazón sostiene a propósito cuatro sistemas de producto autocontenidos: Fika con su azul SaaS, Pack con su óxido cálido, Eventbrite con su rojo señal, y Gran DT que va más lejos: un mundo oscuro de cancha nocturna con tipografías propias, porque es el único que salió a producción. Cada producto se siente él mismo y no el portfolio: un escritorio, cuatro objetos distintos encima.
Tokens
Cada color es una CSS custom property con rol semántico. Tres superficies cuentan toda la historia: escritorio, hoja, tintero. El acento es un solo rojo mezclado tres veces, porque un mismo rojo no puede pasar WCAG AA sobre crema y sobre tinta a la vez.
Superficies
Rampa de tinta
Un rojo, tres temperaturas
Paletas por proyecto — cuatro sistemas autocontenidos
Cinco voces
Tres familias, cinco roles fijos. Source Serif 4 lleva el display (900) y el registro editorial (400); Hanken Grotesk habla frases de contrapunto y cuerpo; JetBrains Mono solo aparece entre corchetes.
Gestos recurrentes
La identidad vive en un puñado de gestos repetidos. Cada uno aparece al menos dos veces en el sitio, así nada se lee como efecto suelto.
Medidas del layout
Escenas a sangre completa con un mismo ritmo de bordes; el caparazón mantiene radios y sombras en una escala corta y deliberada.
| Medida | Valor | Dónde |
|---|---|---|
| Margen de borde | clamp(24px, 4vw, 72px) | Láminas, doble página del tintero |
| Alto de escena | min-height: calc(100svh - 112px) | Cada proyecto es una escena casi-viewport |
| Escala de radios | 4 / 12 / 16 / 44 / 999 | Lámina / browser / pantallas / hoja que se levanta / píldoras. El chasis de los dispositivos y los mockups de producto traen sus propios radios. |
| Sombras | rgba(33,33,29, …) — tinta cálida, nunca negro azulado | Dispositivos, hoja que se levanta |
| Acto final | sticky bottom · 100svh - ~120px | El tintero queda clavado; ~120px de papel quedan visibles al final |
| Salto tipográfico | display ≥ 8vw vs cuerpo 15.5px | Monumento o servicio — sin tamaños intermedios |
Accesible por diseño
El sistema incluye sus límites: cada floritura decorativa tiene un fallback funcional.
--pen-text da 4.5:1+ sobre claro, --pen-night ~5:1 sobre oscuro.h1 (solo para lectores, sobre los ríos decorativos), landmarks de header/main/footer, skip link, focus-visible en todo.content: "001" / ""; los mockups son aria-hidden.