Draw the number. Don't describe it. Calibrated sets a count, a position, progress, a size or a duration as a small technical figure, built from eight marks.
In use on lirah.dev.
/plugin marketplace add emdmed/calibrated
/plugin install calibrated@calibratedThe skills show up as calibrated:calibrated-tokens, calibrated:calibrated-figures and so on.
git clone https://github.com/emdmed/calibrated
cp -r calibrated/skills/* ~/.claude/skills/Copy into ~/.claude/skills/ for every project, or into .claude/skills/ for one.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&family=Chivo+Mono:wght@300..700&display=swap">
<link rel="stylesheet" href="calibrated.css">
<link rel="stylesheet" href="calibrated-components.css">
<script src="calibrated-figures.js" defer></script>
<script src="calibrated-components.js" defer></script>Every file works from file:// and inline in a single HTML page.
Every figure in the kit is built from these. They are plain functions on Calibrated.K that return SVG strings.
Custom elements. Each draws an SVG with a title and an aria-label that states its facts in words. All accept density="full|compact", or follow the nearest [data-density].
A value against its limit, with a red-hatched alert zone and a boxed reading. It sweeps to its value when it comes into view and glides when the value changes: the needle leads, the fill follows, and the reading blinks when it settles.
| Attribute | Default | Description |
|---|---|---|
value, max | 0, 100 | The reading and the full scale. |
warn | 0.8 × max | Where the alert zone starts. Past it the fill and the reading turn red. |
label | value | Name in the box and in the spoken sentence. |
format | k | k (46k, 1M), raw, pct (value and max as fractions: 0.46 of 1) or dur. |
unit | none | Appended after k and raw values. |
width | 420 / 144 | Full and compact widths. |
still | off | No motion: draw the value at once. Reduced motion does the same. |
Where you are in a set. Up to 24 items get one tick each; longer sets get a scale with a marker.
| Attribute | Default | Description |
|---|---|---|
index | 1 | Current item, 1-based. |
count | 1 | Number of items. |
label | none | Shown above in full form. |
width | 160 | Scale width for sets over 24. |
Steps as nodes: done, live, to do and failed, with the finished run dimensioned.
| Attribute | Default | Description |
|---|---|---|
done, total | 0, 1 | Finished steps and step count. |
live, fault | none | 1-based index of the running or failed step. |
states | none | Or list every step: done,done,live,todo,fault. |
live-label | none | Highlighted caption under the live node. |
fault-label | needs you | Caption under the failed node. |
done-label | none | A dimension line over the finished run. |
step | 18 | Spacing between nodes. |
Added lines run right in green, removed lines left in red, from a shared centre. Linear up to the knee, logarithmic past it. Stacked diffs share the centre line.
| Attribute | Default | Description |
|---|---|---|
added, removed | 0 | Line counts. |
label | none | Name at the left. |
knee, max | 200, 100000 | Where the scale turns logarithmic, and its end. |
name-width | 64 | Room for the label. |
Spans on one shared ruler. A live span with a start time ticks every second; this one starts two minutes before the page loads.
| Attribute | Default | Description |
|---|---|---|
max | auto | On <cal-durations>. The longest span, rounded up to a major tick. |
unit | m | s, m or h. |
width | 480 | Ruler width. |
name | none | On <cal-span>. |
value | none | Seconds. Or give start (and end) in epoch ms; a live span with only start ticks. |
live | off | Lights the span with the lamp and ends it in a live star. |
A scale on its own, with an optional marked value.
| Attribute | Default | Description |
|---|---|---|
min, max, step | 0, 100, range ÷ 10 | Range and tick spacing. |
every | 5 | Number every nth tick. |
unit, width | none, 320 | Label suffix and drawn width. |
up | off | Labels above the line. |
value | none | A marker with its value boxed on a leader. |
Recipes take data and return a whole figure as an SVG string. Mount it into an empty <svg> with Calibrated.mount(), or use Calibrated.play(svg, recipe, data) to replay it when it comes into view, as every figure here does (lanes, budget, merge, fan-out, loop, measured and timeline move; matrix and section just draw). Needs calibrated-figures.js and calibrated-recipes.js. Example data on this page is illustrative.
Nested regions: hatched is closed, clear is open. The one figure without a scale: it shows what contains what, not how much.
Pure CSS classes, plus a little JS for counts and sign-off. They carry the kit's drawing-sheet look into your own pages.
A proposed figure beside the text it replaces, signed off as keep, rework (with a note on what isn’t good enough yet) or drop. calibrated-components.js wires the buttons; the tally counts the sign-offs and copies them, one line per card.
Three regions ran the same test. Drawn on one time ruler, the slow region and the one still running read before any number does.
The budget, its alerts and today's pace on one scale.
Which subnets are closed, and what lies outside the proxy.
A number in a box with its noun, written into the markup so it reads without JS. Calibrated.counts() redraws each from data-n when the number changes; data-pad="2" zero-pads one that changes live.
Ruled tabs with boxed counts. calibrated-components.js selects on click, ← → and Home / End, and shows the panel each tab's aria-controls names.
Tiers, so the main action leads: primary is filled with ink (one per view), the default is a hairline box, inline is a bracketed word for small actions in text, quiet is an underline.
Status dots, revision triangles and the lamp, used inside running text.
The e2e suite is the only run still going.
Write-in lines with sentence-case labels, hints and errors.
A list with a chosen row, marked with aria-current: its label is boxed in ink. The row under the pointer or holding focus takes a lighter box.
A parts list. Instruments in a cell draw in compact form, and on phones the table scrolls sideways.
| no | figure | where | diff | effort | status |
|---|---|---|---|---|---|
| 01 | Load test lanes | release checklist | in review | ||
| 02 | Error budget ruler | SLO panel | shipped | ||
| 03 | Network section | security review | to do |
The ruled grid of terms and values from the corner of a drawing. Set the column count with --tb-cols.
Red triangles paired with what changed.
| rev | description | date |
|---|---|---|
| First review: three deploys. | 2026-10-29 | |
| Added the rollback for ap-south. | 2026-10-31 |
A two-column note for deciding what gets a figure.
Lists that are really quantities: queues as counts, run histories as lanes, file badges as diff pairs.
Terminals, prose, menus, pickers and command palettes. Drawing over them adds lines and measures nothing.
Native elements on write-in lines. A chosen option is boxed, focus is the lamp, and the few that need a hand are wired by calibrated-components.js.
A recessed editor pane with a block caret and a terminal-style status line: the mode, the caret's line and column, and the count, which turns red past data-max. The status line is hidden from screen readers, so a hint states the limit.
A native select ending in a ▼; in browsers with styled pickers the open list is a hairline panel. The option list is the same list, always open. Hover moves the box.
Radios are balloons, not squares. A switch is a small pill whose knob slides right and turns ink when it is on; its OFF/ON words are drawn, not read (aria-hidden), since the switch already says its state. A detent is a short ruler for a few ordered values, with the lamp ▼ over the chosen tick.
Ticks on the slider's own line, the run to the value drawn heavier, a handle with grip lines and the reading boxed on a leader. The slider speaks its value with the unit, so the drawn box and scale are hidden from screen readers.
The value and its unit on one line: ↑ ↓ step it, Shift ×10, and the hint shows only while focused. Search with data-key="/" takes focus when / is pressed outside a field, and its × clears it; the count and the filtering are the page's own.
A fieldset whose legend sits on a rule. Tags are boxed words on a write-in line: Enter adds, Backspace removes, and each change is announced. Dates use the browser's picker.
Drop files or click to browse. They are listed, and announced, into the rows named by data-list; a file over data-max bytes or outside the input's accept is flagged. Nothing is uploaded.
Native popovers and dialogs, the leader-and-box mark as a tooltip, and spinners drawn from the loop and measured figures.
A panel over the shaded desk with a ruled head. data-dialog opens it; form method="dialog" closes it.
A leader up to a boxed value, on hover, focus or tap; the pointer can move onto the box, and Esc hides it. A callout is a drawing's NOTES block; the warning keys its legend with the alert hatch.
Checkout: 212 ms at p99, 0.02% errors.
Rules in drafting line types, so the split says what it is: solid for the next topic, dashed for an aside, the centre line for two halves, the break line where lines were skipped. A labelled rule names the break and is read as text, so it takes no separator role (that role hides its words); the lamp rule marks what's new.
Deploys run in three regions, one after the other.
Rollback is one command and takes about a minute.
eu-west is behind a feature flag this week.
Ship from the release branch.
12:04:01 build started
12:09:44 build finished
Two deploys finished overnight.
A zone is a named region with its name set into the edge, and no fill, so it sits on any surface. Dashed means not decided yet; red holds destructive settings. A bracket binds a few lines into one idea without a box. Name each zone by its head (aria-labelledby); a hidden comma keeps the head and its note apart when read.
Three status lines, one per region.
One ruler with three lanes.
Deleting the project removes every run and its logs.
Tests pass on main.
The changelog names the release.
Someone on call knows it's going out.
A lettered balloon on a dotted leader. Open, it drops a dashed leader into an inset labelled DETAIL A.
Calibrated.toast() reports in the corner. A plain toast goes after 5 s; one with an action, like this undo, stays until it is used or hidden, and its timer pauses under the pointer or focus. An empty state is a dashed frame with one way forward.
no runs yet
Runs show up here as they start.
Braille, stepped in whole frames like a terminal: the ring for a loading area, the row for text and buttons, and the readout line with its clock for work that takes a while. The readout resolves in place to a green or red result. A busy button takes aria-disabled, so it keeps focus while it works.
Two default themes, film and night, set with data-theme, and a look chosen per page on top. The theme button at the top switches both the docs and every preview.
Film and night are the defaults, not the only look. Before building a page, Claude chooses five settings from the subject and changes at least two of them, unless you ask for the default look. The marks, one scale per figure, the one lamp, the red and green meanings and the monospace labels never change. The guide is skills/calibrated-tokens/references/looks.md; the examples show six pages, each in its own look.
| Setting | Default | Options |
|---|---|---|
| Palette | film / night | Seeds from the subject: a brand's ink and accent, or a material or place (blueprint for a network, steel for hardware, clean white for a lab). The lamp is never red or green. |
| Headline face | IBM Plex Mono caps | One grotesk or condensed sans for headings only: Barlow Condensed, IBM Plex Sans Condensed, Space Grotesk, Archivo, Chivo. Set --font-display, --display-case and --display-weight. Never serif, script or italic. |
| Frame | panels on a desk | <html data-frame="paper"> sets panels flush on the paper, ruled on top. .cal-sheet is the bordered drawing sheet with zones and a title block. |
| Layout | cards with an info column | A full-width .cal-figure, figures side by side in .cal-grid (--cal-grid-min sets the column width), or one large drawing with notes beside it. |
| Space | dense | <html data-space="open"> doubles the gaps and the space between sections. |
/* look: blueprint · Barlow Condensed · paper · full-width figures · open */
:root, :root[data-theme] { --bg: #eef3f7; --fg: #12324d; --live: #0a6f83;
--font-display: "Barlow Condensed", sans-serif; --display-case: none; --display-weight: 600; --track-title: 0; }
:root[data-theme="dark"], :root[data-theme="night"] { --bg: #0f2a44; --fg: #dbeaf5; --live: #f2c14e; --desk-depth: 70%; color-scheme: dark; }Three colours; every surface, line, wash and supporting ink (title, muted, ok, fault) derives from them. Ink on panel needs 11:1 and the lamp on panel 4.5:1; the boxed readings turn red below that. Changing a seed here re-colours every preview on the page until you switch theme, reset or reload.
Full form prints scales, boxes and labels. Compact keeps the marks and at most a short reading (the meter keeps 46k / 1M), for tables and tight rows: put the numbers in a neighbouring cell. Every instrument still speaks all its numbers.
Defaults, not a uniform. The grammar stays fixed (the eight marks, one scale, one lamp, red and green meanings, monospace labels), and the look is now chosen per page from five settings: a palette taken from the subject, a headline face, a frame, a layout and a spacing. Headings may use one grotesk or condensed sans (--font-display, --display-case, --display-weight). New: data-frame="paper" drops the desk, data-space="open" opens up the gaps, and .cal-grid sets figures side by side. The lamp tint may mark the one live region of a figure. See Looks and looks.md. On this site, the six examples each take their own look (with a switch to compare against the default), and the catalog's Finishes became Looks.
Terminal spinners. They step in whole frames, like a terminal redraw, with the lamp dot as the head. <cal-spin> is now a 3×3 braille dot ring, and .cal-wait is a braille row, four dots by two, with the same four-<i> markup as before. New: .cal-readout, a waiting line with a dotted leader and a <cal-elapsed> clock that resolves in place to a green or red result. .cal-scan still renders but is no longer shown.
A review of every component on this page. A theme is now three colours: title, muted, green, red and the desk derive from --bg, --fg and --live, so a re-seeded region stays readable, and every mark holds up in forced-colours mode. Small text reads at 4.5:1 and state marks at 3:1, and the film lamp is darker. Sign-off and tabs are wired by the kit (Calibrated.signoff(), Calibrated.tabs()). The lamp lights only what is live: a meter needle is ink unless set live, a wizard step is an ink star. Values past the end of a scale break off in red and state the real number, the ruler writes its value, and recipes report bad data in r.warnings. Toasts with an action stay until dismissed, tooltips close on Esc, the menu finishes its keyboard pattern, the pager can draw links, the empty state drops its hatch, and drawings shrink before they scroll on phones.
A redrawn switch: a small hairline pill whose knob slides right and turns ink when on. OFF/ON words are now optional, .caps sets the label in legend caps for toolbars, the whole label is a 24px hit area, and it holds up in forced-colours mode and with reduced motion.
Separators and containers. Rules in drafting line types, each with one meaning: solid for the next topic, dashed for an aside, the centre line for two halves, a break line where something was left out, a labelled rule, and a lamp rule for what's new (.cal-rule). Facts on one line split by hairline ticks (.cal-meta), a vertical rule for toolbars (.cal-vr), a zone with its name set into its edge (.cal-zone) and a bracket that groups a few lines (.cal-bracket). A dropped card is now taped off with red stripes and a solid SUPERSEDED stamp.
Usable first: a UX rules reference every skill reads before composing, and an app mode (data-mode="app") for screens and forms. The primary button is boxed, field labels are sentence case at 12px, an approval stamp is green, textareas show only their count unless they opt into the editor line, counts aren't zero-padded unless they change live, and loops show their direction. Clearer hierarchy and separation: buttons in tiers (filled primary, boxed default, bracketed inline, underlined quiet), medium-weight titles, 16px section heads, block heads that rule the groups in a panel apart (.cal-block), and a darker desk.
Twenty-six controls: textarea, select, menu, radio, switch, detent, dialog, tooltip, range, number, search, field group, detail callout, callout, toast, empty state, breadcrumb, pager, badge, file drop, tags, steps, code block, key cap, spinners, date. Chosen rows are boxed instead of barred; sign-off gains rework.
Merge steps can be left out and the rest are numbered in run order; long branch names are no longer cut by a leader.
The timeline replays and its ruler fits the run, from seconds to hours. Loop stations can fault; merge and timeline take a noun.
Every instrument moves like the meter. Figures replay with Calibrated.play; the loop steps and the measured figure glides to new values.
The meter moves: it sweeps to its value, glides on change and blinks when it settles.
Panel look: mono type, quiet panels, the lamp replaces the highlighter.
Ruled mark and condensed wordmark. This demo became a docs site.
Own identity: drawing sheet, highlighter, projection mark.
Night theme; seeds recompute in themed sections.
First release: tokens, figure kit, components.