CASE STUDY 04 — DESIGN SYSTEMS & AI ENFORCEMENT
Barefaced Audio
Design rules agents can't skip
Every design leader bringing AI into a team runs into the same problem: people and AI alike don't always follow guidelines. I experienced this with a redesign of barefacedaudio.com, the site of a British maker of boutique bass and guitar cabinets. Claude Code wrote most of the code. I wrote the rules, made the decisions, and built checks that keep the work consistent.
Designer, Builder · Self-initiated concept · October 2026 · Pitched to Barefaced, not taken up for now · Interface only, not live
Situation
Buyers compare before they buy.
Barefaced Audio has designed and built bass and guitar cabinets in England since 2008 and sells them direct, with a price for each region. A buyer weighing two models needs both specifications and the price in one place.
I came to the site as a prospective customer. I'm a bassist choosing between two of their cabinets, the Super Twin T and the Three10T, and I wanted to learn about both and compare them side by side.
On the concept's home page, rings pulse out from the cab like sound, one at a time in yellow. For visitors who turn on reduced motion, it stays still.
Same product, same 390px phone width, first screen. On the live site the first price is below it.
Before and After
COMPARING TWO CABS
LIVE SITE
Page by page
Each cab has its own page, so comparing two meant going back and forth and remembering the figures.
CONCEPT
Side by side
Compare puts any two of 23 cabs together, with specifications and regional prices.
PRICE ON A PHONE
LIVE SITE
Below the fold
The first price sat 973px down, past a phone's first screen, on a page 25,172px tall.
CONCEPT
Above the fold
The price shows without scrolling, and the page is less than half as long.
CONSISTENT FIGURES
LIVE SITE
Two figures
The Super Twin T's maximum output is 131dB on its range card and ~133dB on its own page.
CONCEPT
Both shown
Compare gives the product page's ~133dB with the range card's 131dB under it. Neither figure is changed.
COMPARING ON A PHONE
LIVE SITE
12 steps
Comparing two cabs took 12 steps and hit 2 dead ends.
CONCEPT
4 steps
The same task took 4 steps. Its one dead end, Compare missing from the Products menu, was fixed after the review.
Steps and dead ends come from a heuristic review run by an AI agent, not a study with buyers.
Task
Change how their content is set and found, never what it says.
I set the brief myself: rebuild the site around the questions buyers ask, and keep every specification, price, model name and customer quote exactly as Barefaced wrote it. The concept had to pass automated WCAG 2.2 AA checks in light and dark mode, and work on a phone first.
Agents tend to drift from the rules over time, so every rule had to be something a test could check.
Action
Every rule gets checked.
The whole system lives in one file that people and AI both read, DESIGN.md. It sets the colours, type, spacing and corner shapes, and a design checker tests every page against them. For each kind of rule, the file says what enforces it: the design checker, a test, or the build itself.
Here's one rule, from decision to build:
- The ruleOnly page titles mix bold and light type, written down with who decided it and when.
- The componentIt has no setting for type weight, so the rule can't be broken by accident. Used in 34 files.
- The testChecks every heading on every screen.
- The buildWon't pass if a heading breaks the rule.
Three exceptions are written down with their reasons, and any new one needs my approval.
| Where agents go wrong | What catches it |
|---|---|
| Retyping or inventing content | A test that every captured word appears on its screen. The build stops if content is missing. |
| Drifting from the design system | The design checker, on every page at desktop and phone width. |
| Breaking a rule the checker can't see | A test written for that rule, such as headings, line height and names. |
| Accessibility problems | Automated accessibility checks on every screen, failing on any issue. |
| Forgetting the rules between sessions | Notes every AI session reads first, and a scan of each file after every edit. |
Screen 01
Screen 02
Screen 03
Decision 1
Barefaced's words stay exactly as written.
I copied every specification, price, model name and customer quote from the live site into files. The pages display text from those files and never retype it. A test checks that all 14,478 pieces of text appear on the right screen, and the build stops if any are missing. On the last run, everything passed.
Decision 2
Each mistake becomes a new check.
Some rules came from mistakes. Compare first matched rows by their labels, so when two cabs named the same thing differently, such as "Steel" and "Steel Grill" for weight, it showed "Not listed" even though both pages had the number. A review found this in 13 of 14 pairs, and no test had caught it. Compare now matches figures by what they measure, and a test checks every row for all 23 cabs.
The Super Twin T against the Four10. Both pages list their weights, under different labels.
Decision 3
Accessibility and phone layout are pass or fail.
Every screen is checked against the WCAG 2.2 AA accessibility standard in light mode, dark mode and at phone width, and any problem fails the build. Scripted tests use only the keyboard to work the menus, product options and forms. A simulated iPhone loads every page, fails if anything scrolls sideways, and taps through the menu, gallery and buy bar. On desktop, any screen scoring below 90 on Google's Lighthouse performance test fails.
Result
The founder liked it, and the timing wasn't right.
Alex, Barefaced's founder and chief engineer, liked the redesign, but Barefaced has big changes coming, so it isn't something they can take on now. That means no users or revenue to report, only what the system produced on the concept.
0 of 14,478
CAPTURED STRINGS CHANGED
Word-for-word test across 175 screens, on the last run.
758 → 0
DESIGN-RULE FINDINGS
Every page at desktop width. When 186 crept back later, the build caught them.
0
ACCESSIBILITY VIOLATIONS, ANY SEVERITY
Automated axe-core checks on every screen. Not a manual audit.
0
PAGES THAT SCROLL SIDEWAYS ON A PHONE
All 179 pages, tested in WebKit with an iPhone 15 profile.
I built it in six days. Lighthouse scores 100 on desktop and 96 to 98 on a phone, and every test passes in Chrome, Firefox and Safari's engine.
Figures measured in October 2026.
Looking back
What I'd do differently
I went in looking for improvements to pitch, and built the full site before asking Barefaced what their customers struggle with. Alex's reply showed they were already rethinking the range itself, which changes what the site needs. Next time I'd start with that conversation and build only the few screens that test the idea.
What this does not claim
- It isn't live. Cart, checkout, stock and forms are placeholders, and nothing connects to Barefaced's Shopify store.
- There was no usability testing with buyers. The one usability review is a heuristic walkthrough run by an AI agent, and it treats every finding as a hypothesis.
- Accessibility here means automated checks and scripted keyboard tests, with no manual audit, screen-reader testing or testing with disabled people.
- Phones were simulated, not physical devices.
- No one else uses this system yet. It's set up so another team could adopt it: the rules are plain text and the checks use standard tools. Today the checks run only on my computer, not on a shared build server.
- The words, prices, photos and brand are Barefaced's, shown with their permission.
The method
A rule isn't finished until something checks it.
In a design organization I'd run the same approach at scale: make the checks required for every pull request, publish the design system as a shared resource, standardize and document the process to propose and approve exceptions, and track measures, such as rule issues per pull request, accessibility issues that reach customers, and the time from a design decision to shipped code. The order stays the same whatever the tools: decide what must never be wrong, build the check that enforces it, then let AI work fast.
Self-initiated concept, not affiliated with Barefaced Audio, and shown with their permission. Happy to walk through the system, the checks or the code in detail.