Three roles: surfaces (where things live), text (how type reads), and accents (reserved moments). Neon accents render on dark surfaces only — never as decoration on cream.

Two typefaces. Georgia does the editorial heavy lifting; system sans gets out of the way. Never mixed within a single element.

A 4px base scale. Use tokens, not arbitrary values — consistent rhythm is what makes surfaces feel like one system.

Square by default. Every surface, control, and container has a 0px radius. The sharp corner echoes the straight lines of the compass mark and the grid motif — a deliberate part of the identity, not an oversight. The exception: elements that are inherently round — avatars, status dots, the progress ring — stay circular, because their shape carries meaning rather than decorating a corner.

Shadows are warm and low. Borders do the structural work; elevation signals only that something floats above the page.

Quick and unshowy. One duration, one easing curve. Motion confirms an action — it doesn't perform.

Espresso primary on cream; the neon-yellow primary is reserved for dark surfaces. Uppercase sans, tight tracking, small radius.

Ink-blue category tags for content; count badges use neon red sparingly for notification state.

Focus rings use ink blue. Labels are uppercase warm-brown eyebrows. Errors carry neon red with a helper line.

The core content unit. Kicker, serif title, one-to-two-sentence body. Hover lifts with elevation. The feature variant runs on espresso with a neon accent word.

Horizontal site nav. Links rest in secondary text, resolve to ink blue on hover and current.

Underline tabs for switching views within a page. Active state uses the ink-blue underline.

Inline messages. Left border carries the semantic color; icon and copy stay quiet.

Quiet data. Uppercase muted headers, hairline borders, hover row highlight. No zebra striping.

Wayfinding for deep content. Ink-blue links, muted separators, current in primary text.

Focused decisions on a scrim. Serif title, quiet body, right-aligned actions with a clear primary.

Transient confirmation, bottom-right, espresso surface with a neon status border. Auto-dismisses.

On-demand context. Espresso bubble, appears on hover with a small rise.

Binary settings. Ink-blue when on. Pair with a label; never leave a naked switch.

Action and option menus. Border resolves to ink blue when open; items highlight on cream 3.

Serif initials on brand surfaces — no photography, per the brand rules. Stacks show collaborators.

Linear and radial indicators. Ink-blue fill on a cream-3 track.

Nothing here yet — say so plainly and offer the one next step. The mark stands in for imagery.

Product navigation on espresso — the neon-yellow active state is the one place neon earns its place in the UI.

The homepage centerpiece: a faint yellow grid over espresso, an eyebrow with a leading rule, and a two-line Georgia headline where the second line glows neon. On the live site the neon line shifts colour and copy as you hover the CTAs — hover the buttons below to see it.

The site's core layout device. Cells sit on a border-coloured background with 1px gaps, so the dividers are the background showing through — no drawn lines. Used for the idea cards, featured writing, and about blocks.

The three core ideas, each with a diagrammatic SVG (one accent colour apiece), a number, a serif title, and an uppercase ink-blue link that shifts to teal on hover. Illustrations are drawn, never stock — one accent per piece.

The article showcase: one ink-blue lead card with a cream serif title and amber meta, beside a stacked list of secondary posts. Each row is category label, serif title, excerpt, then date and read time.

The standalone featured article. A split accent border (coral tick over the yellow rule), an oversized ghosted index number, category and meta on one line, an ink-blue serif title, and a teal "Read" affordance. Reserved for the one post being spotlighted.

A full-bleed statement band on ink blue, with the grid fading in from the right. The eyebrow carries a trailing rule; a neon-yellow bar anchors the quote, whose first line reads upright and cream, the second italic and muted. The sub-note sits behind a hairline rule.

The two-up about pattern on a hairline grid: a bio cell (name, role, tags, link) beside a premise cell carrying an italic quote and the compass mark dissolving into a grid in the corner — the one place the mark appears as ambient texture rather than a logo.

The premise block. Large italic Georgia on cream 3, with a quiet attribution. Reserved for the voice speaking directly — no quotation-mark ornament, the italic carries it.