Color.Theory()
Why this site looks the way it does — the influences behind the palette and the color theory that keeps a four-hue CRT aesthetic readable.
Influences.load()
The aesthetic is 90s-CRT retro-futurism: The Matrix's phosphor-green terminals, Ghost in the Shell: SAC's cool violet interfaces, Hackers' neon bravado, and Silo's dim, utilitarian screens. The thesis borrowed from all four: dim phosphor light and restraint — not neon fog. Old monitors glowed at the edges of dark rooms; they did not flood them.
The palette honors those sources — matrix green, CRT amber, deep blue-violet — but discipline does the real work. Every rule below exists to let four saturated hues share one dark screen without shouting over each other.
Palette.tokens()
Content & structure — body links, headings, borders. The dominant hue.
Headlines, glow cores, hover states. Brightness is the hover signal.
Deep blue-purple for borders and fills. Never used as text.
Phosphor green — data, metrics, terminal output, active states.
Green borders and fills around data surfaces.
CRT amber — system status, telemetry, prompts, warnings.
Errors only. Not decoration, not emphasis.
Indigo-black field; near-white text tinted blue-violet to match it.
system.note: contrast ratios are measured against the #0A041A background per WCAG 2.1.
Rules.apply()
0160-30-10 hierarchy
Theory
Classic interior-design ratio applied to hue: one dominant color, one supporting, the rest as accents. Four saturated hues at equal weight give the eye no anchor.
On this site
Violet owns structure and most of every view. Green appears only where there is data. Amber and red are rare enough to mean something.
02Semantic color roles
Theory
Color reads faster than words — but only if each hue keeps one job. When a color means everything, it means nothing.
On this site
Purple = content and structure. Green = data, terminal output, active states. Amber = system status and warnings. Red = errors, nothing else.
03Hover brightens, never hue-flips
Theory
A hue change reads as "different thing"; a brightness change reads as "same thing, energized". Interaction feedback should not re-color the interface.
On this site
Violet elements hover to bright violet. The green CTA fills solid green. Nothing flips between complement hues on hover.
04Mono-hue gradients
Theory
RGB interpolation between violet (~250°) and green (~140°) passes through desaturated grey-cyan — a muddy midpoint. The pair also sits ~110° apart: too far for analogous harmony, too close for complementary punch.
On this site
Every gradient stays inside one hue family or fades to transparent. No purple-to-green anywhere.
05Simultaneous contrast
Theory
A neutral grey on a violet field appears green-shifted, because the eye subtracts the surround. True neutrals are a lie on colored backgrounds.
On this site
Body text is not grey — it is tinted toward the background hue (#DEDFF2), so it reads as neutral instead of sickly.
06Small-area complements
Theory
Near-complementary color in small doses adds spark; in large doses the pair vibrates and competes. Area, not hue, decides harmony.
On this site
Green lives in pulse dots, cursors, list markers, and the logo — tiny punctuation against the violet field, never a second wall of color.
07Contrast is a hard floor
Theory
WCAG AA requires 4.5:1 for text. Deep colors on a near-black field cannot carry text, no matter how good they look — depth has to live in borders, fills, and background instead.
On this site
Every text token clears 6.6:1 or better; most clear 10:1. The truly deep purple (#4F2CC0) is locked to non-text roles. Axe runs at zero violations.
Everything on this page is rendered with the tokens it describes.