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
Tabs · status · tags
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
Snippet duplicated.
Published “Quarterly revenue”.
Snippet storage is 82% full.
Could not save — storage is full.
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.