Design System

The visual language of this site. Every decision is intentional; nothing is decorative without purpose.

Philosophy

Premium utilitarian minimalism. Bone-white background, tight typography, no gratuitous gradients or shadows. Every pixel earns its place.

Dark mode inverts the palette semantically; the same design tokens produce both themes without separate color schemes.

Named after the traditional Japanese color 瑠璃紺 (rurikon). A single blue-grey scale anchors the entire palette.

100

200

300

400

500

600

700

800

900

950

Background

#fcfcfc

Border

#d8dbdfb3

Body, UI, headings

440 (normal)The quick brown fox jumps over the lazy dog

500 (medium)The quick brown fox jumps over the lazy dog

600 (semibold)The quick brown fox jumps over the lazy dog

640 (bold)The quick brown fox jumps over the lazy dog

Emphasis, quotes, nav

480 (default)The quick brown fox jumps over the lazy dog

Code, labels, metadata

Extended Mediumconst x = fn(a, b) => a + b;

OpenType Features

'cpsp' 1, 'cv01', 'cv03', 'cv04', 'calt', 'ss03', 'liga', 'ordn'

activecompletepending

This is how blockquotes appear throughout the site, using the serif font for emphasis.

No decoration without function. No gradients, drop shadows, or rounded corners unless they communicate hierarchy.
Typography carries the design. Weight, tracking, and optical sizing do the work that color and imagery do elsewhere.
Motion is information. View transitions and animations signal state changes, never distract.
One scale, two themes. Dark mode inverts the semantic palette; no separate color system.
Content-first density. Maximum information with minimum chrome.