Musterhall is a pre-launch learning platform where vetted instructors teach courses and run live sessions. As co-founder I lead product and UX/UI. This is the system underneath it: I own every token value, wrote the design law as an agent skill, and sign off the production walks. Engineering owns the build.

Role: Co-founder, product design lead

Scope: Color, type, components, marks, tokens and docs

Platforms: Web and Flutter from one token source

Status: Pre-launch; components live in Storybook

One chartreuse did identity, verification and every buy button, so it meant nothing. I moved it to a true green and split it into two roles on one hue: identity and action. The cost is a strict green budget that every screen has to respect.

Charts get eight categorical slots in a fixed order and no green, so a data series can't pass for the brand. Status hues stay out of series, and the set is checked against a simulated deuteranopia view.

Every button tier is drawn in five states and both themes. Contrast is computed from the tokens at every build, and where the system falls short, the docs say so instead of hiding it.

Funnel Display is for moments; Geist is for everything else. Display type is fluid, while the UI band is closed at four fixed sizes.

A muster is a military assembly, and two of the founders are veterans. So the mark is a stencil M with a rally star, a true green that reads earned rather than gamified, and brass kept for rank and ceremony. It's cut for every size, down to a 16px favicon.

On Musterhall, agents write most of the code, so the design law ships in forms an agent can use and a machine can check: a design skill, tokens named for their job, and lint and tests that fail loudly. One JSON source builds both the web CSS and the Flutter package.

Code is canonical: I deferred a Figma library on purpose, so nothing drifts from the shipped tokens.

Each app pins its tokens: a change lands only when web or Flutter re-pins, trading speed for control.

Acceptance on each ticket: rules handle the everyday calls, so my time goes to new patterns and edge cases.

One visual language across web and mobile, measured, with its open gaps listed. Engineers and agents make everyday token calls without waiting on design.

Want the full story, including the contrast ledger and production walks? Read the full case study.