Instrument - Design System

When to use it

Reach for it when the page is a board of things: tiles, clocks, dashboards, an index that wants to feel lit rather than printed.

Merged in v2 from: bioluminescent, ethereal, earthy, glassmorphic. All four were a near-black blue-shifted ground, an Inter/JetBrains Mono pair, 8px spacing and 8px radius, separated only by accent hue. They are variants, not systems.

Contract: surface

A family is a set of token names plus structural rules. A variant is one set of values poured into them. Every variant below satisfies this contract, so swapping between them is a palette change, not a rewrite.

Required

--bg--fg--fg-muted--line--line-strong--scrim

Optional

--bg-elevated--fg-dim--cyan--amber--scrim-mid--tile-bg--board-bg--h2

Structural tokens

--radius-tile	corner on a content tile
--radius-btn	corner on a control
--border-w	hairline width, 1px throughout
--gap-featured	gutter in the featured grid
--tile-lift	translateY on hover, negative

--cyan and --amber are role names, not color claims. --cyan is the primary accent (links, titles, active state); --amber is the secondary accent (outbound markers, art bands). In the chalk variant --cyan is a pale sage and --amber is a soft straw; the names survive from the numerals variant where they are literally cyan and amber.

Variants

Same contract, different values. Click a swatch to copy it.

Chalk

live, dominantread live 2026-09-09

Soft chalkboard. Desaturated sage and straw on slate, diffuse lift rather than glow.

source: https://dr.eamer.dev/clocks/

source: https://datapoems.io/

Copied

--bg

#1a1e22

Copied

--bg-elevated

#242a30

Copied

--fg

#e8ece8

Copied

--fg-muted

rgba(232, 236, 232, 0.55)

Copied

--fg-dim

rgba(232, 236, 232, 0.4)

Copied

--cyan

#d4e0d0

Copied

--amber

#f0e6a8

Copied

--line

rgba(212, 224, 208, 0.14)

Copied

--line-strong

rgba(212, 224, 208, 0.4)

Copied

--scrim

rgba(26, 30, 34, 0.9)

Copied

--scrim-mid

rgba(26, 30, 34, 0.55)

Copied

--glow-a

rgba(220, 230, 220, 0.06)

Copied

--glow-b

rgba(180, 190, 160, 0.04)

Copied

--vignette

rgba(0, 0, 0, 0.4)

Copied

--tile-bg

#22282e

Copied

--board-bg

#1e2428

Copied

--h2

rgba(212, 224, 208, 0.55)

Copied

--exp-h2

rgba(240, 230, 168, 0.6)

Copied

--skip-fg

#1a1e22

Effects

--tile-shadow	0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06)
--tile-shadow-hover	0 6px 14px rgba(0, 0, 0, 0.35), 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 224, 208, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1)
body-wash	radial-gradient(ellipse 90% 55% at 50% -18%, var(--glow-a), transparent 55%), radial-gradient(ellipse 50% 40% at 100% 80%, var(--glow-b), transparent 50%), radial-gradient(ellipse 40% 35% at 0% 60%, var(--glow-a), transparent 45%), linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 28%, var(--bg) 100%)
vignette	radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, var(--vignette) 100%) at opacity 0.85 on body::before

/clocks/ and datapoems.io carry this token set identically. The only difference across the two pages is --feature-cols at the widest breakpoint: 5 on clocks, 6 on datapoems. Selector is `:root, html[data-theme="chalk"]` so the theme can be named explicitly without changing the default.

paste-ready :root

