How this site is built.
The mark, the design system underneath it, the stack that ships it, and the eight elements that came off in a twenty-portfolio audit. Written for the people who look at the source view for fun.
The mark.
Infinity, an A, and a closed system in one glyph. The loop is Alpha and Beta, the design studio behind the client work. The A-arrow inside is the designer. Used at 24 px in the nav, and specified end-to-end in the Figma brand book.
Sizes, variants, and rules — the spec.
Five test sizes on paper ground, minimum 16 px. Two color variants: dark on light, white on dark. One aspect: 2:1, always. PNGs are the mark; never redrawn from vectors.
The system underneath it.
I built a portable design system I maintain for client work. Barreiro.com runs on it. So do Men's Sole Revival and Wayfarer. Same tokens, same components, same layout scaffolding. 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.
The Figma brand book runs seventeen pages: README, Landing, Home, Buttons, Cards, Dialog, Forms, Navigation, Colors, Fonts, Wordmark, Mark, Logo, Icons, Imagery, Spacing, and Parameters. Every rule that ships in the code lives there first.
The palette — role tokens, not literal names.
Brand, accent, sage, neutrals, plus semantic bindings for background, text, and border. Same file every client project reads.
The type ramp — one family, two weights.
DM Sans at 400 and 500. Eight sizes on the ramp (60 / 40 / 28 / 20 / 17 / 15 / 12 / 11). No other family ships. Barlow Condensed and Lora were swept when the DS unified this month.
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. Seventeen-page brand book. Every screen begins there and gets translated to code by hand.
Typography
DM Sans only. One family, two weights (400 and 500). Barlow Condensed and Lora got swept when the DS unified this month.
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.
AI
Claude in the loop for research clustering, case-study drafts, and voice-tuned copy against the profile in layer 06. Design decisions stayed with me. Full stance on /process.
The rules.
Five constraints govern everything the DS ships. Every screen on this site, every case study, every artifact in the Figma book obeys them.
Title Case for button labels only. Every other label stays sentence case.
Radius 0 for rectangles. 999 for pills and circles. No mid values.
Terracotta is the only accent. A second accent breaks the ground, ink, accent triad.
No shadows on any button state. Depth is not a button affordance.
DM Sans only. One family, two weights.
What was cut.
In August 2026, I audited barreiro.com against twenty senior product-design portfolios. Every one of those twenty rejected the same eight elements. Six of the eight were shipping here. This is what came off.
Hero device peek
A MacBook with the 86% stat overlay in the top-right. Twenty of twenty senior portfolios ship no hero image.
Testimonials
A quote carousel with attributed praise. Twenty of twenty ship none.
Metrics on the fold
The 86% completion stat was a hero callout. It lives inside the Men’s Sole Revival case study now, where the reader can see the receipt.
/contact route
A dedicated page with a mailto link. Twenty of twenty use email, calendar, or newsletter — not a route. The email lives in the footer and on the About page.
About preview on home
A duplicate of the /about narrative. The full page still ships from the nav.
Downloadable résumé
Twenty of twenty do not offer a résumé file. LinkedIn is the primary reference now.
Dark mode toggle
Never shipped. Twenty of twenty do not have one.
Heavy hero motion
Framer Motion staggered entrance animation. The library came out with it — the site now transitions with native CSS only.
Six of the eight universal rejects came off. The site got quieter. Fewer decisions for the reader to make before they hit the case studies.
Built solo. Every design decision, every commit, every line of copy signed by the same hand.
Alfonso Barreiro, Portland, OR, 2026.