Astrolabe · Visual Specimen
Theme
Accent
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 Support on a soft-accent wash — one low-key solicitation, no border. (Carbon: one high-emphasis action per region; utilities at low emphasis.)

## Form controls

Snippet name
Comment
Sort by
Spec (JSON) { "mark": "bar", "encoding": { "x": { "field": "category" } } }
Show only drafts Inline data Dataset reference
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`.