Musterhall Design Language

• Green. When everything is colored, color means nothing. One chartreuse once did identity, verification and commerce, so buy buttons wore the trust color. Prices, counts and roles now carry no accent.
• Status. Status tones are reserved and always shown with an icon and a label. A status icon matches its subject, so color encodes severity and the icon encodes what.
• One primary. A page may repeat its one ask, but not run a second, different accent fill. Peer rows carry no fill, so peers can’t have different prominence.
• Control edges. “A bordered button announces itself by shape” is only true if the shape is perceivable. The divider token measured too low for that, so controls got their own edge token.
• LIVE. A solid green pill read as a button and doubled the green beside real ones. The pulse moves a ring instead of fading the dot, because a fading dot dropped below 3:1 mid-cycle.
• Charts. The amber slot measures low on light grounds, so it needs a direct label or a table, not color alone.
• Touch. Targets are 44px, 48px under a coarse pointer, and every tappable shows a press state.
• Waiting. Skeletons where the shape is known, and determinate progress where the length is known: a spinner standing in for a known wait misleads.
• Motion. Reduced motion turns movement off; only short opacity fades remain.

• The dot. The first identity rule made the green dot lead the word and named it the muster point: the marked spot where people assemble. Losing green was acceptable in one-color print; losing the dot was not.
• Explorations. I asked for alternatives that played off muster, hall and military: an assembly point, a chevron that reads as both rank and the hall’s roof, a monogram drawn as a gabled hall. Then I redirected: the dot isn’t mandatory, more range, simplicity first. Every candidate went into one catalog, judged side by side at icon size and at a true 16px.
• The crest. My brief was a simple shield. Heraldry turned out to be the most hall- and military-native idea, so the work narrowed to the crest family, less intricate, and the crest replaced the dot. My own counterchange artwork, a shield split down the middle with a Pomeranian inverting across it, became the app emblem.
• The stencil. I supplied the stencil M with a rally star, set beside MUSTERHALL in a stencil face whose bridges match the mark’s cuts. The stencil face is logo-only; the product stays in Funnel Display and Geist. The identity slot and its one-green budget didn’t change, only the glyph. The dog left the mark, not the brand.
• The green. The old chartreuse sat in the crowded esports lane and read gamified, not earned. It moved to a true green, and brass arrived for what is earned: rank, certificates, ceremony. Rank, when it exists, is a metal ramp from bronze to pewter to gold, the way insignia encode it.
• The voice. The military register (muster, roll call, standing by, in good standing) is load-bearing brand, but it lives in what you do, not what you buy. Money and destructive controls stay plain: Join, Membership, Cancel.

tokens/primitives.json

Per-hue OKLCH ramps. Internal only.

theme/semantic.json

App-facing roles, each with a dark and light value.

tokens/*.json

Radius, space, type, motion, layout, state.

build/css/tokens.css

OKLCH verbatim. Light under [data-theme="light"].

build/ts/*.ts

Constants for code that can’t read CSS variables.

Dart, Flutter package

sRGB colors with the OKLCH source as a comment. Themes as a ThemeExtension.

build.js

Style Dictionary, plus an OKLCH to sRGB converter. Tests and a CI check for stale outputs.

--vert-250: oklch(63% 0.15 142);
--action: var(--vert-250);

--action: var(--vert-375);

/// oklch(63% 0.15 142)
static const vert250 = Color.from(alpha: 1, red: 0.3009, green: 0.6235, blue: 0.2707);

static const action = Color.from(alpha: 1, red: 0.1613, green: 0.4625, blue: 0.1355);

Tokens that can’t cross to Flutter sit on a web-only list, each with a reason. Shadows are on it: mobile is flat by ruling. The emitter throws on an unknown type, so nothing drops silently.

The lint rejects raw hex, z-index and other token literals in components, and em dashes in product copy. One guard test fails any var(--token) that names a token that doesn’t exist, which the browser would drop silently; another fails any text size off the ratified ramp. A catalog test fails if the neutral chart slot is reverted to green. Token tests pin the decided colors, font stacks and breakpoints. CI fails a change whose generated outputs are stale.

• Each walk follows a written script with pass and fail boxes. A row that couldn’t be run stays open; it is not counted as passed.
• Every row records what was actually seen, and the build that was walked. A human closes the ticket, not an agent session.
• A step that the docs and code don’t support is marked unverified. It is walked anyway, and what happened is written down.
• One more observation: a phone learner couldn’t see the host’s shared screen. It is open as a mobile gap, and the full-screen video brief requires phones to show it.
• The same brief proposes the next layout: the remote person fills the screen, the self-view floats, and controls stay at the 44 or 48 touch floor.