[ PORTFOLIO · LENGUAJE DE DISEÑO ]
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.
[ 01 · EL SISTEMA ]
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. La tipografía grita (una serif negra a escala de río), el color casi calla: crema, tinta y un rojo.
El caparazón sostiene a propósito tres sistemas de producto autocontenidos: Fika con su azul SaaS, Pack con su óxido cálido, Eventbrite con su rojo señal. Cada producto se siente él mismo y no el portfolio — un escritorio, tres objetos distintos encima.
[ 02 · COLOR ]
Tokens
Cada color es una CSS custom property con rol semántico. Tres superficies cuentan toda la historia — escritorio, hoja, tintero — y el único acento viene en tres temperaturas, cada una mezclada para su fondo y verificada contra WCAG AA.
Superficies
Rampa de tinta
Un rojo, tres temperaturas
Paletas por proyecto — tres sistemas autocontenidos
[ 03 · TIPOGRAFÍA ]
Cinco voces
Tres familias, cinco roles fijos. Nada intermedio: el texto o es un monumento o está a su servicio. Source Serif 4 lleva el display (900) y el registro editorial (400); Hanken Grotesk habla statements y cuerpo; JetBrains Mono solo aparece entre corchetes.
[ 04 · MOTIVOS ]
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.
[ 05 · ESPACIO Y FORMA ]
Specs de layout
Escenas a sangre completa con un mismo ritmo de bordes; radios y sombras en una escala corta y deliberada.
| Spec | Valor | Dónde |
|---|---|---|
| Gutter 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 / pills |
| 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 |
[ 06 · ACCESIBILIDAD ]
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. La tecnología asistiva escucha solo significado.