The tokens and components Hypha Hypha is built from. This page renders with the product's own stylesheet. If something looks wrong here, it is wrong in the product too.
ABC Areal and ABC Areal Mono (Dinamo), self-hosted as variable WOFF2 on a free-fonts licence. Weight axis 400–700. Mono is reserved for anything measured, counted or technical: week numbers, section labels, email addresses, captions.
Aa · the quick brown fox
Aa · W38 · 14–20 Sep · 0.0s
24 / 50021 / 60017 / 40014 / 40012 / 400mono 11 / .06emTwo modes, one token set: warm paper in light, near-black in dark. The default follows your system; the switch in the footer pins it. Every swatch on this page shows the mode you are reading it in.
The interface is monochrome on a warm ground. Colour is spent in exactly one place: a
member's availability. Nothing else earns it; the other accents in the palette (rose,
purple, blue) are reserved, deliberately unused. Cards and inputs sit on
--color-card, a step brighter (light) or deeper (dark) than the page.
--color-card
--color-ink
--color-ink-2
--color-ink-3
--color-ink-4
--color-border
--color-border-subtle
--color-surface-subtle
--color-paper
--color-ft
--color-pt
--color-na
A fourth state carries no colour at all: a week nobody answered is a hairline outline. It must never read as "not available": absent and refused are different answers, and the whole substrate depends on not confusing them.
Twelve weeks, one shared ruler. Month ticks mark where each month's first week begins, so the labels line up with the blocks beneath them.
Not Available 14–20 Sep, Part-Time 21–27 Sep, Full-Time 28 Sep–18 Oct · 7 unanswered
The same data, gone stale. Colour is removed wholesale rather than dimmed, so an old answer can never be mistaken for a current one:
Stale · last answered 3 weeks ago
The address is the control. Clicking opens mail; the copy icon copies it. One target, and it tells you who you're about to write to before you click.
ada@studio-lin.exampleGeist: single colour, 16px grid, one path per glyph. An icon never carries meaning alone; it always sits next to the text it illustrates.
One primary per view. Everything reversible or lower-stakes is secondary, including destructive actions, which should never be the most prominent thing on a page.
The general pattern for a one-line, time-bound disclaimer: true only until some moment, then stale. A mono label chip plus a line that truncates rather than wraps: one glance, not a card to read.
Next check-in30 Sep · we'll email you a link then, or update it now
Intelligence lives outside Hypha Hypha. The server stores and returns raw facts; it never ranks, scores, matches or infers. Captions on this page restate what a member said; they never extrapolate past it. An unanswered week stays unanswered.