Astrolabe · Visual Specimen
Structure is rigorous · color is free — swap freely.

Typography — IBM Plex

display 42/300Astrolabe
h1 32/600A spec is a snippet
h2 24/600A spec is a snippet
h3 20/600A spec is a snippet
h4 16/600A spec is a snippet
body 14/400The quick brown fox edits a Vega-Lite spec and watches it render.
caption 12Last modified · Today
mono 13{ "mark": "bar", "encoding": { "x": { "field": "category" } } }

Color — neutral ramp (borrowed) · accent & status (free / meaning)

Neutrals come from the Carbon gray ramp for legibility; the accent and themes are open. Status colors carry meaning only.

Surface roles (current theme)

Accent & status

Spacing — 8px base unit

Elevation — lightness, not shadow

--bg
--layer-01
--layer-02 (overlays, popovers)

Buttons — square, 600 weight, 32px standard / 40px lg

Tab through to see the focus ring (2px accent outline).

Emphasis hierarchy — a header cluster

Utilities go ghost (icon + text, borderless) so they recede; a divider sets off Donate on a soft-accent wash — one low-key solicitation, no border. (Carbon: one high-emphasis action per region; utilities at low emphasis.)

Form controls

Live preview

Iconography — Carbon glyphs, fill: currentColor

The controlled vocabulary (arch 09 §5). One glyph per meaning; 16px default, paired to 14px body. Filled (not stroked) — they inherit text colour and theme.
close moon sun dataset add delete import export info revert search settings pane-library pane-editor pane-preview
The full Core + pane-toggle set (arch 09 §5.2); the four status glyphs appear, coloured, in the Toasts section below. In context: icon + text is the default; icon-only is the universal/affordance/destructive exception. ✕ means close only — delete is the trash glyph.

Tabs · status · tags

Catalog primitive only. The Draft/Published view uses the segmented control (a radio group), not tabs — see arch/10.
Draft changes Published 2 datasets imported
Saved Error 82% full Info

Snippet library & metadata panel

Quarterly revenue
Today · 2 KB
Population by region
Yesterday
Scatter · height vs weight
3d ago

Quarterly revenue

Created2026-06-01
ModifiedToday 14:30
Status Draft changes

Toasts

Filled status glyph + colour + text — a non-colour severity channel (arch 09 §5.2 / 10 §3). The triangle shape-codes warning apart from the round error/success/info.
Snippet duplicated.
Published “Quarterly revenue”.
Snippet storage is 82% full.
Could not save — storage is full.

Overlay dialog — confirm / alert

The in-app replacement for window.confirm. Backdrop dims but does NOT dismiss (Carbon transactional rule); danger variant for destructive intent, with Cancel taking focus. Behavior lives in docs/architecture/03 → Confirmation & alert dialogs.

Delete snippet

Delete “Quarterly revenue”? This cannot be undone.

Discard changes?

You have unsaved edits — leaving will discard them.

Code / editor surface — IBM Plex Mono

{ "$schema": "https://vega.github.io/schema/vega-lite/v6.json", "data": { "values": [{ "category": "A", "value": 28 }] }, "mark": "bar", "encoding": { "x": { "field": "category", "type": "nominal" }, "y": { "field": "value", "type": "quantitative" } } }

Motion — productive only (150ms, restrained)

Neutralized automatically under prefers-reduced-motion.