DS2 — shared MUI theme baseline, acceptance & verification sheet (Musterbogen)

Declared coverage

Covers: the token table; ink/border/surface with the page-background strip; the divider/controlBorder split; status split into text and fill roles; the settled type scale, control height, radius and shadow rule; the data-series ramp and its greyscale check; a render-time contrast script; and the 14 agreed component specimens, each beside its MUI default.

Does not cover: dark mode (out of scope for v1); components outside the agreed list; the createAppTheme() implementation and its override API; an audit of the 14 apps against this baseline; and the series-4/5 hue proximity itself, which is unchanged.

Explicit: the MUI column is a CSS transcription of MUI v7's documented defaults, not a live mount, and it renders in a system-sans stand-in rather than Roboto. Judge size, weight, radius, colour and shadow from it — not glyph shapes.

Font disclosure

Baseline columns use DM Sans 400/500/600, base64-embedded from @fontsource/dm-sans@5.2.8 in this estate's node_modules — no network fetch. MUI columns use a system-sans stand-in, not Roboto.

Ink, border, surface

MUI's default text is translucent (rgba(0,0,0,0.87)) and shifts with whatever sits behind it. The candidate uses three fixed opaque tiers. Muted was darkened twice: #6A7178 → #6A7178 → #6A7178.

Border, split in two: divider vs. controlBorder

WCAG treats the two differently, so one token cannot serve both. divider is decorative and exempt from 1.4.11; it stays pale. controlBorder is a control's boundary and needs ≥3:1 against its surface — the inherited input.border never cleared it. Derived from the same ink hue at higher opacity.

TextField / Select — rest, hover, focus, error

Same four states, MUI default beside the candidate, every boundary computed live. MUI's rest default also fails 3:1; its hover/focus/error states clear it. A rest-state gap in the library, not a deviation from it.

Checkbox boxes and outlined Button/Chip edges use controlBorder too — the same rest-state fix wherever the sub-3:1 input.border was the outline.

Status, split by role, and the freshness semantic

One hex cannot be both text and fill: #1E8E3E measures 4.20:1 as text on white and — the formula being symmetric — the same 4.20:1 as a fill under white text. Each status now carries a text tone and a fill tone with its own contrastText. The text tones are checked against their own Alert tint, not against white — a tint lowers contrast, and checking the wrong surface hid a real failure: warning measured 4.10:1 on #FBF0DC, now #976100 at 4.62:1.

Fill role — solid chip/badge, contrastText pair

No estate precedent. Three prototypes invented a stale concept, all in amber: cockpit #9a7b33, fitness-monitor reused --status-warn. #5B6B7D is new — included on the operator's decision, because reusing amber would collide with warning, which is the reason the token exists. Unvalidated in a running screen; the first consuming app validates it.

Data-series ramp (categorical, owned by the baseline)

Six colours chosen to avoid every status hue (no green, amber, red or blue-grey), so a series is never mistaken for a status. Muted and cool-to-neutral, unchanged on the operator's verdict. No second channel: dash patterns, marker shapes and pattern fills were all removed on review — how a chart separates series is DS-4's question.

Greyscale check — same swatches, desaturated to luminance only

Colour removed. Series 4 and 5 remain near-identical greys (109 vs 106), and nothing else distinguishes them since the marker glyphs were dropped.

Desaturated greys (live, sRGB 0–255): 92 · 123 · 129 · 109 · 106 · 119. Series 4 and 5 differ by ~3/255, below reliable perception; 2/3/6 sit inside 10 points. With nothing but hue carrying identity, a six-series chart does not satisfy WCAG 1.4.1.

Second channel in practice — multi-series line chart

Same six series, solid strokes, no per-series pattern or marker — removed on operator review (2026-08-09). Series 4 and 5 cross around March/May, which is where the close-luminance pair matters most; in the desaturated pane they are not reliably separable.

Second channel in practice — grouped bar chart

The same six series as bar fills — flat colour, no pattern. In the desaturated pane the close pairs are not separable.

With the second channel gone, the desaturated panes are not reliably readable — series 4 and 5 in particular. Surface contrast is unaffected (desaturation preserves relative luminance); this section is about series-to-series distinguishability under 1.4.1, not text contrast.

Shadow: rest vs. transient — now a binary rule

MUI's shadows[1] is a visible three-layer drop shadow — right for 2014 Material, wrong for a flat dashboard. Round 1's near-invisible shadow only moved the judgment to how invisible is enough. The rule: Paper and Card at rest have zero shadow (elevation: 0, variant: 'outlined'); weight exists only on transient surfaces — Dialog, Drawer, Menu, Tooltip. Binary and checkable in review.

Typography — settled scale

MUI's h6 is 20px/500; the corpus runs 15–16px card titles and 13px tile titles. In the decided scale h4 (20px) is the screen title — a visual variant only. Semantically it stays <h1>: in MUI, component="h1" variant="h4". Treating the variant as the element produces a broken heading hierarchy and h6 (16px) the card title; h1–h3 stay usable rather than decorative.

Control height, touch target & radius — settled

MUI: medium OutlinedInput ~56px, small ~40px. Decided: 40px (36px in round 1), consistently across Button/Select/TextField/Chip. 34–36px is a recorded defect against the 44px touch guideline in an approved envelope; 40px sits on MUI's small, and @media (pointer: coarse) bumps to 44px — simulated here. Radius settled at 3px control / 8px card.

Component gallery

Decided baseline throughout, no variants left to pick. Buttons: textTransform: none, no elevation on contained — all 7 sampled app themes override MUI's uppercase independently, so this replaces 7 repeated overrides.

Button — all variants × sizes

Table — head + body, default + dense

IconButton, Divider, Tooltip

Select, Checkbox, FormControlLabel

TextField / OutlinedInput

Paper / Card — outlined vs. elevation

Chip

Dialog header

Alert (standard variant)

Container — page-gutter difference

Mobile frame — 375px

A literal phone frame, not a resized window — at the decided control height, with the table→card behaviour below the usual breakpoint.

What this sheet asserts, and what remains unverified

Release candidate, not yet a locked baseline. The motion tokens are declared but not demonstrated — a static specimen cannot show timing, and this document renders without JS in the environments it has been opened in so far. Reviewed 2026-08-09 by a second reader; the warning/tint contrast failure, the chart-token contradiction, the touch and focus rules and this document's own legibility were corrected in response. This document is what a later theme change gets re-checked against. Below: what is verified here at render time, and what still has to be confirmed elsewhere.

Page background — candidate strip

Four values side by side: pure white, the chosen neutral, the original cool value, and the smallest perceptible warm shift. Each carries a real white card, so the question is whether the card still reads as a card. Path: #F5F7F8 → #F7F6F3 → #FCFBF9 → #FAFAFA.

#FAFAFA is the chosen bg.page (operator, 2026-08-09). All three warm candidates read as too warm: against a blue-cast value, warmer meant neutral, and the need was a lightness step off white, not a hue. #FAFAFA is MUI's grey[50]. hram, fitness-monitor and innoservice ship pure white today and change visibly on adoption; jg-ferien and spesix override for identity.

#6A7178 cleared 4.5:1 only on pure white (4.549) and failed all three page candidates (4.399 / 4.324 / 4.247). Darkened along the same hue to #6A7178: 4.946 on white, 4.616 on the darkest candidate — against a 4.6 target, not a nudge over 4.5. Used everywhere ink.muted appears.

Canonical baseline tokens

Every decided value, once. A work order references this table by token name rather than retyping values; if a number here and a number in a WO disagree, this table is the one to fix. Contrast badges are computed live.