/* Chalk */
:root {
  /* colors */
  --bg: #1a1e22;
  --bg-elevated: #242a30;
  --fg: #e8ece8;
  --fg-muted: rgba(232, 236, 232, 0.55);
  --fg-dim: rgba(232, 236, 232, 0.4);
  --cyan: #d4e0d0;
  --amber: #f0e6a8;
  --line: rgba(212, 224, 208, 0.14);
  --line-strong: rgba(212, 224, 208, 0.4);
  --scrim: rgba(26, 30, 34, 0.9);
  --scrim-mid: rgba(26, 30, 34, 0.55);
  --glow-a: rgba(220, 230, 220, 0.06);
  --glow-b: rgba(180, 190, 160, 0.04);
  --vignette: rgba(0, 0, 0, 0.4);
  --tile-bg: #22282e;
  --board-bg: #1e2428;
  --h2: rgba(212, 224, 208, 0.55);
  --exp-h2: rgba(240, 230, 168, 0.6);
  --skip-fg: #1a1e22;
  /* effects */
  --tile-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --tile-shadow-hover: 0 6px 14px rgba(0, 0, 0, 0.35), 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 224, 208, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --body-wash: radial-gradient(ellipse 90% 55% at 50% -18%, var(--glow-a), transparent 55%), radial-gradient(ellipse 50% 40% at 100% 80%, var(--glow-b), transparent 50%), radial-gradient(ellipse 40% 35% at 0% 60%, var(--glow-a), transparent 45%), linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 28%, var(--bg) 100%);
  --vignette: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, var(--vignette) 100%) at opacity 0.85 on body::before;
}

Numerals

liveread live 2026-09-09

Night instrument. True cyan and amber on deep navy, the readout look.

source: https://dr.eamer.dev/clocks/numerals/

Copied

--bg

#040912

Copied

--cyan

#5cd9ff

Copied

--amber

#f5b441

Copied

--line

rgba(159, 178, 201, 0.18)

Copied

--line-strong

rgba(159, 178, 201, 0.42)

Copied

--scrim

rgba(4, 9, 18, 0.82)

Typography

font-ui	"Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, sans-serif
font-data	"JetBrains Mono", monospace

Structure

border-radius	10px on cards, 999px on pills
gap	0.6rem in the tile grid, 9px in the dense grid
grid	repeat(3\|4\|5\|6, 1fr) across breakpoints
aspect-ratio	3/2 and 3/4 depending on band

Proof that the surface contract generalizes: same token names as chalk, different palette, no structural rewrite.

paste-ready :root

/* Numerals */
:root {
  /* colors */
  --bg: #040912;
  --cyan: #5cd9ff;
  --amber: #f5b441;
  --line: rgba(159, 178, 201, 0.18);
  --line-strong: rgba(159, 178, 201, 0.42);
  --scrim: rgba(4, 9, 18, 0.82);
  /* structure */
  --border-radius: 10px on cards, 999px on pills;
  --gap: 0.6rem in the tile grid, 9px in the dense grid;
  --grid: repeat(3|4|5|6, 1fr) across breakpoints;
  --aspect-ratio: 3/2 and 3/4 depending on band;
  /* typography */
  --font-ui: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-data: "JetBrains Mono", monospace;
}

Deep Sea

datavis legacy

Saturated cyan and magenta glow on near-black.

Copied

--bg

#0a0a0a

Copied

--bg-void

#030508

Copied

--tile-bg

#1a1a1a

Copied

--bg-elevated

#2a2a2a

Copied

--line

#3a3a3a

Copied

--fg

#e0e0e0

Copied

--fg-muted

#888888

Copied

--fg-dim

#666666

Copied

--cyan

#00ffff

Copied

--amber

#ff00ff

Effects

glow-sm	0 0 8px rgba(0, 255, 255, 0.3)
glow-md	0 0 16px rgba(0, 255, 255, 0.4)
glow-lg	0 0 24px rgba(0, 255, 255, 0.5)

Used on

/datavis/attractive//datavis/poems/flow//datavis/poems/silence/

paste-ready :root

