Design SystemDesign System
Design System
v1.0
The visual language, components, and principles that shape every pixel of this site. Product-obsessed, minimal, and bold.
product-obsessed · minimal · bold
Color Palette — Primary
Orange inspired by Claude's warmth. The core accent that runs through every interaction.
50
#FFF7ED
100
#FFEDD5
200
#FED7AA
300
#FDBA74
400
#FB923C
500
#E8742A
600
#D4622A
700
#B84D1E
800
#93400D
900
#7C2D12
Color Palette — Neutral
Deep, warm blacks. Not blue-tinted — these have a stone/earth warmth (Stone palette) reflecting Argentine tierra.
0
#FFFFFF
50
#FAFAF9
100
#A8A29E
200
#78716C
300
#57534E
400
#3D3935
500
#1C1917
600
#171412
700
#12100E
800
#0C0A09
900
#080706
Color Palette — Accent
Secondary accents drawn from Cosmico's pampa aesthetics: mate green, pampa gold, and Córdoba sky.
mate
#A3B86C
pampa
#D4A76A
sky
#7CA5C4
Typography
STIX Two Text — a serif with intellectual gravity. Pairs academic precision with readability. Monospace for code and metadata.
Display / Headlines — STIX Two Text
Build products, not features.
Body — STIX Two Text Regular
Every line of code should serve a user. Every feature should solve a real problem. I believe in lean principles, obsessive craft, and the power of shipping something small that works beautifully.
Mono / Metadata — JetBrains Mono
const impact = code × empathy × iteration;
Type Scale
display-lgAa48px / 700
displayAa36px / 700
headingAa24px / 600
subheadingAa18px / 600
bodyAa16px / 400
body-smAa14px / 400
caption (mono)Aa12px / 500
Spacing & Radii
4px base grid. Generous whitespace following Vercel's ethos — let content breathe.
4
8
12
16
24
32
48
64
96
none (0px)
sm (4px)
md (8px)
lg (12px)
xl (16px)
Shadows & Effects
Subtle depth with warm undertones. The glow effect uses primary orange for hover states.
sm
md
lg
glow
glowStrong