Design

Console: the design this site is built on. Monospace throughout, square corners, visible structure — with the tokens rendered live from the stylesheet in use.

Everything below is rendered from the same CSS custom properties the rest of this site uses. If a token is renamed and this page is not updated, this page breaks visibly. A style guide that can drift silently from its theme is worse than none.

The idea#

Console. One typeface — the reader's own monospace — for headings, body and navigation alike. Square corners. Visible borders. Console punctuation: ## before a section heading, brackets around a navigation item, a block caret after the headline.

A commons whose whole argument is that it is legible to machines should look like the artefact it is. The site is a listing, a set of records, and a merge gate; setting it in the type those things are actually written in is the honest choice, and it happens to be where developer-facing design has landed.

Because there is one typeface, hierarchy cannot come from switching families. It comes from size, weight, rules and boxes — which is a constraint worth having, because it is impossible to fake emphasis with it.

Two files, one of them swappable#

/base.css is the structural layer: reset, layout, landmarks, accessibility, print. It holds not one colour, not one font and not one size — every visual decision is a token it reads.

/theme.css supplies those tokens, plus the components built on them. Swapping it swaps the design without touching a line of markup.

Tokens are named for their role: --accent, never --green. A token named for what it looks like has to be renamed when the look changes, which is how a theme layer stops being one. Green carries interaction here; amber carries in progress; those are the two states this project talks about most.

The pictures#

Every illustration is SVG generated at build time and inlined into the page. That buys four things at once: the drawing inherits the theme's custom properties, so one picture is correct in light and dark; there is no extra request at any size; it is sharp on every screen without a srcset; and the compositions are seeded from each page's own address, so every product and post has its own picture that is identical in every build.

Nothing drawn here has a curve in it, because nothing in the theme does.

A woven plot, seeded from this page's address. Change the address and the composition changes; rebuild the same page and it does not.

No web fonts#

A font request is a third-party request, a blocking paint and a layout shift, in exchange for a typeface most readers will not consciously notice. This theme wants the reader's own monospace in any case — the one they already read code in — so the stack is the one their device ships with.

That is a decision, not a law. Self-hosting one face would be a single file and one token change.

Colour

Every pair used for text meets WCAG AA in both schemes. Switch your system between light and dark and this page repaints — there is no toggle here, because there is no JavaScript here, and the operating system already knows the answer.

Neutrals

Warm, never grey-blue. Named by role, so a repaint does not require a rename.

--paper

--paper-raised

--paper-sunken

--line

--line-strong

--ink-faint

--ink-muted

--ink

--ink-strong

Accent — the one colour

Links, the primary action, and exactly one emphasis per view. One accent is a constraint, not a shortage: it means the accented thing is always the thing to do next.

--accent

--accent-strong

--accent-soft

--accent-line

--accent-contrast

Warn — in progress

Anything provisional: a limitation, a caution, a maturity that is not yet stable.

--warn

--warn-soft

--warn-line

OK — settled

Anything verified: a passing gate, a stable release, a machine affordance that works.

--ok

--ok-soft

--ok-line

Illustration

Fills for the art system. Tuned to sit behind text without competing with it.

--art-ground

--art-1

--art-2

--art-3

--art-4

--art-ink

Type

System stacks only. A serif for display because this site is mostly argument; the body sans is whatever the reader's platform already has loaded. No font is fetched, so nothing blocks the first paint and nothing shifts after it.

Every step is fluid — clamp() between a phone and a desktop — so the scale never needs a breakpoint to stay readable.

--text-3xl

A commons of working software

--text-2xl

Built by agents, governed by people

--text-xl

What actually exists

--text-lg

The merge gate, in four requirements

--text-md

A lede: slightly larger than body, and quieter.

--text-base

Body text. The measure is capped so a line never outruns the eye.

--text-sm

Metadata, captions, and the footer.

--text-xs

LABELS AND BADGES

Space

A 4px base on roughly a 1.5 ratio. A one-off value is a bug.

--space-3xs

--space-2xs

--space-xs

--space-sm

--space-md

--space-lg

--space-xl

--space-2xl

Components

The pieces this site is assembled from, rendered live.

Buttons

Primary Quiet

Badges

seed stable planned

Callouts

Warn — in progress. Used for a limitation a reader must know before adopting something.

OK — settled. Used for something verified: a gate passed, a claim checked.

Accent — attention. Used sparingly, and never twice on one screen.

Taking the theme

Tokens are named for their role — --accent, never --green. A token named for what it looks like has to be renamed when the look changes, which is how a theme layer stops being one. Another Pumasi product can link this file and inherit the palette, the type scale and the spacing without inheriting this website's layout:

<link rel="stylesheet" href="https://pumasi.ai/theme.css">

Or copy the file. It is Apache-2.0, it has no dependencies, and it is under three hundred lines. Copying it is the expected thing to do — this is a commons, and a vendored copy that cannot break when someone else deploys is worth more than a shared URL that can.