Mode and Ground
Mode: day | night, data-mode on the root. Ground: light | dark, per scene; the colour fields (03, Services) are paint and stay in every state.
Modes
Night and Day sit on top of the core, in two files. Off unless asked; delete them and the landing is the core again. The tables below read the tokens live from the page.
- 2
- 10
- 6
- 0
Chapter 01css/modes.css | js/modes.js
Two axes, ten rules
Mode is page-wide and changes the semantics. Ground is per scene and changes only ground and ink, never the tones. Both are set in the production bar (P), Mode with N and Ground with G.
Tones do not flip
GAIA, OKEANOS, HELIOS, Hestia and the colour grounds (03, Services) are identical in day and night: a Helios field is a Helios field at midnight.
Ink, ground, line, mark
Text, page, quiet card, link, hairline, rule, system accent and the mark. The table in chapter 02 lists each with its day and night value.
Light scenes go dark
02 and About take #111111 like the other dark scenes. Dark scenes and colour grounds stay as they are.
Ink from the ground under it
The nav takes the ground under it. A nav on a light ground has the day ink, at night too: Selene on Helios would be 1.24:1.
Follow the ink
The hero foot, the marquee rule and the scroll arrow are Selene in the core. Under a mode or a view they take the ink of their scene.
Coordinates in 02
The bar stays a Selene chip with #111111 ink, as on the footer. It travels over the milky video first, where Selene ink would not read.
Both modes
The site rule holds at night: full-strength Selene for all type and hairlines. The DS --night-ink-muted is not used.
A comparison tool
Auto | Light | Dark puts every scene on one ground, with !important. It is for looking, not a mode, and does not ship.
Removable
Day / Auto leaves the root without data-mode and data-ground-view, so no rule of the layer matches. Delete css/modes.css, js/modes.js and their two tags in index.html: the landing is the core. site.css, site.js and ds/ know nothing of it.
Chapter 02read live
Tokens by mode
Each row is read from the stylesheets when the page loads: the root with and without data-mode="night". Where day and night differ, the row says flips.
Chapter 03ink on ground | nav mark
Ground and ink
Every state of a scene, with the ink it gets and the mark of the nav that sits on it. Ratios are computed from the values in the field; AA needs 4.5:1 for text and 3:1 for the mark.
Chapter 042026-09-30
Checked, open, removable
Six states on the landing: Day and Night, each with Auto, Light and Dark.
Measured on the landing
Nav mark and links at every scroll position, the scroll arrow, the hero hairline: none below 3:1 (mark) or 4.5:1 (links) in any of the six states. A script over every element (text, border, shadow, svg) shows only two false positives at night: the 02 coordinates, whose bar is a sibling, and the CTA fills, which are pseudo-elements. The Services blue stays at 4.67:1, as in the core.
Decisions and gaps
Night ground: #111111 (used here, no seams between scenes) or Erebos #262626 (the DS night): Jodok. Where the layer lives: upstream in the DS or as a site layer. Not covered: the cursor, the sysmap overlay in the views, the manuals and this page's own scenes. The core still hardcodes Selene and Erebos in 46 places; the Ground view on a dark scene shows which.
The landing in each state
The landing always starts as Day / Auto; the state lives in the Mode menu of the bar and the URL. Reset returns to Day / Auto.