By the numbers
- 952commits on mainfirst 2025-12-28, latest 2026-10-15. 700 of them carry a Claude co-author trailer.
- 34design-system componentsthe atoms in the site's component library, counted in its system registry.
- 26accessibility findings, 0 criticalfrom one WCAG 2.2 audit on 2026-10-13: 11 major, 9 minor, 6 advisory.
- 13style and contrast checksin lint:styles. 11 of them also run before every build and fail it.
Overview
One person, one live site, one design system, and a build that enforces the rules.
bendybethc.com is a real, live site that I designed and built for a patient audience, and the design system under it is the part I would want a hiring team to look at: Figma variables, a token pipeline, 34 components, and checks that stop a build when I break my own rules.
The first commit was 2025-12-28 and it is still moving. 700 of the 952 commits on main carry a Claude co-author trailer, so this is also a record of directing an AI pair on a real codebase, with the gates and audits doing the checking.
Problem
The site did not sound like me, and readers were already arriving from my reels.
In August 2026 I wrote it down plainly: I liked how my story was told on Instagram, I had curated every reel and post to tell it as simply as I could, and the website had random AI-generated blog posts and an about page that sounded nothing like me. I wanted the site to feel like what a person finds when they go through my Instagram profile, because that is the path: see a reel, tap the link, land on the site, and then what.
The readers I wrote down in October mostly arrive on a phone, from the bio link, after one reel, often at night and often mid-flare. About 5% of them are in buying mode at any moment, so the first thing the site owes them is recognition, and one calm thing they can use for free.
Persona
Four readers on paper. The first one, still in it, is who the home page is built for.
The readers map was written up from the record on 2026-10-07 and I approved it that day. It is a composite built from my brand brief, my business plan, 108 questions pulled from 1,869 audience comments, and one direct message, not from interviews. Reader 1 is still in it: undiagnosed or newly diagnosed, dismissed for years, on her phone at 2am. Reader 2 has the diagnoses and the binder. Reader 3 is standing next to someone who is sick and wants plain words to explain it. Reader 4 is a PT or advocate who reads on a laptop at work.
What earns trust differs by reader. For reader 1 it is specifics and nothing for sale in the first screen. For reader 4 it is sources named and a printable set they can put their own logo on.
it took me seven years to find a name for what my body was doing.
Research
Reader research from my own data and two accessibility audits. No interviews, no screen reader testing yet.
What I did: the reader map above; a WCAG 2.2 audit of every route on 2026-10-13, using axe-core 4.13.0, keyboard walkthroughs, zoom to 400%, the W3C text-spacing test, reduced-motion runs and contrast measured from rendered pixels; a second audit of /handouts on 2026-10-14, the same day it went to production; a design-system audit on 2026-10-14 that scored 34 components against 28 cells each (557 of 952 cells, 58.5%); and three judge passes before the handouts went live.
What I did not do: I did not interview or usability-test readers, I did not listen to the site with VoiceOver or NVDA (accessible names were read from the browser's accessibility tree), I did not run field Core Web Vitals, and I did not check the PDFs with a PDF accessibility checker.
Key decisions
Four decisions, each with what it cost.
The design system is edited in Figma, and only in Figma.
Options: fix a value where I see it, or change it in Figma and pull. I locked the second on 2026-07-31. Generated token files are never hand-edited, because an edit survives only until the next pull. The one exception is interactive states (hover, focus, active), which are written in CSS because they are hard to simulate in Figma, and still take their values from tokens.
Cost: every change is three steps, and "npm run tokens" on its own contacts nothing and reports success. That cost a session on 2026-08-09. On 2026-09-06 all 165 semantic token names matched while 28 of 76 groups held the wrong values, so matching names is not proof of sync.
The build refuses to ship my own rule-breaking.
Options: write the rules down, or make a script fail. lint:styles runs 13 checks (inline styles, colour, type and spacing literals, undefined variables, legacy tokens, local hover and focus rings, and a WCAG 2.2 AA contrast audit of every token pair in both modes). The 2026-10-14 judge pass ran it and got 0 hard WCAG AA failures in both modes.
Cost: gates break too. On 2026-08-05 the contrast audit had a hard-coded local path and broke every deploy, and on 2026-08-01 a commit had to be made to get the contrast auditor to actually block.
Handouts are rows and chips, not a gallery of PDF previews.
On 2026-10-14 I asked for chips at the top of Resources to select what the list shows and no huge previews of PDFs. Resources is now All 8, Printables 3, Writing 5, and a printable is a row like a post. Each handout tap goes through a /go page that counts it and then redirects, because the host plan has no custom events.
Cost: an extra hop on every PDF, and the first version of that page was named "Links" with a single link reading "Continue". The handouts audit caught both and they were fixed in the same week.
The home page leads with my words, not generated copy.
The hero is a line from my own 2026-03-26 caption, then a short hello, and I took my last name off every shipped page, meta tag and schema.
Cost: the headline wraps to five lines at 1440 and reads in lower case. The audit confirmed the wrap and measured contrast over the video at 10.9:1 or better, so I kept it.
Accessibility as a requirement
WCAG 2.2 AA was the target. Here is what was audited, what was found and what is still open.
The target is WCAG 2.2 level AA. The 2026-10-13 audit covered every route at 1440, 810 and 375 and at 320 and 400% zoom, and found 26 issues: 0 critical, 11 major, 9 minor, 6 advisory. Ten of them have a fix commit that names them, among them low-contrast buttons, the contact form, two missing skip-link targets, scrolling inside dialogs, the footer signup label and a clipped focus ring.
Measured on /handouts: zero axe violations at three viewports, one h1, a skip link as the first link, text contrast from 6.33:1 to 19.14:1, a 2px focus ring with 2px offset on every stop, and with reduced motion on, videos stay still on their posters. The 2026-10-14 handouts audit found 8 smaller issues and seven were fixed in the next pull request; the eighth, a feedback link for PTs, waits on my words.
Still open as far as the record shows: a pause control for looping video (F-006), the handout PDFs are untagged or only tagged as paragraphs (F-009), and the live home page paints its largest element at 4.23 s on a throttled mobile lab run (F-011). I have not made a claim of conformance, because no screen reader pass has been done.
Flow
Reel, bio link, then a short path to something printable.
The bio link includes the care map, my website and the email list. From the website, Resources leads to the handouts and the specialist map, a handout tap passes through the counting page to the PDF, and the shop leads to the newsletter signup.
Hi-fi screens
Real screens from the running site, at 1440 and 390.
Resources
- Chips pick the list. My 2026-10-14 ask: chips at the top, no huge PDF previews. All 8, Printables 3, Writing 5.
- Kind has its own colour. Yellow bar for a printable, blue for writing, so the type is visible without reading.
Handouts
- Two jump chips. PT set (6) and MCAS set (12) fix a finding from the handouts audit: the MCAS set started 2.4 screens down.
- Honest labels. The PT set says draft for review, and each full set shows its page count and file size.
Specialist map
- 19 cards, one level. From my 2026-10-03 care team export, built from the shared Card, Grid, Alert and Modal components.
- Review is separate. Design and medical-copy review are listed as follow-up work, and 11 cards carry agent-written draft tips.
Newsletter
- One field, visible label. The site audit caught the footer signup without one (F-012); it now matches this page.
- A promise in my words. "i'll make sure you get them first", under the button.
Home is shown at its first screen only. Further down, the home page scrolls through personal photos that this study does not use.
Results
Shipped and audited. I have no conversion numbers to show and I am not implying any.
What exists: the home, resources, handouts, specialist map, shop and newsletter pages, 20 handout PDFs (2 full sets and 18 single pages) and the design system under them. The handouts page went to production on 2026-10-14, and the third judge pass ended in a publish verdict with no blocking fixes.
What I cannot say: whether any of it brings readers back, signs them up or helps a PT. Tap counting was added on 2026-10-13, but I am not quoting numbers here until I have looked at them properly. The PT set is still labelled draft for review, and 11 of the specialist cards carry agent-written draft tips, added 2026-10-04, that I have not recorded signing off.
Learnings
A rule that is only written down gets broken. A rule the build enforces mostly does not.
The contrast auditor existed for a while before it blocked anything, and the matching-names check passed while the values were wrong. I now trust a gate only after I have watched it fail once.
I audited /handouts the day it went live, after the deploy, and found eight things I would have preferred to find before. The next page gets its audit before it goes live; /specialist-map and /media-kit shipped without a main landmark for the same reason.
Starting from my own words is the decision I am most sure of, and I have no measurement for it.
Next
Six things still open.
- A feedback link under the PT set (handouts audit, waiting on my words).
- A pause control for looping video (site audit F-006).
- Tagged PDFs, checked with a PDF accessibility checker (site audit F-009).
- Prerendered route HTML to bring mobile home load down (site audit F-011).
- A VoiceOver pass on iPhone.
- A review of the specialist-card medical copy.
Reader 4, the PT or advocate, gets her own page later.