Utility Site
Meeting Or Not
PHPHTMLCSSVanilla JavascriptWordPress
Brand & PortfolioYou're looking at it
Products that ship. Designs that convert.
The personal product studio of Alejandro (Alex) Perez — a Quad Cities-based senior front-end developer. The site itself is the portfolio: a dark-first, glassmorphic showcase on headless WordPress + Next.js. This case study is a live sample of its own design system.
Next.jsReactTypeScriptTailwind CSSWordPressWPGraphQLFramer MotionVercel
horizontalimpact.com
The system, live
A design system you can poke at.
Most case studies show screenshots of the work. This one IS the work — every token, font, and component below is the same system rendering this page. Tap around.
Tap any swatch to copy its hex — these are the real tokens this page is painted with.
Surfaces
Accents
Status
--gradient-brand = linear-gradient(135deg, #d97706, #dc2626)
10+ yrs
Front-end experience
5
Shipped products
33
WCAG rules AccessKnight scans
4
Fonts in the type system
What it takes
A developer who thinks like a product owner.
The site is a proof of craft across the disciplines a modern web product demands — design system, architecture, accessibility, and motion.
Dark-first design system
Layered near-black surfaces, glassmorphism, and a documented token scale — the system is on the page, not in a Figma file. The goal: feel premium to use.
Four-font type system
Cabinet Grotesk for display, Plus Jakarta Sans for UI, Inter for body, JetBrains Mono for code. The pairing carries the whole brand voice.
Headless architecture
WordPress authoring flows through WPGraphQL into a Next.js App Router front end, statically generated and deployed on Vercel's edge.
Accessibility as craft
WCAG 2.1 / ADA is the throughline — contrast-checked tokens, visible focus, keyboard-operable demos. The same bar AccessKnight and Obsidian UI ship to.
Motion that respects you
Framer Motion micro-interactions — depth lift, accent glow — gated site-wide by prefers-reduced-motion via a single MotionConfig.
A catalog that proves it
AccessKnight, Polish, Obsidian UI, LaunchKit, AP Image Optimization — concrete evidence the studio ships products, not just designs.
Under the hood
Headless, typed, and edge-delivered.
Authoring stays in WordPress; everything visitors touch is a statically generated Next.js front end on Vercel's edge — fast by default, decoupled by design.
Next.jsReactTypeScriptTailwind CSSWordPressWPGraphQLFramer MotionVercel
The whole site is the demo
You've been inside the case study this entire time.
Keep exploring the rest of the studio — the shipped products, the writing, and the work that proves the system. Currently available for freelance projects and full-time opportunities.
Powered by Next.js · Styled with Tailwind · Deployed on Vercel
Let's Connect
Ready to build something that ships?
Whether you need an accessible website, a SaaS product built from scratch, or a front-end developer who thinks like a product owner — let's talk.
Currently available for freelance projects and full-time opportunities.