Skip to content

§ Design system

Four ways to draw the same page

This site ships in four themes, one picked at random each visit. They change surface treatment, radius, type, and pattern — never layout, never copy. Here is what each one is, where it comes from, and what it cost to make it readable.

How it works

  • A theme changes surface treatment, radius, type, and pattern. It never changes layout, spacing, or copy — the page is the same page in all four, which is the only reason four of them is maintainable.
  • Each theme is a set of CSS custom property overrides under a `data-kj-theme` attribute. No component is forked, and adding a fifth theme means adding one block, not touching any component.
  • `.surface` is the single themed primitive. Each theme decides what raised *means* — an extrusion, a hairline ring, a black rule, or a hard offset block — and every card on the site inherits that decision.
  • One theme is chosen at random on each visit and held for the session. Choosing one explicitly pins it.
  • All four were audited in a browser across every text element on seven pages: 0 failures against WCAG AA.

Neumorphism

Soft extruded dual-shadow

What it does

  • Every surface is the same colour as the page. Depth comes entirely from a pair of shadows offset in opposite directions — a dark one down-right, a light one up-left — which reads as a single light source above and to the left.
  • There are no borders anywhere. An element is raised, inset, or pressed, and that is the whole vocabulary; the pressed state is the same shadow pair turned inward.
  • Radius is the largest of the four themes at 22px on containers, because a soft extrusion needs a soft edge to sit on.

Where it comes from

  • Named around 2019–2020, when designers started pushing back on a decade of flat design by reintroducing depth — but depth rendered in a single flat colour rather than with the textures and gradients of the skeuomorphic era it descends from.
  • The underlying trick is much older: it is the same shading that made physical buttons on interfaces before 2013 look pressable.

Characteristics

One ground colour for page and surfaces alikePaired light/dark shadows, generous blurNo borders, no dividers between surfacesSystem sans; large radii; round stroke terminals

The trade-off

Neumorphism's central idea is that everything is the same colour, which means contrast has nowhere to come from. It is the least accessible of the four by construction, and the only one where reaching AA required changing the palette rather than just choosing carefully within it.

live specimen — real tokens, not a mockup

Tokens

Ground
#e0e5ec
Ink
#3a4252
Muted
#5a6478
Accent
#4553d6
Shadow pair
#bec3c9 / #ffffff
Radius
8 / 14 / 22px

Measured contrast

Body text on ground
7.97:1AAA
Muted text on ground
4.70:1AA
Accent on ground
4.79:1AA

Measured in a browser against this theme’s own ground, not computed from the hex values.

Corrected from the source palette

  • Muted text#8a94a6 (2.40:1)#5a6478 (4.70:1)

    Failed AA by a wide margin. Every secondary paragraph on the site uses this token.

  • Accent#6a7bff (2.81:1)#4553d6 (4.79:1)

    The original is kept as a decorative glow, but never carries text.

Blueprint

Cyan-on-navy drafting

What it does

  • A drafting grid is drawn across the page from the accent colour at low alpha, so every surface sits on measured paper rather than on a blank field.
  • There is no raised state. A surface is a one-pixel ring in the accent at 28% opacity — the same weight as the grid behind it, so panels read as drawn rather than stacked.
  • Everything is monospaced, including body copy, and radius is close to zero.

Where it comes from

  • The cyanotype, a photographic printing process invented by John Herschel in 1842, which reproduces a drawing as white lines on Prussian blue.
  • It became the standard way to copy architectural and engineering drawings because it was cheap and needed no darkroom — the print is exposed in sunlight and washed in water. The process was obsolete by the mid-20th century, but the look outlived it, which is why we still say 'blueprint' for a plan.

Characteristics

Luminous line on a dark ground, not ink on paperUniform hairline weight for rules, borders, and glyphsA visible measuring gridMonospace throughout; mitred corners; near-zero radius

The trade-off

Setting body copy in a monospace face costs reading speed at length. It suits a page of proof names and file paths and works against a long essay, which is why the prose pages are the ones to check this theme against.

live specimen — real tokens, not a mockup

Tokens

Ground
#0b2545
Ink
#dce8ff
Muted
#8fb4de
Accent
#6ad0ff
Grid
accent @ 9%
Radius
2 / 3 / 4px

Measured contrast

Body text on ground
12.48:1AAA
Muted text on ground
7.14:1AAA
Accent on ground
8.85:1AAA

Measured in a browser against this theme’s own ground, not computed from the hex values.

Swiss

Strict grid, red accent

What it does

  • Radius is zero everywhere — containers, controls, code blocks, badges. Nothing on the page is rounded.
  • A surface is a single black hairline. There is no shadow, no fill change, and no elevation; separation comes from the rule and from space.
  • One accent colour, used sparingly, against otherwise black-on-near-white.

Where it comes from

  • The International Typographic Style, developed in Switzerland through the 1950s at the design schools in Basel and Zürich — Josef Müller-Brockmann, Armin Hofmann, and Emil Ruder among its principal teachers.
  • Its programme was that design should communicate rather than express: a mathematical grid, asymmetric composition, flush-left ragged-right setting, objective photography over illustration, and sans-serif type — Akzidenz-Grotesk first, then Helvetica after 1957.

Characteristics

Zero radius, zero ornament, zero shadowHairline rules doing the work of borders and dividersGrotesque sans throughout, tight and flush-leftA single accent, held back for emphasis

The trade-off

The style is unforgiving of weak content. With no ornament, no colour, and no elevation to lean on, everything depends on the writing and the spacing, and a slack paragraph has nowhere to hide.

live specimen — real tokens, not a mockup

Tokens

Ground
#f4f4f2
Ink
#111111
Muted
#555555
Accent
#d10510
Surface
1px solid #111
Radius
0

Measured contrast

Body text on ground
17.15:1AAA
Muted text on ground
6.77:1AAA
Accent on ground
5.10:1AA

Measured in a browser against this theme’s own ground, not computed from the hex values.

Corrected from the source palette

  • Accent#e30613 (4.47:1)#d10510 (5.10:1)

    Under AA by 0.03 — close enough to look fine and still fail an audit, which is the most common way this happens.

8-bit

Chunky pixels, limited palette

What it does

  • Shadows have zero blur and integer offsets — a hard block displaced four pixels down and right, plus a two-pixel outline. Nothing is soft.
  • Icons render with antialiasing off, so a diagonal stroke shows its staircase instead of smoothing it.
  • A faint one-pixel lattice runs across the page at 3% white, the scan of a display that never quite resolved.

Where it comes from

  • The home computers and consoles of roughly 1983 to 1990, where the look was not a style but a consequence of hardware: fixed palettes held in ROM, a hard cap on colours per sprite and per scanline, no antialiasing, and an integer pixel grid with no subpixel positioning.
  • What reads today as a deliberate aesthetic was, at the time, simply the only thing the machine could draw.

Characteristics

Hard offset shadows, zero blur, integer displacementAntialiasing disabled on glyphs and iconsZero radius; two-pixel strokes; square terminalsSmall, high-contrast palette; monospace throughout

The trade-off

Disabling antialiasing is honest to the reference and slightly worse to read at small sizes on a high-density display, where the hardware is perfectly capable of smoothing the edge and is being told not to.

live specimen — real tokens, not a mockup

Tokens

Ground
#1a1c2c
Ink
#f0f0f0
Muted
#8b8fa8
Accent
#ffcd75
Shadow
4px 4px 0 #0f1119
Radius
0

Measured contrast

Body text on ground
14.78:1AAA
Muted text on ground
5.29:1AA
Accent on ground
11.43:1AAA

Measured in a browser against this theme’s own ground, not computed from the hex values.