system · 体系

The system
behind the site.

A small, disciplined set of tokens, types and components. Documented so future Luis remembers what past Luis decided.
01 · type
display · xxl
132 · 0.96 · 300
Aa Bb
display · xl
72 · 0.98 · 300
Senior product designer.
headline · l
44 · 1.05 · 400
Selected work, 2017 — 2026
headline · m
30 · 1.1 · 400 italic
Eight projects, four worth showing.
body · lg · serif
19 · 1.55 · 400
Nine years shipping quiet, useful products at scale.
body · base · sans
15 · 1.5 · 400 · Inter Tight
Inter Tight 400 — used only for UI labels and forms.
caption · mono
10 · 0.22em · UC · JetBrains
NO 001 · MMXXVI · BUENOS AIRES
02 · color
--paper
#F4F1EA
canvas · washi
--paper-deep
#EBE6DB
panels · sections
--paper-warm
#EDE5D4
hover band
--ink
#1A1815
primary text · 16.4:1
--ink-soft
#3A3530
body · 10.2:1
--ink-mute
#79706A
captions · 4.8:1
--ink-faint
#B8B0A4
tertiary · placeholders
--vermilion
#9B3A2A
朱 · primary accent · ≤5%
--indigo
#2D3F5C
藍 · links · cool accent · ≤3%
--matcha
#6B7A4D
抹茶 · status · available
--ochre
#A87F3A
黄土 · recognition · rare
03 · components
buttons & links
inline link← Back
status pills
available Q3buenos aires · remoteawwwards 2024
spacing scale (px)
4
8
12
16
24
32
48
64
96
128
rules of the system
  • Radius: 0, 2, ∞ — nothing in between.
  • Shadow: none. Use hairlines and contrast instead.
  • Vermilion is the loudest color. Spend it like money.
  • Indigo is the cooler counterpoint. For links and quiet emphasis.
  • One italic per page, no more. It is a punctuation mark.
  • Mono is metadata. Never body copy.