Color

Surfaces and ink

The product skin: the app, profiles, the garden, sign-in approval, and every card. These are the values the web and phone apps render today, held equal by a test.

Accent

The accent belongs to the reader: they pick it in Appearance. Three variables carry it (--mf-accent, --mf-on-accent, --mf-accent-strong) and the ten steps below are mixed from the first. Low steps lean toward the card, high steps toward the ink, so the ramp reads in both schemes.

--mf-accent-100: color-mix(in oklab, var(--mf-accent) 12%, var(--mf-card));
--mf-accent-700: color-mix(in oklab, var(--mf-accent) 72%, var(--mf-text));

Fills

Hover, pressed and quiet chips: the ink at low strength, so they work on any surface in either scheme.

Chart series

Six series colours in a fixed order that passes colour-blind checks for neighbouring series; the first three pass for every pair, so rings and three-part scores use those. Dark has its own steps. Slots 4 and 6 sit under 3:1 on white, so charts using them carry labels.

Glyph hues

One saturated colour per icon, never a tinted plate behind it. Small row icons may run a diagonal gradient from the accent to one of these.

Monogram avatars pick from their own six, by a hash of the username:

Front of house

The landing, the sign-in door, invites and onboarding wear a cream ground with four corner blooms. It is a skin, not a second palette: data-skin="front" re-maps the same names.