How the tokens and contexts of Namche connect: the base values, the roles that read them, the contexts that re-point them and the parts that use them. Values are read from the live stylesheet.
Chapter 01Base | role | part
A base value feeds a role, a role feeds a part. A context re-points the roles: switch the ground, the mode, the viewport and watch the lines move. Click any node to follow its chain.
Chapter 02Resolved
Only colour changes with the ground. Type, space, shape and motion are the same on every one; the viewport and reduced motion change the grid and the movement, not the tokens. Read from the stylesheet, contrast computed here.
Outlined ratios are below the target of their row. Colour grounds are paint and identical day and night: Helios in 03 and 04, Aion in Services, text picked by contrast. Night turns only the light scenes dark.
Chapter 03Across contexts
The decisions that hold in every context, and the tokens each one governs. A chip selects that node in the map.
Hestia is the only loud signal: CTA, first rule, active index, selection. The hero has none at rest. On a Hestia field the hook steps aside: the footer is Hestia, so the cursor goes Selene over it, and the nav CTA too on the desktop bar.
No muted text and no dimmed hairlines: the muted tokens are set to the ink itself. On a colour ground site.js picks Ink or Selene by contrast.
In the DS only GAIA is cleared for interface; OKEANOS and HELIOS are illustration and editorial. The landing takes their tones as fields (insight cards, colour scenes) and Hestia as the hook; type and controls otherwise stay GAIA and Ink.
Namche Shadow Sans Medium for headlines and running text, Shadow Mono Medium for labels, meta and codes. No Geist and no Regular on the landing.
Spacing on 2 | 4 | 8 | 16 | 32 | 64, fixed and never fluid. Every line-height and scene height snaps to the 8 px baseline.
The hairline is the only stroke and there is no elevation: separation is colour and space.
Hover changes colour or line, never scale. Reveals clip and slide, nothing fades in on scroll.
The metaball is a flat 2D mark, animated. The 3D coral appears once, as the video reveal in 02. Hestia is never a photo filter.
From docs/site-notes.md, the brief and the hard bans in CLAUDE.md.
Chapter 04Record
Where drawing the system showed something that did not line up. Focus and ink are closed; the numbers are computed from the stylesheet.
--focus-ring reads --accent-system again wherever the accent changes (closed 2026-10-02): on .dark, on the light nav at night, and on a colour field at night. Before that the ring was resolved once at :root, so by day it stayed Lapislazuli 800 on a dark scene (- : 1 on #111111).
Light grounds took two inks: the landing --text-primary, Erebos - (- : 1 on Selene), the manuals --ink-light, - (- : 1). Now both read the ink computed for the ground, --ink-on-gaia-selene: of Ink and Selene the one with the higher contrast. Erebos stays a tone and a field, no longer an ink.
Navy #1A2A4A is the brief's navy. It is a site token (--cursor-on-light) and exists nowhere in the DS this landing is built on; only the cursor on light grounds wears it. Aion #738CD9 was once written out in the stylesheet; it now reads --helios-aion.
The landing is the first product and takes only a few tones. Available for other products, not on this page: -. Geist Sans is a fallback only, never the face. Shadow Pixel is parked until the next DS update. Neither is loaded.