/* Deep Sea */
:root {
  /* colors */
  --bg: #0a0a0a;
  --bg-void: #030508;
  --tile-bg: #1a1a1a;
  --bg-elevated: #2a2a2a;
  --line: #3a3a3a;
  --fg: #e0e0e0;
  --fg-muted: #888888;
  --fg-dim: #666666;
  --cyan: #00ffff;
  --amber: #ff00ff;
  /* effects */
  --glow-sm: 0 0 8px rgba(0, 255, 255, 0.3);
  --glow-md: 0 0 16px rgba(0, 255, 255, 0.4);
  --glow-lg: 0 0 24px rgba(0, 255, 255, 0.5);
}

Aurora

datavis legacy

Green, ice and magenta over a radial night sky.

Copied

--bg

#080a0d

Copied

--fg

#e8eaed

Copied

--fg-muted

#6b7280

Copied

--cyan

#00f5ff

Copied

--amber

#00ff6a

Copied

--accent-3

#ff38c7

Typography

font-display	'Space Grotesk', sans-serif
font-data	'DM Mono', monospace

Effects

bg-gradient

radial-gradient(ellipse at top, #0a1a20 0%, #080a0d 50%)

Used on

/datavis/poems/aurora//datavis/dev/quirky/aurora-northern-veils.html

paste-ready :root

/* Aurora */
:root {
  /* colors */
  --bg: #080a0d;
  --fg: #e8eaed;
  --fg-muted: #6b7280;
  --cyan: #00f5ff;
  --amber: #00ff6a;
  --accent-3: #ff38c7;
  /* effects */
  --bg-gradient: radial-gradient(ellipse at top, #0a1a20 0%, #080a0d 50%);
  /* typography */
  --font-display: 'Space Grotesk', sans-serif;
  --font-data: 'DM Mono', monospace;
}

Cosmic

datavis legacy

Warm gold and amber for astronomical and geological subjects.

Copied

--bg

#0a0e27

Copied

--cyan

#ffd700

Copied

--amber

#ffaa00

Copied

--accent-3

#ff6b35

Effects

bg-gradient

radial-gradient(ellipse at center, #0a0e27 0%, #050508 100%)

Used on

/datavis/dev/cosmic-clock//datavis/dev/quirky/falling-stars-global.html

paste-ready :root

/* Cosmic */
:root {
  /* colors */
  --bg: #0a0e27;
  --cyan: #ffd700;
  --amber: #ffaa00;
  --accent-3: #ff6b35;
  /* effects */
  --bg-gradient: radial-gradient(ellipse at center, #0a0e27 0%, #050508 100%);
}

Mission Control

datavis legacy

Status readout. Muted traffic-light semantics over the deep-sea ground.

Copied

status-ok

#22aa55

Copied

status-warn

#ccaa44

Copied

status-alert

#cc4444

Typography

font-ui

'Open Sans', sans-serif

A semantic overlay on deep-sea rather than a full palette. Use it when a page reports state.

paste-ready :root

/* Mission Control */
:root {
  /* colors */
  --status-ok: #22aa55;
  --status-warn: #ccaa44;
  --status-alert: #cc4444;
  /* typography */
  --font-ui: 'Open Sans', sans-serif;
}

Topographic

datavis legacywas: ethereal

Teal and copper on slate, organic contour shapes.

Copied

--bg

#0f172a

Copied

--tile-bg

#1a2332

Copied

--bg-elevated

#1e293b

Copied

--fg

#e2e8f0

Copied

--fg-muted

#94a3b8

Copied

--cyan

#14b8a6

Copied

--cyan-light

#5eead4

Copied

--amber

#d97706

Copied

--amber-light

#fbbf24

Copied

--line

rgba(20, 184, 166, 0.15)

Copied

elevation-low

#064e3b

Copied

elevation-mid

#14b8a6

Copied

elevation-high

#fbbf24

Copied

water

#0ea5e9

Used on

/datavis/dev/pnw-isolates//datavis/dev/quirky/lighthouses-beacon-spiral.html

paste-ready :root

/* Topographic */
:root {
  /* colors */
  --bg: #0f172a;
  --tile-bg: #1a2332;
  --bg-elevated: #1e293b;
  --fg: #e2e8f0;
  --fg-muted: #94a3b8;
  --cyan: #14b8a6;
  --cyan-light: #5eead4;
  --amber: #d97706;
  --amber-light: #fbbf24;
  --line: rgba(20, 184, 166, 0.15);
  --elevation-low: #064e3b;
  --elevation-mid: #14b8a6;
  --elevation-high: #fbbf24;
  --water: #0ea5e9;
}

Documentary

datavis legacywas: earthy

Desert orange and yellow on deep navy, journalistic.

Copied

--bg

#0a0f1a

Copied

--tile-bg

#1a2332

Copied

--fg

#ffffff

Copied

--fg-muted

#94a3b8

Copied

--cyan

#ff6b35

Copied

--amber

#ffaa00

Copied

healthy-green

#2dd4bf

Copied

poverty-red

#ef4444

Copied

vehicle-purple

#a78bfa

Structure

--radius-tile	20px
--radius-tile-lg	24px

Effects

gradient-warm

linear-gradient(135deg, #ff6b35, #ffaa00)

Used on

/datavis/dev/food_deserts//datavis/dev/healthcare_deserts/

paste-ready :root

/* Documentary */
:root {
  /* colors */
  --bg: #0a0f1a;
  --tile-bg: #1a2332;
  --fg: #ffffff;
  --fg-muted: #94a3b8;
  --cyan: #ff6b35;
  --amber: #ffaa00;
  --healthy-green: #2dd4bf;
  --poverty-red: #ef4444;
  --vehicle-purple: #a78bfa;
  /* structure */
  --radius-tile: 20px;
  --radius-tile-lg: 24px;
  /* effects */
  --gradient-warm: linear-gradient(135deg, #ff6b35, #ffaa00);
}

Glass

datavis legacywas: glassmorphic

Frosted blur panels over a dark ground, cyan accent.

Copied

--bg

#0a0e1a

Copied

--tile-bg

rgba(10, 14, 26, 0.75)

Copied

--fg

#ffffff

Copied

--fg-muted

#94a3b8

Copied

--cyan

#06b6d4

Copied

--line

rgba(6, 182, 212, 0.2)

Copied

glass-light

rgba(255, 255, 255, 0.7)

Copied

glass-border-light

rgba(255, 255, 255, 0.3)

Copied

glass-shadow

rgba(31, 38, 135, 0.15)

Structure

--radius-tile	12px
--radius-modal	16px

Effects

blur-sm	backdrop-filter: blur(4px)
blur-md	backdrop-filter: blur(8px)
blur-lg	backdrop-filter: blur(12px)

Used on

/datavis/expat-guide//datavis/dev/inequality-atlas/

paste-ready :root

/* Glass */
:root {
  /* colors */
  --bg: #0a0e1a;
  --tile-bg: rgba(10, 14, 26, 0.75);
  --fg: #ffffff;
  --fg-muted: #94a3b8;
  --cyan: #06b6d4;
  --line: rgba(6, 182, 212, 0.2);
  --glass-light: rgba(255, 255, 255, 0.7);
  --glass-border-light: rgba(255, 255, 255, 0.3);
  --glass-shadow: rgba(31, 38, 135, 0.15);
  /* structure */
  --radius-tile: 12px;
  --radius-modal: 16px;
  /* effects */
  --blur-sm: backdrop-filter: blur(4px);
  --blur-md: backdrop-filter: blur(8px);
  --blur-lg: backdrop-filter: blur(12px);
}

Neon Lab

datavis legacy

Deep-sea with the glow turned up and doubled.

Copied

--bg

#0a0014

Effects

glow-multiplier	2.0
double-glow	True

paste-ready :root

/* Neon Lab */
:root {
  /* colors */
  --bg: #0a0014;
  /* effects */
  --glow-multiplier: 2.0;
  --double-glow: True;
}

Typography

Atkinson Hyperlegible is the house display face on the live tile indexes and it is a legibility face by design. The older datavis variants used Inter and Space Grotesk; prefer Atkinson on anything new.

font-display