Color

How the palette is built

hue(tone)    = 144° − 0.09 × tone
chroma(tone) = 8.2 − 0.00125 × (tone − 55)²

neutral          chroma(tone)
neutral-tinted   chroma(tone) + 2.4
neutral-subdued  chroma(tone) × 0.5

Accent

The brand green marks what can be acted on and what is selected. Its tonal version fills selected navigation items and segments; white text on the solid green reaches 4.5:1. Its container tint fills drop placeholders, the slot a card lands in while the overview is edited.

Text and icons

Text that is not read

• Never lower contrast with opacity, with one exception kept from the product: a chart’s running-total toggle fades to 40 % when off. Its state is also given by aria-pressed and by its line leaving the chart.
• Neighboring days are context, not content. A month calendar fills its six rows with the days of the months around it in the disabled gray; each of those days reads at full contrast in its own month.
• Decorative previews are hidden from assistive technology. A glimpse of the next day at the edge of a scrolling view carries aria-hidden="true" and no focusable content. It is exempt from contrast because the same content is one swipe away, at full contrast.

Surfaces

Light surfaces are achromatic grays with a white top bar; the green tint appears in containers, menus and states. In the dark theme everything is tinted and steps up in lightness as it comes closer.

Lines and fills

States

Hover and pressed are translucent layers over whatever is underneath, tinted with the accent. On accent fills, the layer turns white in light and black in dark.

Status

Danger flags delays, overdue invoices and stock on hold; warning flags what is pending. Status is never told by color alone: it always comes with a word or an icon.

Charts

Contrast

The colors below are the product’s own. Each is kept as it is because it passes its minimum where it is used: 4.5:1 for text, 3:1 for icons, chart lines and control boundaries.

The full matrix is measured from the built tokens, the same way the test suite checks them on every build. Each pair is judged against its own minimum: 4.5:1 for text; disabled is exempt. Lighter figures are pairs the system does not use. Ratios are rounded down.

Where the system departs from the product

The rule: the system takes the product’s colors unless a pair fails WCAG AA, and then accessibility wins. These are the roles where the product’s color fails and the system’s replaces it, with both ratios measured on the card (#FDFDFC in light, #1F251F in dark). Danger in dark follows the same rule: marks and fills keep the product’s #F04B4B, red text takes #F97068, and a red fill that carries white text takes #DD3535.

The chart’s primary line passes with the product’s green; it follows the accent so the two never drift apart. Three more roles differ without a contrast reason, because the palette is generated by one formula: the light menu and inverse text (#EBF3E8 for the product’s #EEF3EA), the dark control outline (#687266 for #6C766A) and the dark chart’s second line (#DCE5D9 for #B7C3B4). The light and dark neutrals land within one or two RGB steps of the product’s (ΔE under 1.7, below what the eye tells apart).