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
Tab through to see the focus ring (2px accent outline).
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
In context: icon + text is the default; icon-only is the universal/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
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.