/** * "Iceberg" — a chilly blue color scheme for the discerning developer. * * Most of an iceberg lives below the waterline. Good design works the * same way: 90% of what makes an interface feel right is invisible — * the spacing, the muted contrast, the way one blue eases into the next. * * @version 1.0.0 * @scheme dark-only * @palette 84a0c6 · 89b8c2 · b4be82 · e2a478 · a093c7 */

An iceberg
under the editor.

A design system for tools that feel like home in a dark editor — cool blues, frosted neutrals, restrained warmth. Built for documentation sites, developer dashboards, and portfolios where the canvas is the IDE.

section 01 /

Color tokens

Five-stop background ramp from deep midnight to selection blue. Foreground neutrals stay close to the bluish-white of compacted snow. Accents are pulled from the syntax palette and used sparingly — strings, types, errors, warnings.

/* surface — backgrounds */

bg-0 copy

#161821

--bg-0

bg-1 copy

#1e2132

--bg-1

bg-2 copy

#242940

--bg-2

bg-3 copy

#2e3149

--bg-3

bg-4 copy

#444b71

--bg-4

/* foreground — text & chrome */

fg-0 copy

#c6c8d1

--fg-0

fg-3 copy

#818596

--fg-3

fg-1 copy

#6b7089

--fg-1

fg-2 copy

#444b71

--fg-2

/* accents — syntax, status, semantic */

ice-blue copy

#84a0c6

keywords / primary

ice-cyan copy

#89b8c2

types / support

ice-green copy

#b4be82

strings / success

ice-yellow copy

#e2a478

attrs / warning

ice-orange copy

#e27878

numbers / error

ice-purple copy

#a093c7

control flow

section 02 /

Type system

Two families. Switzer for UI and prose — neutral grotesk, low-contrast strokes that hold up against the deep background. GeistMono for code, labels, and metadata — precise but warm. Negative tracking on display sizes; positive tracking on small caps.

display

48 / 0.95 / -0.03

Frozen surface.

32 / 1.1 / -0.02

Sub-zero precision.

24 / 1.2 / -0.015

Color tokens & ramps

18 / 1.3 / 0

Section title

body

14 / 1.5 / -0.005

Most of an iceberg lives below the waterline. Good design works the same way — quiet, cool, and dense underneath.

mono

13 / 1.6 / 0

const depth = waterline - elevation;

caption

11 / 1.4 / +0.12

// READOUT · LAT 71.2°N

section 03 /

Spacing & geometry

A 4-px base scale, doubling at the top end. Radii stay small — sharp by default, with one larger token reserved for hero surfaces. Soft borders (--bg-2) on every panel; firmer borders (--bg-3) on interactive containers.

/* spacing scale */

--space-14px

--space-28px

--space-312px

--space-416px

--space-524px

--space-632px

--space-748px

--space-864px

/* radius */

none0

--radius-13

--radius-26

--radius-310

round∞

Press ⌘⇧P to open the command palette

section 04 /

Components

Atoms first. Each specimen below maps to a single file in /components. The header shows the component name and an inferred type signature — exactly what you'd see hovering the symbol in the editor.

<Button variant=… />4 variants

<Input type=text />focus ring

// search docs

<Badge tone=… />5 tones

info passing review failed v1.0.0

<Toast kind=ok />4 kinds

Build succeeded

Pushed 3 commits to main in 2.4s.

Tip

Hold ⌥ while dragging to duplicate.

<CodeBlock lang=tsx/>iceberg.tmTheme

// the canonical syntax test — every token color in one block import { readFile, readImage } from "./io"; type Berg = { name: string; depth: number; // meters below waterline visible?: boolean; }; export async function survey(b: Berg) { if (b.depth > 200) { return { status: "submerged", risk: 0.92 }; } return { status: "surface", risk: 0.04 }; }

section 05 /

Surfaces

Compositions: project cards as the system would render a portfolio grid. The thumb is a programmatic placeholder — a soft underwater glow, no faux imagery.

Greenside Atlas

A tee-time companion rebuilt around personalization as the structural assumption.

// Product Design · 2026

Submerged · CLI

A terminal companion that visualizes the parts of your codebase you never look at.

// Tooling · 2026

Waterline

A reading client that hides everything above the fold until you ask for it.

// Concept · 2025