Editorial Document · Design System
Un sistema editorial, no un kit de SaaS.
Este design system soporta el portafolio de Alfredo Romero. Toma su lenguaje de un documento técnico editorial: tipografía mixta (display serif + mono técnica), color crema/tinta con un acento vermillion, y composiciones gobernadas por grids estrictos y reglas finas.
/ 00
Filosofía de diseño
/ 01
Documento, no app
La página se lee, no se "usa". El contenido manda. Las decisiones de jerarquía vienen del periódico antes que del dashboard.
/ 02
Tipo dramático, datos discretos
El display serif italic carga el peso emocional. Los datos viven en mono pequeña, casi en pie de página. Nada de "stat slop".
/ 03
Reglas, no tarjetas
El sistema usa líneas finas (1px) en vez de bordes redondeados y sombras. Las grillas se cierran con reglas, los tarjetas no flotan.
/ 04
Un acento, usado raro
Vermillion (light) o ámbar (dark) son el único color cromático. Aparece solo en italics, links, métricas y CTAs. Nunca como background grande.
/ 01
Color system
/ 01.A
Ink (default, dark)
Paleta principal. Fondo casi-negro cálido, tinta crema, acento ámbar tibio. Lectura nocturna prolongada.
--bgoklch(0.12 0.008 60)Background base
--bg-2oklch(0.16 0.008 60)Surface 1
--bg-3oklch(0.22 0.010 60)Surface 2
--inkoklch(0.96 0.006 80)Text primary
--ink-2oklch(0.82 0.008 80)Text body
--ink-3oklch(0.62 0.008 80)Text muted
--ink-4oklch(0.42 0.008 80)Text disabled
--ruleoklch(0.28 0.008 60)Hairlines
--rule-2oklch(0.38 0.008 60)Stronger rules
--accentoklch(0.72 0.16 60)Accent (amber)
--accent-inkoklch(0.14 0.008 60)Text on accent
/ 01.B
Cream (light)
Modo claro. Off-white cálido tirando a papel reciclado, tinta carbón profunda y acento vermillion. Para impresión y dossiers.
--bgoklch(0.965 0.012 80)Background base
--bg-2oklch(0.945 0.014 80)Surface 1
--bg-3oklch(0.915 0.018 80)Surface 2
--inkoklch(0.18 0.012 60)Text primary
--ink-2oklch(0.32 0.012 60)Text body
--ink-3oklch(0.52 0.012 60)Text muted
--ink-4oklch(0.72 0.012 60)Text disabled
--ruleoklch(0.85 0.012 60)Hairlines
--rule-2oklch(0.78 0.012 60)Stronger rules
--accentoklch(0.58 0.18 35)Accent (vermillion)
--accent-inkoklch(0.97 0.01 80)Text on accent
/ 02
Tipografía & voz
/ 02.A
Pairing tipográfico
Instrument Serif (display) · Geist (cuerpo) · Geist Mono (técnica / labels). El italic del serif es lo que da personalidad — usar para énfasis, nunca para párrafos enteros.
Display H1
Instrument Serif · 160px / 0.88 / -0.03em
Hero statements
Construyo
productos.
productos.
Display H2
Instrument Serif · 64px / 0.95 / -0.02em
Section heads
Trayectoria profesional
Display H3
Instrument Serif · 28–32px / 1.1 / -0.02em
Project titles · roles · philosophy
Headless E-commerce Build
Lead italic
Instrument Serif Italic · 24–28px / 1.4 / -0.005em
Pull quotes, intros
Llevo +10 años construyendo software que la gente usa de verdad.
Body
Geist · 15–17px / 1.55 / 0
Párrafos, descripciones
Senior fullstack focado en e-commerce, headless CMS y aplicaciones web custom. He liderado equipos técnicos y desarrollado soluciones para marcas en USA y Europa.
Mono technical
Geist Mono · 13px / 1.5 / 0.02em
Datos, fechas, code
const portfolio = "v2.0.0";
Mono label
Geist Mono · 10–11px / 0.18em / UPPER
Eyebrows, kickers, captions
/ 02 · Trabajo Seleccionado · Edición 2026
Mono tag
Geist Mono · 10px / 0.04em / lower
Stack tags, filters
vue.jsnuxttypescript
Numbers (display)
Instrument Serif · 40–48px / 1 / -0.02em
Hero metrics, industries
50+920+
/ 03
Spacing & density
El sistema tiene tres escalas (--pad, --pad-2, --pad-3) que cambian de valor según la densidad seleccionada. Default es Airy — un documento editorial respira mejor.
--pad
32px / 24 / 16
--pad-2
64px / 48 / 32
--pad-3
128px / 96 / 64
/* Densities */[data-density="compact"] { --pad: 16px; --pad-2: 32px; --pad-3: 64px; } [data-density="default"] { --pad: 24px; --pad-2: 48px; --pad-3: 96px; } [data-density="airy"] { --pad: 32px; --pad-2: 64px; --pad-3: 128px; } /* default */
/ 04
Grid system
12
8
4
6
6
4
4
4
Grid principal · 12 columnas · 8px gutterContainer: 1280px max
/ 07
Form fields
.field · font-family: mono · 13px · padding 12px 14px · border var(--rule)Focus: border = var(--ink)
/ 08
Cards & tiles
/ 08.A
Mode cell
Used in landing selector. Fila de 3 cells separadas por reglas verticales — no card flotante.
MODO / 01↗
SugeridoWebsite
Portafolio · Cases
Lectura larga. Cv, experiencia, proyectos en formato documento.
MODO / 02↗
E-commerce
Servicios · Cotización
Servicios como tienda. Agrega al carrito y recibe propuesta.
MODO / 03↗
Web App
Métricas · Stack
Vista técnica. Carrera, skills, proyectos como SaaS.
/ 08.B
Industry cell
Para "industrias que confían". Número display grande, tag mono. Sin logo.
08
Fashion & Retail
→ USA
05
Beauty
→ Francia
04
Media
→ Colombia
03
Tourism
→ Venezuela
/ 10
Marquee rail
● Available for senior fullstack roles★ Senior Fullstack EngineerBuilding with Vue · Nuxt · Shopify● 50+ shipped projects★ Bogotá · USA · EU● Available for senior fullstack roles★ Senior Fullstack EngineerBuilding with Vue · Nuxt · Shopify
.rail — items repetidos x2 dentro de .rail-trackAnimation: marquee 60s linear infinite
/ 11
Patrón: typographic hero
Construyo
productos que
escalan & convierten.
Patrón: word + italic word + ampersand rotado · 1-2-3 line breaksItalic accent ratio ~25–35%
/ 12
Patrón: section head
/ 02
Trabajo seleccionado
7 proyectos · 2024
Section head: número, título display (con italic + accent), meta mono right-alignedBaseline shared
/ 13
Patrón: editorial row
002
US Fashion E-commerce Platform Tienda online headless de alto tráfico con UX premium e integraciones múltiples.
CALPAK · Fashion USA · 2023
-40%load time
+26%conversion
→
Editorial row: 56 / 1fr / 200 / 180 / 120 / 40 · gap 24 · padding 22 verticalHover: padding-left + bg-2
/ 14
Brand mark
AR.
Wordmark: A + R italic accent + period. Sin símbolo separado.Clear space: height of "R"
AR.
AR.
AR.
AR.
Variaciones: default · inverso · accent · mono compact4 / 4
/ 15
Voice & tono
✓ Hacemos esto
- — Hablamos en primera persona, con autoridad técnica pero sin pomposidad.
- — Métricas concretas: "-40% load time", "+26% conversion".
- — Spanglish técnico cuando es natural ("headless", "stack", "deploy").
- — Microcopy mono en uppercase para chrome y datos.
✕ Evitar
- × Buzzwords vacíos: "synergy", "innovación disruptiva", "next-gen".
- × Adjetivos tipo "world-class", "best-in-class", "cutting-edge".
- × Emojis decorativos en copy formal. Solo si pertenecen al brand.
- × Mayúsculas inglesas en títulos en español ("Sobre Mí" → "Sobre mí").
AR Design System · v2.0.0Exportable a Figma con plugins como html.to.design© 2026