Design rationale

Two accents, two jobs

Gold is identity — change ids, stack rails, the revision timeline, the wash behind a stacked row. Every place the interface is pointing at a thing that keeps its name through a rewrite. Teal is action — links, and the one primary control on a page. The test when adding an element: does it name a change, or does it do something? It is never both. A gold button or a teal change id breaks the only colour rule the interface has, and once either starts leaking the other stops meaning anything.

There is deliberately no third brand colour. An earlier revision of this system had one — a vermilion reserved for the wordmark and marketing surfaces — and it spent its force competing with the two accents that carry meaning. Identity and action are the whole palette; everything else is neutral or a state.

Conflict is magenta, not red

In jj a conflict is a committed, reviewable state — not an error. Colouring it red would teach the wrong model on the first encounter and take a long time to unteach. Red is reserved for destructive actions and for things that are actually broken.

The type pairing

Mono carries the content: identifiers, paths, diffs, timestamps, numbers. IBM Plex Sans carries the interface around it. Plex Sans Condensed does two jobs — uppercase at 11px for labels and column headers, where it buys horizontal room in dense tables and subordinates the label to its value; and large and bold for display headings, where it gives the marketing surfaces a voice the product surfaces do not have. Base is 14px on 21px. If a new element holds data, set it in mono; if it explains data, sans; if it names a column of data, condense it.

All three faces are self-hosted Latin subsets. A forge should not tell a third party which repository you are reading, which is what a font CDN learns on every page load.

Density over decoration

Radius is 3px, borders are one hairline, and shadows appear only on things that genuinely float. The pages that matter — change lists, diffs, file trees — are read for hours, and every pixel of chrome is one not spent on code. Rows are 28 to 34px, tables are separated by hairlines rather than boxed, and the only decorative element in the whole system is the tagline strip on the landing page.

Nothing animates. The design this was ported from types into a terminal and scrolls a marquee; neither ships. A console that types at you is indistinguishable from one showing live output, and a permanently moving strip is a permanently moving object on the page for a reader who did not ask for one.

Nothing depends on JavaScript

Progressive enhancement is a hard requirement, so every control here has a no-script form: toggles are links to real URLs, filters are GET forms, and the line numbers in a blob are anchors. htmx is loaded for enhancement only. A control that cannot be built this way is a control this system does not have.