[mfal]

Warning

No-brainer first pass. Nobody from UX or design was involved. This may miss what UX and design want entirely — sorry for that. Treat it as a conversation starter, not a proposal to merge as is.

Flow's tokens and components follow the mittwald brand guide. Brand values win unless they break WCAG AA; where they do, the nearest compliant value is used and named below. Split out of #3284, which keeps the Styleguide (flow.mittwald.de) part and builds on this one.

Colors

• New color.mittwald-blue scale replaces hosting-blue as primary and info. Brand #2D23E8 sits at 800; the brand tones #B3B4F3 / #8D8BF0 (light) and #171842 / #1D1B6B (dark) are anchors, the steps between are interpolated in OKLab.
• Dark 800 is #AAAAF3, not #2D23E8: on dark ground #2D23E8 reaches 2.2:1, so links and the focus ring would fail. Dark solid buttons are light blue with dark text, as before.
• New color.brand.*: the guide's values per theme, unchanged. Body text uses text-primary (64 % black / white), headings text-highlight.
• Neutral: light gray 300 → #EBEFF3, 1100 → #1D1E1F; dark gray 100 → #141516 (also the dark backdrop of Storybook and the visual tests).
• AccentBox blue / navy / green / lilac use brand 100 surfaces (color.brand-surface). Three deviate so text and links keep 4.5:1: light blue lifted 10 % towards white, dark green / lilac moved 22 / 24 % towards neutral base.
• The current menu item (Navigation, ContextMenu) uses text-highlight: with text-primary it would reach 3.26:1 in dark.
• Categorical chart colors stay: the brand secondaries fall below 3:1 on white.

Imagery

• color.gradient becomes the brand Simple Gradient in light, measured from the brand guide's reference (9eafc.webp, Bildwelt › mittwald Gradient): linear, #D48E75 → #986C97. In dark it is an Abstract Gradient (brand glows on a dark ground). background-gradient becomes flat neutral base.
• New grain.* tokens carry the brand's film grain, on AccentBox's gradient only. The noise is black or white per pixel, its alpha the distance from the middle; in normal blending that adds grey grain without shifting the gradient's colour or mean. Matched to the reference at 1x (luma noise / chroma-luma / autocorrelation at 1 px): 5.03 / 0.15 / 0.20 vs. 5.17 / 0.07 / 0.22, then one step finer: baseFrequency 0.8, grain about two thirds of a CSS pixel. The grain sits below the content, so text contrast is unchanged. It is hidden under prefers-contrast: more and forced-colors: active, and ships as a data: image: a CSP blocking data: images only drops the grain.

Typography and shapes

• New font-family.body|heading|code, font-weight.semibold. Headings: Proxima Nova Semibold, falling back to Inter.
• Buttons are pills (corner-radius.pill); NumberField steppers keep the form-control radius. LayoutCard, Modal and AccentBox use the new corner-radius.xl (24 px).

All existing tokens stay, hosting-blue included. No API changes.

Open questions for UX / design

• Base tokens are design authority. They changed here at the product side's request; the interpolated blue steps and the three adjusted brand surfaces need a design sign-off.
• Proxima Nova is not on cdn.mittwald.de (404) and its licence for this use is unclear. Until it is hosted, headings render in Inter everywhere.
• Body text at 64 % is the brand rule and passes AA (6.7:1 on white, 7.9:1 on dark ground), but it is visibly lighter than before across all of mStudio.
• Icons: the brand uses Font Awesome Sharp; switching touches the whole icon pipeline and is not part of this PR.
• Colored words on the gradient. The Color docs recommend highlighting words in AccentBox headings with Color. On the brand gradient, violet reaches only 1.09–1.76:1 (2.9:1 on the former pastel). Brand primary text (64 %) reaches 3.28:1 at the darkest stop; AccentBox's default dark (100 %) 4.93:1. Either the gradient, the guidance or the example has to give.

Checks

• Token contrast audit over every declared content / background pair, both themes, before vs. after: no new failures. The raw pair text-primary on dark neutral.400 is below 4.5:1; its only text consumer (current menu item) now uses text-highlight.
• axe color-contrast on all 114 default stories in light and dark (1,164 text nodes): one finding, the CodeEditor's dark active line (4.42:1), unchanged by this PR.
• Checked by hand in Storybook, light and dark.
• The visual baselines are the ones update-screenshots produced on docs: rebrand the Styleguide after the mittwald brand guide #3284; nothing outside packages/ changed there that renders in the suite.

🤖 Generated with Claude Code

[github-actions]

🚀 Preview Deployment

Preview environments are ready:

Type	URL
docs	pr-3398.docs.review.flow-components.de
storybook	pr-3398.storybook.review.flow-components.de

Images:

• docs: ghcr.io/mittwald/flow/docs:pr-3398
• storybook: ghcr.io/mittwald/flow/storybook:pr-3398

[github-actions]

❌ Visual Regression Tests Failed

At least one shard did not pass. If snapshots differ from the committed baselines, download the visual-diffs-* artifacts from this run to inspect the actual/diff images (a shard that failed before comparison, e.g. during install or browser setup, leaves none).

If the differences are intentional, update the baselines by adding the update-screenshots label to the PR.

Run details