An explorable explanation
BELLA, the system behind this site
A design system is only as useful to an AI as it is readable by a machine. This is that argument, demonstrated on the system running the page you are reading.
01 · AI readiness
Can an AI build with your system?
The difference is whether your system is machine-readable.
Flip the switch and watch the same agent change its mind.
Off. The agent is guessing.
What the agent built
The gate's verdict
Refused by the gate
4 of 4 checks failing
- Invented a colour that is not in the system
- Hardcoded a body size below the readable floor
- Contrast fails at the accessibility bar
- Restyled the button instead of using the component
No contract, so it invents what it does not know.
A documented pattern, not a measurement of this site. Southleft on context-based design systems
02 · Author, then enforce
Authoring is human. Enforcement is deterministic.
Move the control and watch the value travel.
A human decides what the token should be; everything after that is measured in this tab as you move it, and none of it is a recording.
01 Source
A human decision.
The control writes the custom property the page already resolves from.
readingShipped value, no drift.
--color-ink-soft: reading
02 Manifest
Generated, never typed.
Shaped by the same dtcgToken() that builds /api/bella.json.
reading"--color-ink-soft": {
"$value": "reading",
"$type": "color"
}03 Gate
Measured, not judged by taste.
Real relative luminance maths, against the AAA bar of 7 to 1.
The system inspecting itself.
reading to 1
audit:contrast is reading the running stylesheet.
Agents read this same artifact, /api/bella.json, alongside the route map at /llms.txt. audit:agents fails the build if either one disagrees with the live registry.
03 · Enforcement
A system that cannot refuse is a suggestion.
Seventeen checks run before anything ships.
17checks, every one of them able to stop a merge
audit:structure
One route tree per case, the 1240 container everywhere, no arbitrary pixel classes, nothing off palette.
04 · Self-assessment
Where the system honestly stands.
Not a scoreboard. Strength in one place, room in another.
Scored against zeroheight's six-axis model. The org-scale axes are early by design; the frontier axes run deep.
Foundations
Teenage3/4Three token tiers, a 4px grid, AAA-minded contrast, zero hard-coded values.
Documentation & Knowledge
Growing2/4Every token carries machine-readable metadata, plus DESIGN.md, a bella.json rollup and an llms.txt map.
Governance & Team
Growing2/4Governance as code: a 17-audit gate that fails the build on drift, run by a team of one.
Adoption
V11/4Powers elleta.design today with CHIP next, and few consumers by design.
Measurement & Impact
V11/4Deliberately no vanity metrics; the working system is the evidence.
AI Readiness
Teenage3/4The newest test of a design system is the path an AI takes, and this one defaults agents into it.
05 · The claim
A design system is AI-ready when a machine can build with it correctly.
Every claim on this page is a link you can open.
The manifest below is generated from the same source this page renders from. Read it the way an agent would.
What this stands on
- Context-Based Design Systems, TJ Pitre, Southleft. Where the with-contract and without-contract comparison in beat 01 comes from.
- Design System Maturity Model, zeroheight. The six axes BELLA is scored against above.