Behind this site

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.

Foundation artifact  ·  Brand

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.

01 · The mark

Infinity, an A, and a closed system in one glyph.

Infinity, an A, and a closed system in one glyph.

02 · Color exploration

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.

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.

03 · Typography

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.

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.

04 · Token systems

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.

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.

05 · The runner-up

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.

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.

06 · The direction that shipped

Homepage C · Light with Conviction.

The wireframe of the site you're reading right now, locked 2026-06-16. Crimson on paper. Deep Teal as the second voice. Same DM Sans running text as the Aubergine detour above.

The wireframe of the site you're reading right now, locked 2026-06-16. Crimson on paper. 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.

--color-brand · #8C1A1A--color-accent · #0F3D3E--color-paper · #FCFAF9--color-ink · #1A1A1A

Stack.

What ships this page.

  • Framework: Next.js App Router, TypeScript.
  • Hosting: Vercel. main deploys to barreiro.com; staging deploys to staging.barreiro.com.
  • Design source: Figma. Every screen begins there and gets translated by hand.
  • Typography: DM Sans for interface. Lora for editorial pull quotes. Barlow Condensed for section §-headings on the case studies.
  • Motion: Native CSS transitions. IntersectionObserver for scroll reveals. No animation library.
  • 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