DESIGN.md
# Meter — Design System
## Concept
**An image API presented as a live operations console.** A near-black canvas, one
electric voltage of acid lime, and a page built the way a status dashboard is built:
oversized figures in tabular monospace, sparkline traces, an edge-node status strip,
and capacity gauges — every claim the brief makes rendered as a **readout you watch**
rather than a sentence you read. The load-bearing device is the **live telemetry
readout**: a resolving figure at instrument scale, its unit stepped down beside it, a
sparkline or a status lamp for texture, and an uppercase micro-label underneath naming
what the number measures.
The transplant is honest for one reason, and it is checkable rather than rhetorical.
An image API's real product **is not the picture — it is the promise about the
picture.** 21 ms cached. 98.6% hit ratio. 62% smaller. 99.95% uptime. 41 edge
locations. Cold p50 89 ms, p99 340 ms. Read the brief and count: nearly every load-
bearing claim in it is a *metric*. A developer deciding whether to trust Refract is not
evaluating a photograph — they are evaluating a set of operational figures, the same
figures an SRE watches on a wall of dashboards to decide whether a service is up. **A
metric wants a readout, not a paragraph.** "Over ninety-nine point nine percent
uptime" is a marketing sentence that buries the one thing that matters; `99.95%` at
instrument scale over an uppercase `UPTIME SLA` label is the thing itself. So the page
is not decorated to *look* like a console — it is a console because the content is
telemetry, and telemetry has exactly one correct display.
The name is a double hook, and both halves are literal. A **meter** is the live ops
readout — the gauge on the wall that resolves and ticks. A **meter** is also the
metered-transform billing unit: the brief bills "one unique source + parameter
combination per billing month," a Free tier that "pauses transforms at the cap," and
overage at "$2 per additional 1,000 transforms." **The thing you watch is the thing you
are billed for.** The capacity gauge on the pricing page is therefore not a metaphor
borrowed from dashboards — it is the actual shape of the pricing model, a quota filling
a meter toward a cap. One word names the readout and the charge, and the design spends
the whole page proving they are the same object.
There are two other dark designs under this brief, and meter must not collide with
either — the confusion is the whole risk, so the line is drawn hard. **`cutaway`** is
dark, but it is **industrial-metal**: a graphite floor (`#141618`, not true black), a
static **exploded diagram** hero that blows one photograph into annotated planes tilted
apart in 3D, two rationed voltages of magenta-and-cyan, and 88px figures in a heavy
grotesque (Archivo 800) that **never move** — an instrument that displays a fixed
reading. **`reel`** is dark, but it is **hueless and cinematic-photographic**: pure
black (`#000000`), full-bleed film stills as the interface, no hue whatsoever, the type
retreating until only a slate label layer survives. Meter is neither. It is a **live
telemetry dashboard**: figures that **resolve on connect and tick**, **one** electric
voltage (acid lime, health, "all systems go"), **sparklines and status strips and
capacity gauges** — not a diagram and not a photo-canvas. Where cutaway takes the image
*apart* to show the machine and reel keeps the image *whole* to be the machine's answer,
meter **does not lead with the image at all** — it leads with the *numbers about* the
image, and the photograph appears only inside the one before/after job where a number
has to be measured against something. Three habits keep the three apart at a glance:
meter's canvas is a true near-black (`#0a0b0e`), not cutaway's graphite; its figures are
**tabular monospace that resolves**, not cutaway's static heavy grotesque and not reel's
light 400 display; and its single hue is **lime**, distinct from cutaway's magenta/cyan
and from reel's absence of hue entirely.
The design's integrity rests on a rule it shares with its siblings and then sharpens:
**every figure on this site traces to `content.md`, and a live dashboard makes that rule
harder, not easier.** A console that resolves numbers is one keystroke away from
*inventing* them — a byte counter ticking down to a fabricated total, forty-one made-up
city latencies, a usage bar at a staged 73%. Meter refuses all three. The resolve is a
**one-time connection handshake** that settles on the brief's exact figure and then
holds still forever; the one genuinely-live probe is **format negotiation**, run against
the real browser; the sparkline is **bounded texture pinned to two real anchors** and
carries no readable per-point value; the edge strip visualizes **the one real number it
is built from — 41 — and invents no city and no per-node latency**; and the capacity
gauge's scale is the **real tier cap**, its fill the **included quota**, never a staged
usage percentage. The alarm the console can raise is red, and it appears only where the
brief hands a genuine degraded state — the Free tier pausing at its cap, the over-quota
overage zone. A number with no source is the only real defect a telemetry page can have,
and this one is built so it cannot manufacture a reading.
## Palette
Near-black, one voltage, a three-step neutral metric ramp, white reserved for headline
figures, and one alarm red that is a **state, not a decoration**. There is no light
surface anywhere in this system — no white page, no paper band, no inverted section. The
page does not turn on the lights, because a console floor is dark so the lit readouts
carry.
| Token | Hex | Role |
| ----------------- | --------- | ------------------------------------------------------------------------------------------ |
| `--canvas` | `#0a0b0e` | Near-black. The page floor, the nav, the footer, and every full-bleed band. |
| `--panel` | `#101216` | The one tonal step up — console panels, stat tiles, cards, the code block, gauge fields. |
| `--panel-raised` | `#191c22` | The second step — input wells, unselected selector cells, the table head, gauge tracks. |
| `--grid` | `#15181e` | The faint background grid behind the console bands. 1.1:1 — **texture, never a line that means anything.** |
| `--hairline` | `#1e222a` | The 1px rule: table rows, panel borders, tile dividers, band separators. |
| `--hairline-strong` | `#252a33` | Input borders at rest, emphasised dividers, the unset-channel marker. |
| `--ink` | `#f2f4f6` | **Headline figures only** — the resolving readouts and the four stat tiles. Near-white on near-black. |
| `--metric-bright` | `#c9ced3` | The brightest reading text — running values, body-strong, answers, the URL string. |
| `--metric-mid` | `#9aa0a6` | Running body copy, table cells, captions, nav links at rest. |
| `--metric-dim` | `#6b7075` | The lowest step — units, disabled labels, the legal row. **Fails AA body — short labels only.** |
| `--volt` | `#c6f24e` | The voltage. Acid lime. Health / "all systems go": lit nodes, the primary button fill under a dark label, the sparkline stroke, the focus ring, the resolved-healthy figure. |
| `--volt-deep` | `#a9d43a` | The press state of a volt fill, under a dark label. **Never text, never a mark.** |
| `--alert` | `#ff5c5c` | The alarm. The **one** other hue, and a *state*: degraded / over-quota only. Never decoration. |
Rules:
- **One voltage, and it is lime.** `--volt` (`#c6f24e`) is the entire chromatic health
system: it means *up*, *lit*, *negotiated*, *within quota*, *go*. It is the only hue
the interface reaches for to make something feel alive, and it appears on a lit edge
node, a healthy sparkline, the primary CTA, the focus ring, and the single resolved
figure a panel wants to call out. There is no second accent, no blue link, no cyan
flow, no purple, no amber notice. The reference genre — a wall of dashboards — is
usually a rainbow of series colors; meter refuses the rainbow and keeps **one channel
of light** so that when the console goes red, the red *means* something.
- **The alarm red is a state, not a hue, and the distinction is load-bearing.** A status
page that cannot go red is lying about being a status page. So the system carries
exactly one alarm color, `--alert` (`#ff5c5c`), and it is spent in exactly two places,
both of them a real degraded condition the brief supplies: **the Free tier's meter at
the cap** (where it "pauses transforms" — the meter fills to the cap line and the
overage zone past it is dark and unavailable, marked in `--alert`), and **the over-
quota overage zone on Pro and Scale** (past the cap, billed at $2/1,000 — the metered
extension reads in `--alert` because it is money past the plan). It is **never** a
decorative element, never a second series color, never applied to text that is merely
emphatic. If a red mark on this page does not correspond to a real over-limit state
from the brief, it is a defect. Lime is health; red is the one alarm; there is no third
hue.
- **Contrast (measured, WCAG 2.1, computed from the sRGB relative-luminance formula).**
On `--canvas` (`#0a0b0e`): `--ink` **17.85:1**, `--metric-bright` **12.42:1**,
`--metric-mid` **7.45:1**, `--metric-dim` **3.94:1**, `--volt` **15.19:1**, `--alert`
**6.50:1**. On `--panel` (`#101216`): `--ink` **17.00:1**, `--metric-bright`
**11.83:1**, `--metric-mid` **7.10:1**, `--metric-dim` **3.75:1**, `--volt`
**14.47:1**, `--alert` **6.19:1**. On `--panel-raised` (`#191c22`): `--ink`
**15.48:1**, `--metric-bright` **10.77:1**, `--metric-mid` **6.46:1**, `--volt`
**13.17:1**, `--alert` **5.64:1**. Everything a visitor must read clears AA body
(4.5:1) with margin.
- **`--metric-dim` (`#6b7075`) does NOT hold AA body and is label-only.** It measures
**3.94:1** on `--canvas`, **3.75:1** on `--panel`, **3.41:1** on `--panel-raised` —
above the 3:1 large-text and non-text bars, below the 4.5:1 body bar on every surface.
It sets **units** beside a readout (`ms`, `%`, `req/s`, `GB`), disabled labels, and the
footer legal row — nothing a visitor must actually read as a sentence, no paragraph, no
table cell, no parameter value, no price. A placeholder inside an input steps **up** to
`--metric-mid` (6.46:1 on the raised well), never down.
- **The voltage is bright, so the label on a lime fill is dark — always.** `--volt`
measures **15.19:1** on `--canvas`, which makes it the second-most-legible token in the
system after white; it is legible as text, as a mark, and as a large figure on every
surface. But that same brightness inverts the label rule: **white on `--volt` measures
1.17:1 and fails outright**, while **`--canvas` near-black on `--volt` measures
15.19:1**. So a lime fill *always* carries a near-black label, never a white one — the
primary button, a lit "go" chip, the resolved-healthy tag. This is the opposite of
cutaway, whose dark magenta barely clears AA under a *white* label; here the voltage is
a bright surface and its label is the floor color. A white label on a lime fill is a
defect.
- **`--volt-deep` (`#a9d43a`) is the press state only.** Under a near-black label it
measures 11.4:1; as text on `--canvas` it still reads, but it is **reserved for the
pressed fill and used nowhere else** — never a mark, never a resting text color, so the
voltage has exactly one resting value and one pressed value and a later hand cannot
drift a third lime into the system.
- **The hairlines and the grid carry no meaning.** `--hairline` measures **1.24:1** on
`--canvas`, `--hairline-strong` **1.37:1**, and `--grid` **1.11:1** — all far below the
3:1 non-text bar. **No control's identity and no control's state may rest on a hairline
or a grid cell alone.** A stat tile is a tile because of its `--panel` surface step off
the canvas, not its border; a lit node is lit because it is `--volt` against a dark
node, not because of a divider; the active nav tab is marked by a **2px `--volt`
underline** plus `aria-current`, never by a hairline; focus is a **2px `--volt` ring**,
never a hairline. The background grid is atmosphere — the faint graph paper a readout
is plotted on — and it never encodes a value, a scale, or a gridline a number is read
against.
- **White is rationed to headline figures.** `--ink` (`#f2f4f6`, 17.85:1) is the loudest
token, and it is spent only where the brief's own numbers are stated at instrument
scale: the resolving hero readouts, the four stat tiles, the latency figures, the tier
prices. Body copy is **never** pure white — it is `--metric-bright` (12.42:1) at most,
usually `--metric-mid` (7.45:1). This keeps the figures the brightest thing on the
page: on a console, the readout is what your eye lands on, and reserving white for the
numbers is how that hierarchy is built in color rather than in size alone.
- **No paper, no light band, no inversion.** The nav is `--canvas`, the footer is
`--canvas`, every band between them is `--canvas` or a `--panel` step off it. A white
section is `aperture`; a paper section is `folio` or `carton`; a graphite floor is
`cutaway`. This floor is a true near-black and it never lifts.
## Typography
Two voices, cleanly split, **both self-hosted as woff2 under `assets/fonts/`** via
`@font-face` — no font CDN, no Google Fonts `<link>`. Both are SIL OFL and both are
available on Google Fonts; they are named here and substituted nowhere, because this is
a free-form design with no proprietary face behind it.
**Interface — Space Grotesk.** A tight, slightly mechanical grotesque with a
proportional, almost-monospaced skeleton and real negative-tracking character at large
sizes — it reads as *instrument labeling* rather than marketing sans, which is exactly
the register a console wants for its headings and its uppercase captions. It is chosen
over a neutral humanist grotesque precisely because its letterforms carry a faint
technical stiffness that pairs with the monospace figures without either voice looking
borrowed. It sets display, section heads, panel titles, body copy, navigation, buttons,
and every uppercase micro-label. It sets **no figure** — every number in this system
belongs to the mono. Weights run **400 / 500 / 600 / 700**, with the display voice at
**500–700** and aggressive negative tracking; there is no light weight, because a
readout labeled in a thin face reads as a slide, not an instrument.
**Figures — JetBrains Mono.** A tabular monospace, and the choice is not stylistic — it
is structural. **Every figure in a console must column-align**: the stat tiles read down
as a bank, the parameter values in the config panel line up against a right rule, the
tier prices sit in one column across three cards, and a value that gains a digit must
move a digit and never shift the column. A monospace guarantees that for free, per glyph,
which is why the readouts are set in it and not in a proportional face with `tnum` bolted
on. JetBrains Mono is confined, absolutely, to **numbers and literal API tokens**: the
resolving readouts, the four stats, the latency figures, the prices, the quota ledgers,
the request URL, the SDK snippet, and the ten parameter names. It never sets a heading, a
paragraph, a caption, or a label.
| Role | Face | Size / Leading | Tracking | Features | Use |
| ------------ | ------------------- | -------------- | -------- | -------- | -------------------------------------------------------------- |
| Readout XXL | JetBrains Mono 600 | 72px / 0.95 | -1px | — | The four stat tiles, the hero's headline metric, the tier prices |
| Readout XL | JetBrains Mono 500 | 52px / 1.0 | -0.5px | — | The latency figures (p50 / p99), the payload delta |
| Readout L | JetBrains Mono 500 | 34px / 1.05 | 0 | — | Panel-level readouts, the resolving hero sub-metrics |
| Value | JetBrains Mono 500 | 16px / 1.4 | 0 | **zero** | The live value column in the config panel, the gauge readouts |
| URL string | JetBrains Mono 400 | 16px / 1.5 | 0 | **zero** | The live request URL on the prompt line |
| Code | JetBrains Mono 400 | 14px / 1.6 | 0 | **zero** | The SDK snippet, the ten parameter names, inline tokens |
| Display XXL | Space Grotesk 600 | 60px / 1.0 | -1.6px | — | Index hero headline |
| Display XL | Space Grotesk 600 | 40px / 1.05 | -1px | — | Page openers on docs and pricing |
| Display L | Space Grotesk 600 | 30px / 1.1 | -0.6px | — | Section heads |
| Display M | Space Grotesk 600 | 22px / 1.2 | -0.3px | — | Panel titles, tier names, FAQ questions, the wordmark |
| Body L | Space Grotesk 400 | 18px / 1.55 | 0 | — | Lead paragraphs |
| Body | Space Grotesk 400 | 16px / 1.55 | 0 | — | Default running copy |
| Body S | Space Grotesk 400 | 14px / 1.5 | 0 | — | Table cells, dense copy, footer links |
| Button | Space Grotesk 600 | 15px / 1.0 | 0.2px | — | Button labels |
| Nav | Space Grotesk 500 | 14px / 1.4 | 0.2px | — | Top-nav links |
| Micro-label | Space Grotesk 600 | 11px / 1.3 | 1.4px | **case** | Uppercase metric captions — `MEDIAN CACHED`, `HIT RATIO`, `UPTIME SLA`, node labels |
Principles:
- **Space Grotesk sets words, JetBrains Mono sets numbers, and the split is absolute.**
A figure is *always* mono — a percentage, a millisecond, a count, a price, a quota, a
parameter's current value. A word is *always* Space Grotesk — a heading, a paragraph, a
caption, a button, a micro-label. Prose *about* a metric ("median cached response") is
Space Grotesk; the metric itself (`21 ms`) is JetBrains Mono. This is the single rule
that makes the page read as a console: the eye learns that anything monospaced is a
reading it can trust and column-scan, and anything in the grotesque is the interface
talking about it.
- **The readout is the voice.** Any headline figure sets in a Readout role in JetBrains
Mono, with its **unit stepped down** to `--metric-dim` beside it: `62` at 72px, `%` at
a smaller mono step; `21` at 72px, `ms` beside it; `89` at 52px, `ms` beside it. The
number carries the scale and the color (`--ink` or `--volt`); the unit is a quiet
`--metric-dim` companion. **"Over sixty percent smaller" is a defect; `62%` at 72px is
the design.**
- **Meter's figure scale and behavior are deliberately not cutaway's.** Cutaway sets its
proof at **88px in a heavy grotesque (Archivo 800) that never moves**. Meter sets its
proof at **72px in a tabular monospace that resolves once on connect and then holds**.
Different face, different scale, different behavior — reaching for 88px in a heavy sans
is the fastest way to converge the two dark, number-forward designs, and it is
forbidden here. The monospace *is* the tell: a console reads its instruments in a fixed-
width face, and that is why the numbers align.
- **Uppercase micro-labels are the caption layer.** Every metric readout is captioned by
an 11px Space Grotesk 600 label in `--metric-mid`, uppercase, 1.4px positive tracking —
`MEDIAN CACHED RESPONSE`, `CACHE HIT RATIO`, `EDGE LOCATIONS`, `UPTIME SLA`. This
positive-tracked uppercase against the negatively-tracked display is the one place the
interface signposts, and it speaks in the clipped voice of a panel legend. It never sets
body copy.
- **`zero` is functional, and it is declared on every mono role.** The subject of this
page is a URL a developer reads off the screen and types into a terminal, and a `0` they
cannot distinguish from an `O` is a misread waiting to happen. `?w=1200&q=80` must be
unambiguous at 14px. **JetBrains Mono genuinely ships a slashed-`zero` feature** (the
same feature the sibling specs rely on), and it is on for the URL, the code, the value
column, and the gauge readouts.
- **`case` is declared on the micro-label role, and Space Grotesk ships it.** The
uppercase captions occasionally carry punctuation — a slash, a parenthesis in `UPTIME
SLA (SCALE)` — and `case` lifts it from lowercase height to cap height where an all-caps
legend needs it.
- **Exactly two features are declared — `zero` (JetBrains Mono) and `case` (Space
Grotesk) — and the deliberate absences are each a measurement, not an oversight.**
- **`tnum` is never declared.** Every figure in this system is already set in JetBrains
Mono, which is one width per glyph by construction, so `tnum` would move no glyph. It
is precisely the sibling designs' honesty note inverted: cutaway and prism declare
`tnum` on a *proportional* readout face because they need it there; meter sets its
readouts in a monospace and does not, because declaring it here would leave the trace
of a measurement that was never taken.
- **`onum` is never declared.** Both faces can ship old-style figures, and old-style
figures in a bench readout are a contradiction in terms — the numerals in this system
are lining and tabular, always, everywhere.
- **`liga` is never declared.** It is on by default in every browser; declaring it
states an instruction the browser has already carried out.
## Spacing & layout
A console is dense where it displays and generous where it frames. Two registers share
the page: the **instrument** — the panels, the config table, the ledgers, the gauges — is
tight and gridded, packed so a bank of readings can be scanned at once; the **frame** —
the hero band, the stat band, the before/after job — is spacious, letting a single
oversized figure own its room. Never let the instrument get precious, and never let the
frame get cluttered.
- **8px base unit**, with 2 / 4 / 12 sub-steps for dense readout work. Tokens: 2 · 4 · 8 ·
12 · 16 · 24 · 40 · 64 · 96.
- **Section rhythm: 96px** top and bottom between major bands; **64px** on the denser ones
(the stat band, the config table, the ledgers); **32px** of padding inside panels,
tiles, cards, and the code block. The hero band takes 96px and the console runs full-
bleed within it.
- Content centres in a **1280px container**. The docs reading column caps at **1040px**,
because a ten-row config table and a code block stop being readable when stretched. The
hero band, the stat band, the network-status band, and the footer run **full-bleed**.
- **Radius rule — small and hard, never a pill and never a circle.** Panels, tiles, cards,
gauges, and the code block: **6px**. Buttons, inputs, selector cells, and the prompt
line: **4px**. Full-bleed bands, tables, tags, and the footer: **0px**. The edge nodes
are the one round primitive in the system — small `--volt` dots — because a status LED
is a dot and nothing else; **no other element rounds past 6px.** A 9999px pill is
`aperture`'s and `prism`'s language and it is the fastest way to soften a console into a
marketing page.
- **Elevation is tonal, not paper: there is no drop shadow anywhere in this system.**
Depth comes from four things and nothing else — the tonal step (`--canvas` → `--panel` →
`--panel-raised`), the 1px hairline, the faint `--grid` texture behind the console
bands, and **one emissive glow**: a lit edge node, a healthy sparkline, and the focus
ring carry `filter: drop-shadow(0 0 6px rgba(198, 242, 78, 0.5))` — light being emitted
by a live readout, not a box being lifted. **No `box-shadow` is declared on any element**
— not the nav, not the panels, not the tiles, not the buttons. A dashboard's panels sit
*in* the wall, flush; they do not float above it.
Breakpoints:
| Width | Behavior |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Mobile <640px | Display steps to **34px**; the Readout XXL steps **72 → 44px** but stays tabular mono; the hero prompt line wraps and the resolving sub-metrics stack 1-up; the capability trio stacks 1-up; the 41-node strip wraps to a dense grid of dots; stat tiles stack 1-up; nav collapses |
| Tablet 640–1024px | Display **40px**; Readout XXL **56px**; the capability trio holds a 2-up with the Deliver panel spanning full width beneath; stat tiles 2-up; the config table keeps its value column |
| Desktop 1024–1440px | Display **60px**; Readout XXL **72px**; the capability trio runs 3-up with Deliver as the wide network-status panel; the stat band runs 4-up, hairline-divided; the config table runs full |
| Wide >1440px | Content caps at 1280px; the hero, stat, network-status, and footer bands keep running full-bleed; no panel grows past the container |
Band rhythm — `--canvas` dominates, `--panel` is the only surface step, the `--grid`
texture rides the console bands, and **no band is ever light**:
- **index** — hero (canvas + grid, 96px, full-bleed: a micro-label eyebrow, one 60px
headline, a one-line lead, and the **live-telemetry prompt line** with the request URL
and its resolving response readouts) → capability trio, three live panels —
**Transform / Optimize / Deliver** (canvas, 96px), Deliver spanning wide → network-
status band, the **41-node edge status strip** and the **latency readout** with its
sparkline (panel + grid, 64px) → live-transform job, the before/after pair with a byte
delta reading from the seven browser-honest params (canvas, 96px) → stat band, the four
**stat tiles** at 72px, hairline-divided 4-up (canvas, 64px) → CTA band (canvas, 96px,
one `--volt` button: **"Start building" → `./docs.html`**).
- **docs** — page opener (canvas, 40px line) → quickstart, a three-step **run log** with
the SDK snippet in step 03 (canvas, 96px) → parameter reference, the ten-row **config
panel** with a live value readout on every row (canvas, 64px) → caching & limits, a
**rate meter** (50 req/s) plus the 30-day cache window and instant purge, as a readout
strip (panel, 64px).
- **pricing** — page opener (canvas, 40px line) → three **capacity gauges**, Free / Pro /
Scale, each a fill meter approaching its cap with the price in the 72px Readout (canvas,
96px) → overage & billing semantics, the **metered rate** past the cap (panel, 64px) →
FAQ, four rows styled as a short **incident log** (canvas, 96px).
## Signature
Five devices, each tied to a product fact, and each a form of the one load-bearing
element: **the live telemetry readout.** The rule that governs all five is stated once
and applies everywhere: **a readout resolves once, settles on the brief's exact figure,
and holds — it never loops, never re-triggers, and never displays a number the brief did
not supply.**
### 1. The live-telemetry hero — the request as a console transaction
The reference genre opens on a wall of live readings. Meter opens on **one transaction**:
the request URL typed on a **prompt line**, and the response metrics **resolving beneath
it** the way a status readout populates when a connection lands.
The prompt line is a `--panel` slab at 4px radius with a small `--volt` "go" indicator at
its left, carrying the brief's exact request form in the URL role with `zero`:
`https://demo.refract.dev/hero.jpg?w=1200&fm=auto&q=80`, its parameter keys in `--volt`
and its values and syntax in `--metric-bright`. On load, three response readouts resolve
underneath it in sequence — a **connection handshake**, not a sales sweep:
| Readout | Resolves to | Source |
| ------------------- | ---------------------------------------------------- | -------------------------------------------------------------- |
| `FORMAT NEGOTIATED` | `avif` / `webp` / `jpeg` | A **real** browser decode probe of `fm=auto`'s `Accept` handshake |
| `PAYLOAD` | `−62%` | The brief's stated average payload reduction |
| `RESPONSE` | `21 ms` | The brief's median cached response |
**`FORMAT NEGOTIATED` is the one genuinely live reading**, and it is what earns the
visitor's trust in the other two. On load the page runs a real decode probe — decoding a
1px AVIF, then a 1px WebP, via an `Image` object — and prints the format *this* browser
would actually be negotiated into: `avif`, `webp`, or `jpeg`. If the probe cannot run, it
prints `auto` and never a guessed format. It is the honest counterpart to cutaway's encode
plane: the page states, live and correctly, the one thing the browser can actually
determine, and states everything else from the brief.
**`PAYLOAD −62%` is the brief's figure, and the percentage is the load-bearing reading.**
Where the before/after job (device below) shows an absolute byte delta, that delta is
derived transparently from the genuinely-known file size of the shipped source asset
times the brief's 62% average — a projection at the stated average, labeled as such,
never presented as a live re-encode measurement. On the hero, only the percentage
resolves, because the percentage is the number the brief actually supplies. **No fabricated
absolute byte count ever ticks down on the hero.**
The resolve runs **once**, settles on the exact figure, and holds. It is not scroll-
triggered, it does not replay, it does not loop. Under `prefers-reduced-motion: reduce`,
the readouts render **already resolved** — the settled state is the readable state, and
the handshake only ever showed how it got there.
### 2. The 41-node edge status strip — the network, lit
**The brief states 41 edge locations; this device draws exactly 41 and invents nothing
else.** A horizontal strip of **41 small round nodes**, each a `--volt` dot carrying the
one emissive glow the system permits, all lit — the console's "all systems go." The strip
is captioned in the micro-label role with the brief's real figures: `41 EDGE LOCATIONS ·
98.6% HIT RATIO · 21 ms p50`. This is the transplant of the reference's global-status map,
and its integrity clause is strict:
- **The strip visualizes the one real number it is built from — 41 — and no more.** There
are 41 nodes because the brief says 41 edge locations, which is a fact. There are **no
invented city names, no fabricated PoP labels, and no 41 distinct latencies** — a
console that named forty-one specific cities and gave each a made-up millisecond figure
would be manufacturing forty-one readings the brief never supplied.
- **Hover reveals broad geography and a brief-true reading, nothing more.** The nodes may
be arranged into **continent-level bands** (Americas / Europe / Asia-Pacific) — a
general truth of any global edge network, claiming no specific city — and on hover a node
lifts and shows a small tooltip: its band, a `HEALTHY` status, and the brief's real
cached `21 ms p50`. The latency shown is the brief's one published cached figure, the
same for every node, because the brief gives one global cached p50 and not per-region
numbers. No node claims a unique fabricated latency.
- **A node's lit state is the health signal, and it never goes red decoratively.** All 41
read healthy because the brief describes a healthy network; there is no staged outage,
no red node, no flapping animation. Red belongs to the capacity gauge's over-quota state
and nowhere else.
### 3. The latency readout — big figures over a bounded sparkline
The brief's cold-transform figures — **p50 89 ms** and **p99 340 ms** — set as the
console's marquee latency reading: two Readout XL figures (`89` and `340` at 52px in
`--ink`, `ms` stepped down in `--metric-dim`) over their micro-labels `COLD p50` and
`COLD p99`, with a **sparkline trace** running beneath them in `--volt`.
The sparkline is where a live dashboard is most tempted to lie, and this one does not:
- **The sparkline is bounded texture pinned to two real anchors, not logged data.** Its
baseline is the p50 (89 ms) and its ceiling is the p99 (340 ms) — the two figures the
brief supplies — and the trace oscillates *between* them as an illustrative band. It
carries **no axis, no timestamps, no readable per-point value, and no hover tooltip on
the line** — because there is no per-point data to read. It is the visual texture of a
latency band whose only two real numbers are its floor and its ceiling, and those two
numbers are labeled at instrument scale beside it. A sparkline that invited the visitor
to read a specific point off it would be presenting fabricated production telemetry;
this one presents its two real endpoints and a bounded wiggle, and the document says so.
- The trace may drift slowly, imperceptibly, as the one ambient gesture the system
permits (see *Motion*) — a held reading breathing between its bounds — and it is fully
disabled under reduced motion, where it renders as a static band between 89 and 340.
### 4. The stat tiles — the four proof figures at instrument scale
The brief's four headline stats, set as a bank of readouts: **62%** payload reduction,
**21 ms** median cached response, **98.6%** cache hit ratio, **99.95%** uptime SLA. Four
`--panel` tiles at 6px radius, hairline-divided, on a 4-up grid — each carrying one figure
in the 72px Readout XXL role with its unit stepped down, over an uppercase micro-label:
```
62% 21 ms 98.6% 99.95%
AVERAGE MEDIAN CACHE UPTIME SLA
PAYLOAD CACHED HIT RATIO (SCALE)
REDUCTION RESPONSE
```
The **headline metric — `62%` — is the one figure set in `--volt`**; the numeral carries
the voltage and the `%` steps down to `--metric-dim`, so the reduction reads as the
console's proudest healthy reading. The other three are `--ink` (17.85:1). **No icons, no
charts, no card shadow.** Each tile resolves once on connect and holds — the tiles are the
place the resolve is most visible, four readings settling onto their values as the console
comes up — and under reduced motion they render already settled. The same tile form
carries the caching figures on docs and the prices on pricing.
### 5. The capacity gauge — the quota drawn as a filling meter
The pricing model *is* a meter, and this device draws it as one. Each tier is a **fill
meter approaching a cap**: a horizontal `--panel-raised` track whose full length is the
tier's real monthly transform cap, a `--volt` fill representing the tier's **included
quota** rising toward the cap line, the cap labeled at the end in the Value role, and the
price in the 72px Readout above it.
- **The scale is the real cap; the fill is the included quota; nothing is a staged usage
percentage.** The track's end is **1,000 / 50,000 / 1,000,000** transforms per month —
the brief's real caps — and the lime fill *is* the plan's included capacity, filling the
track to the cap line. There is no fabricated "you have used 73%"; the meter shows the
quota the tier grants, and the cap line is where overage begins.
- **Past the cap is where the alarm lives, and it maps the brief's real billing
semantics.** For **Free**, past the cap the track goes dark and unavailable, marked in
`--alert` — the brief's "pauses transforms at the cap; originals keep serving." For
**Pro** and **Scale**, past the cap a **metered extension** continues in `--alert`,
labeled with the overage rate `$2 / 1,000 transforms · $0.08/GB` — the brief's "bill
overage." Red appears in exactly these places and nowhere else, because these are the
only degraded / over-limit states the brief supplies.
- The gauge readouts — the cap, the price, the overage rate — are all mono, all traced to
`content.md`, and the fill animates in once on load (a meter filling to its included
level) and holds. Under reduced motion it renders already filled.
## Components
- **Nav bar.** `--canvas`, **64px** tall, 1px `--hairline` beneath, 24px horizontal
padding, with a small `--volt` "go" dot beside the wordmark reading as a system status
light. The wordmark **Refract** sits flush left in the Display M role. Three page tabs —
**Home · Docs · Pricing** — in the Nav role at `--metric-mid`; the active tab takes
`aria-current="page"`, a **2px `--volt` underline**, and a step to `--metric-bright`, so
its state never rests on the color alone. Flush right: one `button-primary` reading
**"Start building"**. **The tabs are type only** — no icon, no badge; the brief hands
this product nothing to announce, and an empty slot is not a reason to manufacture a
"NEW" mark.
- **`button-primary`.** `--volt` (`#c6f24e`) fill, **`--canvas` near-black label** at the
15px Button role (**15.19:1 — measured, passes AA with wide margin**), **4px** radius,
48px tall, 14 × 28px padding. Press flips the fill to `--volt-deep` (`#a9d43a`, 11.4:1
under the same dark label) — **no transform, no shadow, no lift.** This is the site's
primary action; it appears at most twice per page. **The label is always near-black:**
white on lime measures 1.17:1 and fails outright, so a lime button with a white label is
a defect.
- **`button-outline`.** Transparent fill, `--metric-bright` label, 1px `--hairline-strong`
border, 4px radius, 48px tall. The "Copy" action, the three tier CTAs, and every
secondary action. **No tier CTA is ever `button-primary`:** the three gauges are equal in
weight, and putting the voltage under one would rank it — a reading this design was never
handed.
- **`button-text`.** No fill, no border, label in `--volt` (15.19:1, cleared for small
text on the dark floor), underlined on hover. Inline links and the FAQ / incident-log
disclosure rows.
- **`stat-tile`.** A `--panel` slab at 6px radius, 32px padding, carrying one figure in the
72px Readout XXL role, its unit in `--metric-dim`, and an uppercase micro-label beneath.
Hairline-divided when banked 4-up. The four brief stats are these; the same form carries
the docs caching figures and the pricing prices. **No icon, no sparkline inside the tile,
no shadow** — a tile is a readout, not a chart card.
- **`prompt-line`.** The hero's request bar: a `--panel` slab at 4px radius with a leading
`--volt` "go" dot, the URL in the URL role (`zero`), keys in `--volt`, values and syntax
in `--metric-bright`, and a `button-outline` "Copy" at its right. Below it the three
resolving response readouts.
- **`config-row`.** One row of the docs parameter panel, and every row is built to the
same four fixed columns in one order so the panel reads *down* its value column: the
**parameter name** in the Code role (`--volt`), the **accepted values** in Body S
(`--metric-mid`), the **description** in Body S (`--metric-mid`), and the **live value**
in the Value role (`--metric-bright`) flush to a common right rule. 1px `--hairline`
between rows. Because the values are tabular mono set from the right, a value that gains
a digit moves a digit and never moves the column.
- **`selector`.** A hard-edged segmented bank on `--panel` for the closed-set parameters
(`fit`, `crop`, `rot`, `fm`): cells at **4px** radius, 1px `--hairline` dividers, labels
at 14px `--metric-mid`. Selected takes a `--panel-raised` fill **and** a step to
`--metric-bright` at weight 600 **and** `aria-checked="true"` — three signals, none of
them the voltage, because a console marks selection by state, not by spending its one hue
on a cell. **Not a pill, not a chip, never rounded past 4px.**
- **`fader`.** A 2px `--hairline-strong` track with a hard-edged **4 × 20px `--volt` bar**
as the thumb, for `w` / `h` / `blur`. Focus draws the 2px `--volt` ring around the bar.
The numeric field beside it is a `text-input`. **It is not a knob and it is not round.**
- **`text-input`.** `--panel-raised` fill, `--metric-bright` text, 1px `--hairline-strong`
border, **4px** radius, 14 × 16px padding, 48px tall. Placeholder is **`--metric-mid`**
(6.46:1 on the raised well) — never `--metric-dim`, which measures 3.41:1 there and
fails. Focus replaces the border with a **2px `--volt` ring at a 2px offset**, landing on
`--panel` (14.47:1) not the raised fill. The error state — reachable from the one free-
text field, the `bg` hex — keeps the ring and adds a message in `--alert` (6.19:1 on
`--panel`), the one place the alarm color carries small text, because a malformed hex is
a genuine degraded input.
- **`capability-panel`.** The three live panels of the index trio, `--panel` on `--canvas`
with the `--grid` texture behind, 6px radius, 1px `--hairline`, 32px padding: a Display M
title, a Body paragraph in `--metric-mid`, and a **live readout** anchoring each —
**Transform** carries a compact live parameter strip (a few of the ten params ticking
their values) captioned `10 CHAINABLE PARAMETERS · SMART CROP`; **Optimize** carries the
format-negotiation readout and the `−62%` payload delta; **Deliver** is the wide panel
carrying the 41-node status strip and the latency readout. The panels are live readouts,
not photo cards — the photograph appears only in the before/after job.
- **`edge-strip`.** The 41-node device: 41 `--volt` dots on `--panel`, each with the
emissive glow, arranged in continent bands, captioned in the micro-label role with the
real figures, hover lifting a node to a brief-true tooltip. **41 dots, exactly, because
the brief says 41.**
- **`sparkline`.** An inline-SVG polyline stroked in `--volt` with the emissive glow,
bounded between the p50 and p99 anchors, no axis, no per-point value, no tooltip. Texture
for the latency readout and nothing else.
- **`capacity-gauge`.** The pricing device: a `--panel-raised` track at 6px radius, a
`--volt` fill to the cap line, the cap and overage labels in the Value role, the price in
the Readout XXL above. The over-cap zone is dark-and-unavailable (`--alert`, Free) or a
metered extension (`--alert`, Pro / Scale). **No tier is marked "recommended,"
"popular," or "best value."** Nothing in the brief ranks the three.
- **Parameter table (config panel).** The ten-parameter reference, built as the docs
**config panel**: full-width hairline-divided `config-row`s, 12px vertical padding, a 1px
`--hairline` above and below the block, the head row on `--panel-raised` in the micro-
label role. Four columns as in `config-row`. The `fm`, `q`, and `dpr` rows carry a
`negotiated-tag`; the other seven do not. The stated default (`q` 75) is printed;
defaults the brief does not state are not invented. **No card, no shadow, no zebra.**
- **`negotiated-tag`.** A **square** (0px) 11px uppercase tag in the micro-label role,
`--metric-mid` text on a transparent fill with a 1px `--hairline-strong` border, 2 × 8px
padding, reading `NEGOTIATED`. It marks `fm`, `q`, and `dpr` in the URL string, the
config panel, and the docs table, because `fm=auto` negotiates AVIF → WebP → JPEG from
the `Accept` header and a browser cannot demonstrate a re-encode. **It is never `--volt`
and never `--alert`** — it is a statement of fact, not a live health signal and not an
alarm.
- **Code block.** `--panel` fill, **6px** radius, 32px padding, no border, no shadow.
JetBrains Mono at the Code role in `--metric-bright` with `zero`. A `button-outline`
"Copy" at its top-right. **The only color inside it is `--volt` on the parameter keys and
the `refract` token** — the voltage marking the live tokens; there is **no syntax-
highlight palette**, no keyword color, no string color. The system has one hue and will
not spend it on a language grammar.
- **`tier-block`.** The pricing card, built around a `capacity-gauge`: `--panel` fill, 6px
radius, 1px `--hairline`, 32px padding. In order: the tier name in the Display M role,
the **price in the 72px Readout XXL with the mono's inherent alignment** (`$0` / `$29` /
`$249`, `/mo` stepped down to `--metric-dim`), the capacity gauge, a full-width
`button-outline` CTA, and a quota ledger beneath in the Value role — transforms,
bandwidth, support, and the tier's extras, each figure locked to a right rule so the
three blocks compare down a column. **No tier is marked recommended.**
- **FAQ row / incident-log entry.** The pricing FAQ, styled as a short **incident log**: a
full-width disclosure row, 1px `--hairline` between rows, with a small `--volt`
`RESOLVED` status chip at the left, the question in the Display M role as the event
line, a `button-text` chevron at the right, and the answer in Body `--metric-mid` when
open. The four brief FAQ entries are these. The `RESOLVED` chips are not fabricated
incidents — they are the visual language of a status page's history list, and every
answer is the brief's own. **No card, no fill, no shadow.**
- **Footer.** `--canvas` — the same near-black as the page. A 1px `--hairline` top rule, 64
× 24px padding, multi-column `--metric-mid` links in Body S, closed by a legal row in
`--metric-dim` (3.94:1 — a short label, which is all it ever is). **The page never
inverts; there is no light slab anywhere on this site.**
## Motion
**Restrained, and every gesture is a console coming up or a control answering.** Motion
has one job — to make the readouts feel *live* — and it is spent nowhere else. Meter is
the one design under this brief that permits a resolve, and it earns it precisely because
"live" is the thesis; but the resolve is bounded to a one-time initialization and it lands
on the fact.
- **The readouts resolve once, on connect, and hold.** On load, the hero response metrics,
the four stat tiles, the latency figures, and the capacity fills **resolve** — a count-
and-settle over **500ms `cubic-bezier(0.2, 0, 0, 1)`** that lands on the brief's exact
figure and stops. This is the connection handshake of a dashboard populating, not a gauge
sweeping up to sell its number. **It happens once, it is not scroll-triggered, it does
not replay, and it does not loop.** This is the deliberate divergence from cutaway and
reel, which print their figures once and refuse the count-up: meter resolves because a
telemetry page *initializes*, and then it holds as still as they do.
- **The distinction between an honest resolve and a dishonest sweep is that the resolve
settles on the fact and never drifts after.** A figure that kept ticking, re-rolled on
scroll, or animated on a loop would be performing a measurement rather than reporting
one. Once settled, every number on this page is as static as an instrument reading.
- **The one ambient gesture is the latency sparkline's slow drift** — an imperceptible
creep of the bounded trace between its p50 and p99 anchors, over 20s+, never noticeable
at a glance. It is the only looping motion in the system and it is **fully disabled under
reduced motion**, where the sparkline is a static band.
- **A control answers in the same frame.** In the before/after job and the config panel, a
parameter change repaints its target and rewrites the URL within one frame — no skeleton,
no shimmer, no spinner. The operation is a CSS transform on an image already decoded in
memory, and the honest reading of that operation is that it is finished.
- Hover and focus are **color, border, and fill swaps only** — 120ms ease-out, **no
transform, no scale, no lift, no bounce, no spring.** An edge node brightens its glow on
hover; a button darkens on press; nothing translates.
- **Focus is a 2px `--volt` ring** at a 2px offset (15.19:1 on `--canvas`, 14.47:1 on
`--panel`), on every interactive element, and it is never removed.
- Under **`prefers-reduced-motion: reduce`**, every readout renders **already resolved**,
the sparkline is static, and every transition is dropped. **No reading on this page is
carried by movement:** the settled state is the readable state, and the resolve only ever
showed the console coming up.
## Image treatment
Meter leads with numbers, not pictures, so the photograph has a **single, narrow, load-
bearing role**: it is the payload of the one before/after "transform job," the real image
the API is shown transforming so a byte delta has something to be measured against. There
is exactly one demonstrated photograph on the site, and it lives inside the demo panes,
never full-bleed, never behind type. Everything else that reads as a graphic — the edge
nodes, the sparkline, the gauges, the grid — is **drawn in CSS and inline SVG, not
generated**, and is not in the image list below. This is deliberate: a console's graphics
are vector instruments, and the one raster asset is the *subject under test*.
**Nothing on this site is an illustration, a diagram, an icon set, a chart image, or a 3D
render.** The 41-node strip is CSS dots; the sparkline is an SVG polyline computed from two
real anchors; the gauges are CSS fills; the grid is a CSS background. If an element cannot
be a real photograph of the payload or a CSS/SVG instrument, it does not belong on the
page. In particular, **no map image is generated for the edge strip** — a rendered world
map would invite fabricated city pins; the strip is 41 anonymous CSS nodes and nothing
more.
**How the one payload photograph and its supporting stills are prompted.** Binding rules;
a still that breaks one is regenerated, not cropped around.
1. **Nothing in frame carries language.** Every prompt states, in a clause of its own, that
the image contains **no text, no lettering, no numerals, no labels, no logos, no brand
markings, no signage, and no packaging print** — anywhere in the frame. A generated
still invents lettering if allowed, and invented lettering inside a plate the demo is
about to enlarge is a counterfeit brand printed at size. This page states its numbers in
exactly one voice — the readout — and a photograph that also carried a figure would be a
second, unverifiable instrument in the same frame. (This is the image provider's most
common failure; the clause is the guard.)
2. **No people, no hands.** Not one, not out of focus, not in the background. Mechanically,
the model fuses fingers into a knuckleless mass; structurally, each photograph is a
*sample input under test*, not a lifestyle shot. A person turns the sample into an
advertisement.
3. **The frame is quiet and survives the crop.** No props beyond the named subject, no busy
corners. Every photograph must still read deliberately after being cropped to `1:1` and
blurred to 100, because the demo will do exactly that, live, in front of the visitor.
4. **The subject sits off-center.** `crop=smart` is a claim the brief makes — *smart crop
keeps subjects in frame* — and a claim is only demonstrated where it could have failed.
Center the subject and `smart` and `center` return the same rectangle and the visitor is
shown a label instead of a result. Push it to one side and the two crops visibly
disagree, which is the only condition under which the reading can be checked.
Constant tone words on every prompt, so the stills read as one production against the near-
black console floor: **clean, cool, low-key studio photography, a single hard directional
light, deep shadow, a matte near-black ground that matches the canvas, calm, real object,
off-center subject, no people, no hands, no text.** The register is cool and instrumental —
a sample being measured on a bench, not a hero shot. No image ever has type set on top of
it, and no plate is clipped past 6px.
Needed images (referenced `./assets/<id>.webp`):
- `demo-source` (4:3) — A single smooth ceramic vessel on a matte near-black surface beside
one hard cool directional light, placed well off-center to the right, deep shadow filling
the left of the frame, low-key studio photography, plain uncluttered background, no text,
no lettering, no numerals, no labels, no logos, no brand markings, no signage, no
packaging print, no people, no hands.
- `capability-transform` (4:3) — A single folded length of plain matte fabric on a near-
black surface pushed to the left of the frame, one hard cool side light raking its folds,
deep shadow to the right, low-key studio photography, no text, no lettering, no numerals,
no labels, no logos, no brand markings, no signage, no packaging print, no people, no
hands, generous dark space to the right.
- `capability-optimize` (4:3) — A single smooth stone or pebble on a matte near-black
ground, one hard cool raking light picking out its surface against deep shadow, sharp
macro detail, cool low-key tones, subject off-center, no text, no lettering, no numerals,
no labels, no logos, no brand markings, no signage, no packaging print, no people, no
hands.
- `capability-deliver` (4:3) — A single matte sphere on a near-black surface with one hard
cool light falling across it and dropping off sharply into shadow, placed off-center,
low-key studio photography, near-black ground, no text, no lettering, no numerals, no
labels, no logos, no brand markings, no signage, no packaging print, no people, no hands.
- `docs-origin` (1:1) — A single blank unmarked matte plate lying flat on a near-black
surface under one hard cool directional light, the plate completely empty, off-center, no
text, no lettering, no numerals, no labels, no logos, no brand markings, no signage, no
packaging print, nothing else in frame, no people, no hands.
- `pricing-hero` (3:4) — A tall single column of stacked matte blocks receding upward on a
near-black ground, one hard cool light from above raking one edge into deep shadow,
off-center, low-key studio photography, no text, no lettering, no numerals, no labels, no
logos, no brand markings, no signage, no packaging print, no people, no hands, tall
portrait.
## Do / Don't
Do:
- Keep the floor a true near-black (`--canvas` `#0a0b0e`) and every grey neutral; keep the
nav, the page, and the footer the same near-black, with **no light band anywhere.**
- Render every claim as a **readout**: the figure in JetBrains Mono at instrument scale,
its unit stepped down to `--metric-dim`, an uppercase Space Grotesk micro-label beneath.
Words are Space Grotesk; **every number is JetBrains Mono**, so the readouts column-
align.
- Spend **one voltage** — acid lime `--volt` `#c6f24e` — on health, lit nodes, the primary
button (under a **near-black** label), the sparkline, the focus ring, and the one
resolved-healthy figure. Keep `--alert` red for the **over-quota / degraded state only**
— the Free cap and the Pro/Scale overage zone — and nowhere else.
- Reserve white (`--ink` `#f2f4f6`) for headline figures; run body copy in
`--metric-bright` / `--metric-mid`; keep `--metric-dim` for units and disabled labels
only.
- Resolve every readout **once, on connect**, settling on the brief's exact figure, then
hold it still — and render already-resolved under reduced motion.
- Draw the 41-node strip as **exactly 41 CSS nodes**, all lit, captioned with the real
figures; on hover show broad geography and the brief's real `21 ms p50`, never a fabricated
city or a per-node latency.
- Keep the seven browser-honest parameters (`w` `h` `fit` `crop` `rot` `blur` `bg`)
genuinely wired to the one payload photograph in the before/after job, and keep `fm` `q`
`dpr` as readouts tagged `NEGOTIATED`.
- Draw the pricing quota as a **capacity gauge**: the scale is the real cap, the fill is the
included quota, the over-cap zone carries the brief's real pausing / overage semantics.
- Hold display type in Space Grotesk at weight 500–700 with tight negative tracking; keep
every figure in JetBrains Mono; declare `zero` on the mono roles and `case` on the micro-
label.
Don't:
- **No second hue.** One voltage (lime) for health and one alarm (red) for a real over-
limit state — no blue link, no cyan flow, no amber notice, no green-vs-red series pair,
no syntax-highlight palette. A colored control that does not signal health or an over-
limit state is a defect.
- **No white label on a lime fill** — white on `--volt` measures 1.17:1 and fails. The lime
button's label is `--canvas` near-black (15.19:1), always.
- **No invented numbers, and a live dashboard makes this the cardinal rule.** No fabricated
byte count ticking down on the hero, no 41 made-up city latencies, no staged usage
percentage on a gauge, no sparkline point a visitor is invited to read, no latency /
uptime / edge count the brief did not supply, no "most popular" tier, no "NEW" badge.
**Every figure traces to `content.md`** — 62%, 21 ms, 98.6%, 99.95%, 41 edge locations,
cold p50 89 ms / p99 340 ms, 50 req/s, 30-day cache, $0 / $29 / $249, 1,000 / 50,000 /
1,000,000 transforms, 5 GB / 250 GB / 5 TB, $2 per 1,000, $0.08/GB, `q` default 75, `q`
1–100, `dpr` 1–3, `blur` 0–100, `rot` 90/180/270. A number with no source is the only
real defect a telemetry page can have.
- **No count-up that keeps ticking, re-rolls on scroll, or loops.** The resolve is a one-
time handshake that settles on the fact and holds; anything more is a gauge selling its
measurement.
- **No 88px heavy-grotesque figure and no static-diagram hero** — that is `cutaway`'s
language, and the fastest way to converge the two dark, number-forward designs. Meter's
figures are tabular monospace at 72px that resolve once and hold.
- **No full-bleed photography and no photo-canvas** — that is `reel`. The one demonstrated
photograph lives inside the before/after panes; no still runs edge-to-edge and no type
ever sits on an image.
- **No paper, no light band, no inversion.** A white canvas is `aperture`; a paper canvas
is `folio` or `carton`; a graphite floor is `cutaway`. This floor is a true near-black
and it never lifts.
- **No pill, no circle beyond the status LED, no orb, no knob, no radius above 6px.** The
edge nodes are dots because a status light is a dot; nothing else rounds.
- **No `box-shadow` anywhere** — at rest or on hover, on any element. Depth is the tonal
step, the hairline, the grid, and the one emissive `--volt` glow on a live node, the
sparkline, and the focus ring.
- **No map image, no illustration, no icon set, no chart image, no 3D render.** The
instruments are CSS and SVG; the one raster asset is the payload photograph. A generated
map would invite fabricated city pins.
- **No faked encode.** `FORMAT NEGOTIATED` is a real browser decode probe or it prints
`auto`; the byte delta is derived transparently from the real shipped source-asset size
and the brief's 62%, labeled as a projection, never as a live re-encode measurement.
- **`q` reads `80` in the request URL and `75` in the docs config table, and both are
correct** — the brief specifies a default of 75 and writes its own request form with
`q=80`. A default and an explicit value are two different quantities; the instrument
prints what it is given. Do not reconcile them.
- No emoji anywhere, and **no naming of any source brand in the built page** — this design
is free-form and names no company anywhere, in the prose or the UI. The site carries the
product's own name, **Refract**, in English, and nothing else.