Paper ground, hard black rules, one hot orange. Nothing is softened, nothing is hidden: emphasis is a fill, structure is a rule, and the chrome speaks in small mono capitals.
This page shows the system live, drawn by alethia.css. Switch the theme in the bar above. The rules and the reasons behind them are in the README; the values, for tools, are in tokens.json. The app's own stylesheets are the source of truth for all of it.
Two neutrals and one spot colour. Swatches follow the current theme; the labels show both values. Contrast is measured against the ground the token is actually used on.
Web Content Accessibility Guidelines (WCAG) 2 ratios, computed here in the browser from
the values in alethia.css, for both
themes. Text needs 4.5:1 (AA) or 7:1 (AAA). Anything under 4.5 is marked as a fail:
all chrome type is small, so the 3:1 allowance for large text never applies here. The
last two rows fail on purpose: they are the pairs the token split exists to prevent.
| Pair | Where | Light | Dark |
|---|
Three voices, never mixed within a role. Archivo carries reading. Archivo Black shouts, always in capitals. DM Mono labels everything that is not content.
Rendering is a skin the caret peels back. Click into anything and its raw syntax reappears, then closes again when you leave.
Structure is drawn, not shaded. Four line weights, square corners everywhere, no shadows. Depth comes from inversion: a band of ink on paper, or paper on ink.
The editor window, rebuilt from the .al-* classes. Hover the rows, tabs and toolbar to see the two interaction colours: hot fill for "pointing at", inversion for "pressed" or "selected". Tab through it to see the focus outline.
The source is always here. Rendering is a skin the caret peels back — click into anything and its raw syntax reappears.
Write it down before it becomes an opinion.
segment boundaries
No folder open.
Recent
Plain semantic HTML inside .al-prose,
set the way the editor renders markdown.
Text is strong, emphasised, struck, or
inline code. A link is a filled label, not an
underline.
| Stage | Owner | Days |
|---|---|---|
| Intake | Ops | 3 |
| Review | Agency | 6 |
export function reveal(node: SyntaxNode, caret: number): boolean {
// The document is the markdown; decorations are only a skin over it.
return caret >= node.from && caret <= node.to && 'visible' !== 0
}
The app itself, for comparison with the rebuilt chrome above. Screenshots live in
screenshots/.
On paper the ground is white, every orange goes black, the slabs stay solid and inline fills become rules. Print this page to see the whole specimen that way; the rules are in the README under Print.