What happens here
The business is a price curve: charge when power is cheap, discharge when it is expensive. That is what the palette from the brand manual encodes. Red appears where value arises. Grey appears where energy flows in. Bordeaux is reserved for negative prices and is therefore almost never seen.
Four states follow one another through the day. The position of the sun is computed locally with the NOAA formula — no network call, no location prompt, no permission dialogue. The coordinates come from the device's time zone.
This page is a design surface. It appears in no navigation and is excluded from search; it is reachable from the time-of-day panel in the footer — for anyone who wants to know why the colours move.
On page ground
We develop battery storage to ready-to-build.
This paragraph shows running text in the measure of the real pages. It carries the same size, leading and line length, so that the effect of each state on readability becomes visible.
| Quantity | Value |
|---|---|
| Spread of the day | 203 €/MWh |
| Lowest quarter-hour price | 14,45 €/MWh |
On chapter surface
The price curve is the business.
Red leads to discharge, grey to intake. On the chapter surface both marks share one image.
Measured in the browser
This table reads the colour values actually set and recomputes them under WCAG 2.2 — it shows what arrives, not what was intended. The thresholds are 4.5:1 for running text and 3:1 for marks, lines and focus rings.
| Combination | Charging | Turn | Discharge | Night |
|---|
The risk each variant takes
A — ground and accents only. Risk: insignificance. Contrast range, surface distribution and signal intensity stay constant through the day; only the colour values swap. At night the text contrast therefore rises to 16.5:1 — light text on near black, harsh rather than calm. The site looks different in the evening but does not feel different. Shipping this means having built an elaborate dark mode without a switch. It is expressly not the recommendation.
B — contrast range, surface, intensity. Risk: a state can fail review, because four palettes must be maintained instead of one. That is precisely why tools/contrast.py reads the values from the token file and recomputes them; the table above does the same in the browser. Second risk: anyone seeing the site once takes the state for the design and never notices the system. The two lines in the footer answer that.
C — plus type and space. Risk: layout shift, and unavoidably so. Change the type weight and the advance width changes; change the spatial rhythm and the spacing changes. Both move line breaks and anchors. Someone reading a section at 21:58 finds it elsewhere two minutes later. That violates the quality floor, which rules out layout shift. C is built and switchable so the difference becomes visible — it cannot be shipped.
Where the system reaches its limits
| Case | Behaviour | Assessment |
|---|---|---|
| Unknown time zone | Falls back to 40° north and the standard-time central meridian | Deviation of a few minutes, immaterial for a colour state |
| Daylight saving | Longitude is derived from the standard-time offset, not the current one | Without that distinction sunrise would be 77 minutes out in summer |
| Polar night and midnight sun | The sun calculation returns nothing; clock time applies | North of the Arctic Circle the site follows the clock rather than the sun |
| Without JavaScript | The neutral state remains | The site is fully readable, it simply does not follow the day |
| Server-side delivery | Neutral state in the markup, the script corrects before first paint | No flash of the wrong state |
| State change during a visit | Transition over 1200 ms, checked every minute | No transition when reduced motion is requested |