AR./ Design System · v2.0.0
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.

Versiónv2.0.0
Estado● Activo
Stack targetVue / Nuxt 3
Última act.Mayo 2026
/ 00

Filosofía de diseño

4 principios fundamentales
/ 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

2 paletas · 11 tokens c/u
/ 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

3 familias · 9 estilos definidos
/ 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.
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

3 densidades · 3 escalas

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 col · gutter 32 · max 1280
12
8
4
6
6
4
4
4
Grid principal · 12 columnas · 8px gutterContainer: 1280px max
/ 05

Buttons & CTAs

2 variantes · 3 estados
/ 05.A

Primary button

Fondo tinta sólida, hover transiciona al accent. Sharp corners (0 radius). Type mono uppercase con icono opcional.

.btn.btn-primary · padding 11px 16px · 11px / 0.04em / UPPERSharp corners — radius 0
/ 05.B

Ghost button

Borde rule, sin fill. Para acciones secundarias. Hover oscurece el borde a tinta sólida.

↓ Download CV
.btn.btn-ghost · border var(--rule) · color var(--ink-2)Hover: border = var(--ink)
/ 06

Tags & chips

Stack labels · pills · status
/ 06.A

Stack tags

Tecnologías, herramientas. Lowercase mono con borde rule.

vue.jsnuxtshopifygraphqltypescript
/ 06.B

Pill (featured)

Fill sólido con accent — para destacar el modo sugerido, oferta, etc.

SugeridoNuevov2.0.0
/ 06.C

Status indicator

Disponibilidad, deploy status, completion.

Disponible✓ Shipped⚡ Live
/ 07

Form fields

input · select · textarea
.field · font-family: mono · 13px · padding 12px 14px · border var(--rule)Focus: border = var(--ink)
/ 08

Cards & tiles

Mode · Service · Industry
/ 08.A

Mode cell

Used in landing selector. Fila de 3 cells separadas por reglas verticales — no card flotante.

MODO / 01
Sugerido

Website

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

Continuous scroll · 60s loop
● 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

Display 220px · italic accent

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

3 columns · baseline aligned
/ 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

Project table · 6 col grid
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
shopifyhydrogenheadless
Editorial row: 56 / 1fr / 200 / 180 / 120 / 40 · gap 24 · padding 22 verticalHover: padding-left + bg-2
/ 15

Voice & tono

Bilingüe · español primario
✓ 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