How this site is built.
The palette decision, the design system underneath it, and the stack that ships it. Written for the people who look at the source view for fun.
An infinity-A into B monogram, Alfonso Barreiro, and alpha beta design.
An infinity-A monogram, dual-purpose. The loop is Alpha + Beta (the studio). The A-arrow is the designer. Used at 24 px in nav today; here it sits back up to its proper role as the anchor of the brand.
Infinity, an A, and a closed system in one glyph.
Where the brand went warm.
Cognac, Burnt Sienna, and other warm-editorial candidates the mark tried on before Crimson locked. The register was always warm; the specific hue took iterations.
How Alfonso Barreiro reads.
Three type pairings tested against the wordmark: DM Serif Display + DM Sans, Fraunces + DM Sans, Newsreader + Inter. The specimen block underneath shows editorial + running text together — the two registers the site needs to hold.
Tokens graded against real UI, not swatches.
Surface / Brand / Accent / Ink token quartets across the shortlist. Each row also carries a live preview so the tokens are graded against real UI, not swatches in isolation.
The Aubergine detour.
Applied to a full homepage before the direction pivoted. The runner-up that got the shipping palette its confidence: I ruled Aubergine out only after seeing it at production scale.
Homepage C · Light with Conviction.
The wireframe of the site you're reading right now, locked 2026-06-16. Terracotta on Navy. Deep Teal as the second voice. Same DM Sans running text as the Aubergine detour above.
The system underneath it.
Barreiro.com runs on Alpha Beta Design, a portable design system I maintain for client work. Same tokens, same components, same layout scaffolding that powers Men's Sole Revival and Wayfarer. The brand swap between projects is a variable change, not a rebuild.
Roles instead of literal names. --color-brand instead of --crimson. --color-accent instead of --deep-teal. Each project points those variables at its own hexes and the system does the rest.
Stack.
What ships this page. Seven layers, top-down.
Framework
Next.js App Router. TypeScript. Server components where they fit, client where they earn it.
Hosting
main ships to barreiro.com. staging ships to staging.barreiro.com. Vercel + GitHub auto-deploy.
Design source
Figma. Every screen begins there and gets translated to code by hand.
Typography
DM Sans for the interface. Lora for editorial pull quotes. Barlow Condensed for section §-headings on case studies.
Motion
Native CSS transitions. IntersectionObserver for scroll reveals. Zero animation libraries.
Content
Written in plain sentences under a voice profile that bans em dashes, motivational closers, and AI-tell vocabulary. Every user-facing string goes through it.
Analytics
None. If you're here, you're here.
Built solo. Every design decision, every commit, every line of copy signed by the same hand.
Alfonso Barreiro, Portland, OR, 2026.