Interlink design system · ui atoms v1.0.0 · built 2026-09-30
Component specimen
Every component in atoms.css, in every state, on a real page ground.
Captions name the classes. States marked .is-* are the forced mirrors of
:hover / :active / :focus-visible, declared beside
the real selector in atoms.css so they cannot drift from it.
01 navigation — .il-nav · .il-nav__brand · .il-lang · .il-nav__provenance. Live at the top of this page. Below 900px the bar collapses to brand + .il-nav__disclosure, shown open at the phone width. The brand is the plain wordmark: a signal rule here plus one on the hero eyebrow is two in the first viewport, which is the repetition SHARED.md rule 2 exists to prevent.
02 Eyebrowone per screenful
.il-eyebrow — the mono label over a short signal rule. The most characteristic small component in the system, and the one the minimalism contract caps at one per screenful. The rule is 2px, heavier than the 1px structural hairline, because it is a mark and not a structure.
Intelligence on the Reactionary International
Recent work
03 Buttonsrest · hover · active · focus · disabled
.il-btn--primary — ink fill. Active is the hover colour plus a one-hairline press: an ink fill has nowhere darker to go on a light theme, so the pressed state is geometric.
.il-btn--secondary — hairline outline in --il-ink-muted, not --il-rule: a control boundary owes 3:1 and the rule tokens are deliberately below it.
.il-btn--ghost — no boundary, for the tertiary action beside a real one.
.il-btn--danger — the one control in the system permitted a signal fill. Its focus ring swaps to ink, because a signal ring around a signal fill is no ring at all.
04 Linksinline · standalone · external
.il-link — inline in prose; a 1px underline in --il-rule-strong at 0.18em offset, going to the signal on hover. .il-link-standalone ends a block; its arrow is the typographic U+2192, not an icon. .il-link-external adds the external icon and names itself to a screen reader.
The programme's own deck calls the object of study the Reactionary International — nationally framed, internationally wired. Company filings, party accounts and foundation disclosures are read in the original and cited in full.
05 Badges & tagsmono · uppercase · hairline
.il-badge — category. --status — a state, so it takes the stronger boundary. --live — an investigation currently open; the signal marks the connection and the square is a second, non-colour cue.
06 Work indexa list, never a card grid
.il-index — published work. Rows separated by one hairline, mono category and year left, title in Archivo right. No thumbnail, no box, no border beyond the row rule, no button (DECISIONS §7b). The whole row is the link, so the hit target is the row and the focus ring frames it. --live takes the signal, at most once per list.
07 Feature cardthe exception — once per page
.il-feature — the only boxed component in the system, for a lead item that has to outrank the index. Hairline bounded, no shadow, no radius. Use it at most once on a page; two features are a card grid wearing a different name.
Who funds the Reactionary International?
Eighteen months of foundation filings across four jurisdictions, reconciled into a single funding graph — with every transfer traced to its source document.
Read the investigation08 Source citationthe promise, as a component
.il-cite — a claim beside its source. The signal edge is sanctioned by DECISIONS §3: a citation marker is precisely a connection Interlink has established. .il-cite-marker is the in-prose reference.
The foundation transferred €2.4m to three recipients in the same quarter it registered its Brussels office[1], and named two of its own directors to the recipients' boards[2].
[1] Handelsregister B 214 992 — annual accounts, filed 14 Mar 2026 · retrieved PDF
[2] Companies House 09244821 — appointment of directors, 02 Apr 2026 · retrieved PDF
09 Noticeinformational, not alarming
.il-notice — the AI-assisted disclaimer pattern. A sunk well and a mono kicker; no signal, no warning iconography. It states a method, it is not an incident.
AI-assisted
Parts of this dataset were sorted and summarised with the help of a language model. Every claim is linked to its source document; verify against the source before publication.
10 Form controlsboxed · 44px · real labels
.il-input — hairline-boxed, not underlined: a box of hairlines is the same idea as the rest of the system, it gives an unambiguous 44px target, and an underline cannot reach 3:1 on the sides it does not have. Borders are --il-ink-muted.
Enter a complete email address
The chevron is drawn in CSS, so a form carries no icon dependency.
11 Contact formthe current site's fields, kept
.il-form — Name / Organisation / Email / Message / Website + Send, as on interlink.zone today. .il-honeypot is the spam trap already in that markup: a real, labelled, empty field, positioned off-screen rather than hidden, with tabindex="-1" and aria-hidden so no person ever reaches it. The server rejects any submission where it is non-empty.
12 Tabs & paginationlinks, not widgets
.il-tabs — navigational tabs: each is a link to a filtered view, so aria-current is the whole contract. No roving tabindex, no arrow-key handler, no JavaScript anywhere in this layer. The active tab's 2px signal underline is a sanctioned signal use — the active state of a control.
.il-pager — minimal; current page carries weight and a signal underline, never colour alone.
13 Footerplain wordmark, as in the header
.il-footer — wordmark, descriptor, contact, the Autonomy line, copyright. It takes the plain wordmark, as the header does — the signal-rule device is for standalone identity contexts, not for page chrome.