Image API
Open live page ↗Cutaway
DESIGN.md
# Cutaway — Design System
## Concept
**An image API presented as a bench instrument.** A graphite floor, cold machined
greys, two voltages of light, and a hero that is not a headline but an **exploded
photograph**: one real image, blown apart into the stages the API puts it through,
each plane annotated with an 88px readout the way a test bench annotates a
measurement. On paper the transplant is a category error — hardware-industrial
design applied to a product with no hardware in it, no housing, no motor, no
serviceable part. It is not an error, and the reason is checkable rather than
rhetorical.
Cut an appliance open and you find the motor, which is the point of cutting it open:
the shell is what you carry home, the interior is what justifies the price, so the
section drawing does the arguing. **An image API has no interior of that kind** — no
housing to section, no impeller to expose. What it has is the image, which is also
the only object it ever hands back. So the section is taken through **the image
itself**: one photograph rendered as an original plate, a resized plate, a smart-crop
frame, and an encoded plate, tilted apart in 3D, wired together by thin connector
lines, captioned with numbers at instrument scale. Every plane is the *same
photograph* — the same file, four times over, at four stages of one pipeline, the
first of them untouched so that the other three have something to be measured
against. Nothing here is illustrated, rendered, or drawn. **The only depicted object
on this site is a photograph, and the only machine is the browser's own transform of
it.** The name is a specification, not a metaphor: a cutaway is a drawing you are
supposed to be able to check against the object.
What is taken from **Dyson** is an inventory, and it is short: brand black and a
near-black graphite floor (`#141618`) carrying a cool nickel-to-platinum metal ramp;
one high-voltage magenta-to-violet engineering accent (`#E4007C`) rationed like a
warning light; a scoped airflow cyan (`#00B7CE`) that lives only inside diagrams;
oversized spec readouts at 88px in tabular figures, set like a bench instrument
rather than marketing copy; and a bold neo-grotesque at weight 800 with tight
negative tracking. Two habits are taken intact — **the cutaway/exploded hero** and
**the number as the argument**. Two are cut, and the Palette and Spacing sections
show the working: its **pill CTAs become 2px rectangles**, and its **"one magenta
moment per view" ration becomes a shape rule instead of a count**, because an
instrument with seven live channels cannot legibly mark only one of them. Its
proprietary neo-grotesque is substituted by **Archivo**, the substitute its own
reference notes name; the monospace it has no need for — a home appliance has no URL
— is **Chivo Mono**, Archivo's monospaced sibling from the same foundry. That
lineage is named in this document and **nowhere else**: the built page carries only
the product's own name, **Refract**, in English.
Set the four designs of this brief side by side and the measurements separate them
before the arguments do. `aperture` runs a white floor (`#FFFFFF`), a 9999px pill for
a hero object, and circles for its controls; cutaway is that design read backwards —
a graphite floor, **nothing above 4px, not one pill and not one circle in the
system** — and where aperture hands the visitor a finished frame, cutaway hands over
the stages that produced it. `folio` sets a display serif at weight 400 on paper and
leaves its grid exposed. `carton` prints a typewriter on cream stock and mixes four
voices in one headline. **Cutaway is the only one of the four with a dark floor**,
and the only one whose display weight is 800: tight, cold, no serif anywhere, and no
charm in it at all.
None of that is costume, and the test is simple. The appliance brand's entire claim
is that the interior outperforms the shell — you are buying the motor, not the fan.
A developer's claim about an image API is the same claim in a different unit: nobody
cares what `hero.jpg` looks like sitting in a bucket, they care what happens to it
between the origin and the browser — which codec it is negotiated into, how much of
its payload survives, how many milliseconds it costs. **The stages are the product.**
An exploded view is therefore not a borrowed picture. It is the accurate one.
## Palette
Cold metal, two voltages, no paper. Every grey is blue-neutral biased — the colour of
anodised aluminium and machined nickel, never of ink on stock. **There is no light
surface anywhere in this system: no white page, no cream band, no paper.** The page
does not invert, because there is nothing to invert into.
| Token | Hex | Role |
| ----------------- | --------- | ------------------------------------------------------------------------------------- |
| `--canvas` | `#141618` | Graphite. The page floor, the nav, the footer, and every full-bleed band. |
| `--panel` | `#1C1F22` | The one tonal step up — the instrument panel, cards, code block, tier cards. |
| `--panel-raised` | `#2A2E33` | The second step — input fills, unselected selector cells, table head, chevron buttons. |
| `--hairline` | `#2A2E33` | The 1px rule: table rows, band separators, selector dividers, card borders. |
| `--hairline-strong` | `#3A3F45` | Input borders at rest, emphasised dividers, the unset channel marker. |
| `--ink` | `#FFFFFF` | Headlines, readouts, the button label, the URL string. Pure white on cold metal. |
| `--ink-soft` | `#C9CED3` | Running body copy, table cells, answers. |
| `--ink-mid` | `#A9AFB6` | Captions, spec labels, units, nav links at rest. |
| `--ink-faint` | `#8B9199` | The lowest body-legal step — **never on `--panel-raised`** (see the rule below). |
| `--ink-dim` | `#6E747B` | Disabled and unset-channel labels, and the footer legal row — never an input's placeholder text (that steps up to `--ink-mid`; see `text-input`). **Fails AA — short labels only.** |
| `--magenta` | `#E4007C` | The voltage. Button fills under white text, 1–2px marks, 88px figures, the focus ring. |
| `--magenta-bright`| `#FF2EA6` | The **only** magenta that may carry text below 24px on dark. Never a fill. |
| `--magenta-deep` | `#B4006B` | The press state of a magenta fill. **Never text, never a mark.** |
| `--violet` | `#7A1FA2` | The voltage's far end. **Gradient wash only** — it may never carry meaning. |
| `--violet-deep` | `#4A1270` | The dark end of that same wash. Same rule. |
| `--cyan` | `#00B7CE` | The flow colour. Source-side connectors, parameter keys, the `SERVER-SIDE` tag. |
Rules:
- **Two chromatic elements and no third hue.** The magenta→violet ramp is the
**voltage**; the cyan is the **flow**. That is the entire chromatic system. The
reference's semantic set — a green positive (`#12946A`), a red negative
(`#D82C2C`), an amber notice (`#E08600`) — **does not exist here.** There is no
green success dot, no amber warning, and no separate error red: **the one reading
this panel can be handed that it has to reject is a malformed hex in the `bg`
field**, which is the only control in the panel that takes free text, and the
message is set in `--magenta-bright` — the same voltage turned up, not a semantic
second colour. Nothing else in the panel has a bad value available to it, and the
reason is mechanical rather than careful. `q` is not validated here because `q` is
not *typed* here: it is one of the three `SERVER-SIDE` readouts and it has no
control at all. `blur` is a fader bounded by its own track at 0–100, and a fader
cannot be dragged past its stop. `fit`, `crop`, and `rot` are closed selectors —
every cell is a legal value and there is no cell between them. `w` and `h` take
integers, and the brief fixes no maximum for either, so there is no bound left for
them to break. **One control takes free text, so the system carries one error
colour, and it is not a new hue.** A third hue is not an extension of this system;
it is a fault in it.
- **Contrast (measured, WCAG 2.1, computed from the sRGB relative-luminance
formula).** On `--canvas` (`#141618`): `--ink` **18.1:1**, `--ink-soft` **11.5:1**,
`--ink-mid` **8.2:1**, `--ink-faint` **5.7:1**, `--cyan` **7.5:1**. On `--panel`
(`#1C1F22`): `--ink` **16.6:1**, `--ink-soft` **10.5:1**, `--ink-mid` **7.5:1**,
`--ink-faint` **5.2:1**, `--cyan` **6.8:1**. On `--panel-raised` (`#2A2E33`):
`--ink` **13.7:1**, `--ink-soft` **8.6:1**, `--ink-mid` **6.2:1**, `--cyan`
**5.6:1**. Everything named in this paragraph clears AA body text (4.5:1).
- **`--ink-faint` (`#8B9199`) is body-legal on `--canvas` (5.7:1) and `--panel`
(5.2:1) and is NOT body-legal on `--panel-raised`, where it measures 4.30:1** —
below the 4.5:1 threshold by a hair, which is exactly the kind of near-miss that
ships broken if nobody computes it. A placeholder inside an input (whose fill is
`--panel-raised`) therefore steps **up** to `--ink-mid` (6.2:1), never down.
- **`--ink-dim` (`#6E747B`) does NOT hold AA and is label-only.** It measures **3.8:1
on `--canvas`** and **3.5:1 on `--panel`** — above the 3:1 large-text bar, below the
4.5:1 body bar. It sets disabled labels and nothing a visitor must actually read:
no paragraph, no table cell, no parameter value, no price, no stat. On
`--panel-raised` it collapses to **2.9:1** and fails even the large-text bar, so
**it never appears on `--panel-raised` at all.**
- **The magenta problem inverts on a dark floor, and the inversion is load-bearing.**
The reference spends its fuchsia as a CTA fill with a white label, and on this
graphite floor that survives: **white on `--magenta` measures 4.58:1 and passes AA
body text** — thinly, by 0.08, which is why the button label is weight 700 and the
fill is never lightened. But the same hue **as text** on `--canvas` measures only
**3.96:1 and fails AA body**. So the ration is not "use less magenta"; it is a
precise split, and the palette carries three stops of one hue because it needs
exactly three:
1. **`--magenta` (`#E4007C`)** — a fill that carries a white label (4.58:1), a
**non-text mark** at 1–2px (3.96:1 against the 3:1 bar), an **88px readout
figure** (large text, 3.96:1 against the 3:1 bar), and the focus ring. It sets no
paragraph, no label, no caption, no table cell, and no value below 24px.
2. **`--magenta-bright` (`#FF2EA6`)** — **5.35:1 on `--canvas`**, the only magenta
that may carry small text: the tertiary button label, an inline link, a validation
message. It is **never a fill**: white on `#FF2EA6` is **3.39:1** and fails, so a
bright-magenta button with a white label is a defect.
3. **`--magenta-deep` (`#B4006B`)** — white on it is **6.66:1**, so it is the
**press state** of a magenta fill, where contrast *improves* under the finger.
As text on graphite it is 2.72:1 and it is therefore **never text and never a
mark.**
- **No stop of the voltage ever appears on `--panel-raised`.** `--magenta` measures
**2.99:1** there — below even the 3:1 non-text bar — `--magenta-bright` falls to
**4.03:1** (under the body bar), and `--violet` to 1.66:1. The raised step exists for
**inert fills** — input wells, the selected selector cell, the table head, the
chevron button — and it carries no voltage, no glow, and no mark. (`--cyan` is the
one chromatic token that would survive there, at 5.6:1, and it is still not used
there: nothing on the raised step is flow.) The focus ring's 2px offset is what keeps
this honest — the ring is drawn *outside* the control, landing on `--panel` (3.62:1)
or `--canvas` (3.96:1), never on the raised fill it surrounds.
- **`--violet` (`#7A1FA2`) may never carry meaning.** It measures **2.2:1 on
`--canvas`** and `--violet-deep` **1.4:1** — below every WCAG threshold including
the 3:1 non-text bar. It exists for exactly one thing: the **magenta→violet
atmospheric wash** behind the exploded hero, a large soft field that conveys no
information and can be entirely un-perceived without the page losing anything. **No
violet line, no violet text, no violet mark, no violet border, no violet state.**
The connectors are magenta and cyan, and that is why.
- **Cyan is the strong one here, and that is the second inversion.** On the
reference's white marketing bands, cyan is a weak, diagram-scoped tint. On this
graphite floor `--cyan` (`#00B7CE`) measures **7.5:1** — the most legible chromatic
token in the system, ahead of every stop of the voltage. So it earns real text
work: the **parameter keys** in the URL string and the code block, the
**`SERVER-SIDE`** tag, and the **source-side connector lines**. It keeps the
reference's one hard limit: **cyan is never a CTA and never a fill, at any size.**
White on cyan measures 2.4:1, which fails outright, and the only label a cyan fill
could legally carry would be `--canvas` graphite — so rather than license the fill
and police its label, the system declines the fill. Cyan is a line, a key, a border,
and text. The `SERVER-SIDE` tag is the proof: cyan text inside a 1px cyan border on
a transparent ground, not a cyan chip.
- **Neither voltage is ever a large fill background.** Magenta appears as button
fills, 1–2px rules, marks, glyph-free indicators, and 88px figures; cyan appears as
text, 1px rules, and connector lines — **never as a fill of any size** (see the cyan
rule above). Neither ever appears as a band, a card surface, a panel, or a hero wash
of its own. The single exception is the violet-to-magenta atmospheric gradient behind
the hero stack, which is the one place two stops of the voltage blend, and it **never
sits behind body copy.**
- **The hairlines are decorative and carry no meaning.** `--hairline` measures
**1.3:1** on `--canvas` and `--hairline-strong` **1.7:1** — far below the 3:1
non-text bar. Therefore **no control's identity and no control's state may rest on a
hairline alone.** Every channel in the instrument panel is identified by a persistent
`--ink-mid` key (8.2:1), not by its divider; and a set parameter is marked by *three*
changes at once — the channel's square marker fills `--magenta`, the key steps
`--ink-mid` → `--ink` at weight 700, and the value appears in the URL string — so
state is never carried by colour alone.
- **No paper, no cream, no white page background, and no light band.** There is no
inverted section anywhere: the nav is `--canvas`, the footer is `--canvas`, and the
page floor between them is `--canvas`. The reference alternates dark "engineering
theatre" bands with white retail bands; **this design keeps only the theatre.**
## 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 come
from the same foundry, which is the point.
**Interface — Archivo (Omnibus-Type).** The substitute the reference's own Font
Substitutes section names for its proprietary neo-grotesque: a grotesque drawn for
headlines and technical contexts, with a weight range to 900 that holds the machined
display voice at 800. It carries display, readouts, body, navigation, labels, buttons,
captions, and every figure the page states in its own voice. The figures it *quotes* —
from a URL, from the SDK snippet, from the console's value column — belong to the mono.
**Code — Chivo Mono (Omnibus-Type).** The voice the transplant has to *add*, because
the reference has none — a home appliance has no URL, and a URL-driven API is nothing
else. Chivo Mono is Archivo's monospaced sibling from the same foundry: the same
grotesque skeleton drawn to a fixed width, which is why the code in this system reads
as the *same* engineered voice at a different pitch rather than as a borrowed one. It
is confined, absolutely, to **the URL string, the SDK snippet, the ten parameter
names, and the live values in the instrument panel's value column.** It never sets a
heading, a paragraph, a price, or a stat.
**There is no serif anywhere in this system.** Not a display serif, not a slab, not a
typewriter face. Both voices are sans.
| Role | Face | Size / Leading | Tracking | Features | Use |
| ------------ | --------------- | -------------- | -------- | -------- | --------------------------------------------------------- |
| Spec readout | Archivo 800 | 88px / 0.95 | -2px | **tnum** | The stats band, the plane readouts, the caching strip, the tier prices |
| Display XXL | Archivo 800 | 72px / 1.0 | -1.5px | — | Index hero line |
| Display XL | Archivo 800 | 52px / 1.02 | -1px | — | Page openers on docs and pricing |
| Display L | Archivo 700 | 36px / 1.08 | -0.5px | — | Section heads |
| Display M | Archivo 700 | 28px / 1.15 | -0.3px | — | Sub-section heads, tier names, capability titles |
| Heading | Archivo 700 | 22px / 1.2 | -0.1px | — | Panel titles, FAQ questions, the wordmark |
| Spec unit | Archivo 600 | 20px / 1.0 | 0.4px | — | The unit and key beside an 88px readout (`ms`, `%`, `w=`) |
| Body L | Archivo 400 | 18px / 1.55 | 0 | — | Lead paragraphs |
| Body | Archivo 400 | 16px / 1.55 | 0 | — | Default running copy |
| Body S | Archivo 400 | 14px / 1.5 | 0 | — | Table cells, dense copy, footer |
| Data | Archivo 500 | 15px / 1.4 | 0 | **tnum** | Quota ledgers, spec tables, numeric cells in columns |
| Button | Archivo 700 | 15px / 1.0 | 0.3px | — | Button labels |
| Nav | Archivo 600 | 14px / 1.4 | 0.2px | — | Top-nav links |
| Caption | Archivo 400 | 13px / 1.4 | 0 | — | Photo captions, the plane caption line |
| Overline | Archivo 700 | 12px / 1.3 | 1.4px | **case** | Uppercase technical label — `ORIGIN`, `SERVER-SIDE`, `RESIZE` |
| Micro | Archivo 500 | 11px / 1.3 | 0.2px | — | Fine print, legal row |
| URL string | Chivo Mono 400 | 16px / 1.5 | 0 | **zero** | The live URL beneath the instrument panel |
| Code | Chivo Mono 400 | 14px / 1.6 | 0 | **zero** | The SDK snippet, parameter names, the panel's value column |
Principles:
- **Heavy display, tight tracking, and no light weight anywhere above 22px.** Display
tiers set at 800 with -1px to -2px tracking. A 300-weight headline is not a variant
of this design; it is a different company. Body holds 400; data and units sit at
500–600.
- **The readout is the voice.** Any headline figure — a percentage, a millisecond, a
count, a price — sets in the 88px Spec-readout role with the unit stepping down to
the 20px Spec-unit role beside it. Numbers are the argument, and they are set like a
bench instrument, never as prose. **"Over sixty percent smaller" is a defect; `62%`
at 88px is the design.**
- **The spec numbers are the loudest thing on the index page after the hero.** The
stats band's four figures (`62%` · `21 ms` · `98.6%` · `99.95%`) render at 88px/800
and nothing else on that page except the hero's own plane readouts reaches that
scale. The band is a **readout, not a caption**: it carries the four figures, their
units, their labels, and nothing else — no icon, no sparkline, no chart, no card.
- **`tnum` is declared on two roles and Archivo genuinely ships it** (verified in
the face's real GSUB feature list, alongside `case`, `zero`, `liga`, `lnum`, `onum`,
`pnum` and `frac`). It does real work in exactly the places it is declared: the four
stats figures lock to one column width, the docs caching strip does the same, the tier
prices line up down the three cards, and the quota ledgers align. It is **inert on the
plane readouts that contain no digits** (`smart`, `avif`) — declared there for
consistency of the role, doing nothing, and this document says so rather than
pretending otherwise.
- **`zero` is load-bearing, not a flourish, and Chivo Mono genuinely ships it**
(verified in its GSUB). The subject of this page is a string that gets read off a
screen and typed into a terminal. A `0` the reader has to disambiguate from an `O`
is a misread waiting to happen, and a misread is the one failure an instrument is
built to prevent: `?w=1200&q=80` must be unambiguous at 14px.
- **`case` is declared on the Overline role and Archivo genuinely ships it** (verified
in its GSUB). It does real work: the uppercase technical labels in this system
include **`SERVER-SIDE`**, and `case` lifts that hyphen from lowercase height to cap
height, where an all-caps engineering label needs it.
- **Exactly three features are declared in this system — `tnum` (Archivo), `case`
(Archivo), `zero` (Chivo Mono) — and all three were verified present in the faces'
real GSUB tables.** Four further declarations a later hand will reach for are
*deliberately absent*, and each absence is a measurement rather than a preference:
- **`onum` is never declared.** Archivo does 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.
- **`tnum` is never declared on Chivo Mono.** The face *does* ship it, unlike some
monospaces — but a monospace is already one width per glyph, so the declaration
would move no glyph. It would leave, in the stylesheet, the trace of a measurement
that was never taken.
- **`liga` and `calt` are never declared.** Archivo and Chivo Mono both ship `liga`
and it is on by default in every browser, so declaring it states an instruction the
browser has already carried out; **neither face ships `calt` at all** (verified
absent from both feature lists), so declaring that would address a feature that is
not in the binary.
- **The mono is a scope, not a texture.** A glyph is set in Chivo Mono when it is a
literal API token and for no other reason — `w`, `fit`, `fm=auto`. A price is not a
token. A stat is not a token. A tier name is not a token. Prose *about* a parameter
is Archivo; the parameter itself is Chivo Mono.
- **Uppercase is for technical labels only.** The 12px Overline role, at 1.4px
tracking, tags a stage, a section, or a mode. It never sets body copy, and it carries
no colour **except one, and the exception is exhaustive**: the `SERVER-SIDE` tag,
set in the cyan Overline role (see `--cyan` in Palette and `server-side-tag` in
Components) to mark `fm`, `q`, and `dpr` as server-negotiated. That is the single
licensed coloured Overline in this system — every other instance of the role
(`ORIGIN`, `RESIZE`, `FRAME`, `ENCODE`, the channel-strip keys, the spec-table head)
stays `--ink-mid` or steps to `--ink`, never a chromatic token.
## Spacing & layout
Two densities share the page, exactly as the reference splits them. The **theatre** —
the exploded hero and the photographic bands — is spacious and cinematic; the object
owns the frame and the negative space is a material. The **instrument** — the panel,
the spec tables, the ledgers — is dense and efficient. Data wants to be tight; a
reveal wants air. Never let the theatre get cluttered, and never let the instrument
get precious.
- **8px base unit**, with 2 / 4 / 12 sub-steps for dense spec 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 stats band, the parameter table); **40px** of padding inside panels, cards,
and the code block. The hero band takes **96px** and the exploded stack itself is
full-bleed inside it.
- Content centres in a **1280px container**. The docs page's reading column caps at
**1080px**, because a ten-row parameter table and a code block stop being readable
when stretched. The hero band, the stats band, and the footer run **full-bleed**.
- **Radius rule — nothing in this system exceeds 4px, and there is not one pill and
not one circle in it.** Panels, cards, tier cards, and the code block: **4px**.
Buttons, inputs, and selector cells: **2px**. Photographic plates, full-bleed bands,
tables, tags, channel markers, and the footer: **0px**. The slider thumb is a
hard-edged **4 × 20px bar**, not a knob. A 9999px radius is not a variant here — it
is the fastest way to turn this design into `aperture`.
- **Elevation is material, 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 CSS 3D transform
on the hero stack, and the hard shadow *inside* each photograph. **One glow exists**,
and it is the reference's own emissive Level 4: the connector lines and the
crop rectangle carry
`filter: drop-shadow(0 0 6px rgba(228, 0, 124, 0.45))`, which is light being emitted,
not a box being lifted. **No `box-shadow` is declared on any element in this design,
at rest or on hover, including the nav, the cards, the panel, and the buttons.**
Breakpoints:
| Width | Behavior |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Mobile <640px | Display steps to **34px**; the readout steps **88 → 48px** but never abandons `tnum`; **the stack un-tilts** (`rotateX/rotateY → 0`) into four flat plates stacked vertically, connectors becoming short vertical rules; the instrument panel goes full-width beneath it; the stats band stacks 1-up; nav collapses |
| Tablet 640–1024px | Display **52px**; readout **64px**; the stack keeps its tilt but drops to a shallower angle; the panel sits beneath the stack, full-width; the stats band goes 2-up |
| Desktop 1024–1440px | Display **72px**; readout **88px**; **the stack (left) and the instrument panel (right) share the hero band**; the stats band runs 4-up, hairline-divided |
| Wide >1440px | Content caps at 1280px; the hero band, the stats band and the footer keep running full-bleed. The panel never grows past the container. |
Band rhythm — `--canvas` dominates, `--panel` is the only tonal step that reads as a
surface, and **no band is light**:
- **index** — hero (canvas, 96px, full-bleed: an Overline, one 72px line, a one-line
sub, and **the exploded stack beside the instrument panel**, with the live URL
string across the bottom of the panel) → capability trio, three hard-edged
photographic cards, Transform / Optimize / Deliver (canvas, 96px) → live-transform
demo, the flat before/after pair reading from the same state (`--panel`, 96px) →
stats band, the four figures at 88px, hairline-divided 4-up (canvas, 64px) → CTA
band (canvas, 96px, hairline-bracketed, one `--magenta` button: **"Start building" →
`./docs.html`**).
- **docs** — page opener (canvas, 52px line) → quickstart, three hairline-divided
numbered rows, the third carrying the SDK code block, with one square photographic
plate set beside the first (canvas, 96px) → parameter reference, the ten-row printed
spec table (canvas, 64px) → caching & limits, a 3-up spec strip of 88px readouts
(`50` req/s · `30` days · `41` edge locations) closed by a hairline row stating
instant purge by URL or tag (`--panel`, 64px).
- **pricing** — page opener (canvas, 52px line, one tall photographic plate) → three
tier cards, prices in the 88px readout (canvas, 96px) → overage & billing semantics,
a hairline-divided ledger (`--panel`, 64px) → FAQ, four hairline-divided disclosure
rows (canvas, 96px).
## Signature
Four devices. The **first and the third** are the reference's own, translated: it
explodes a machine and it sets its proof in oversized figures. The **second and the
fourth** are what the transplant costs — an appliance has no URL, so it has no control
surface and no before/after, and an image API is not demonstrable without both.
### 1. The exploded photograph — the hero
**The reference blows a machine apart to show the motor. This blows a photograph
apart to show the stages.** The hero is a single real photograph (`hero-plate`)
rendered **four times**, as four planes in one 3D scene, tilted apart so the visitor
looks *into* the transform rather than at its output.
The scene is a `perspective: 1600px` container with `transform-style: preserve-3d`.
Each plane is an **`<img>` element carrying the same `src`** — that sentence is the
whole integrity of the device, and it is checkable: if a plane is a `<div>` with a
background colour, an SVG shape, a canvas, or a generated illustration, the design has
failed. The four planes, from back to front:
| Plane | Overline | What it shows | Driven by |
| ----- | --------- | ---------------------------------------------------- | ------------------------ |
| 1 | `ORIGIN` | The photograph, untransformed. The control. | Nothing. It is the zero. |
| 2 | `RESIZE` | The same `<img>`, box sized by `w`/`h`, rotated, blurred | `w` `h` `rot` `blur` |
| 3 | `FRAME` | The same `<img>` under `object-fit` / `object-position`, with the letterbox painted by `bg` | `fit` `crop` `bg` |
| 4 | `ENCODE` | The same `<img>`, visually **identical to plane 3** | `fm` `q` `dpr` — server-side |
Each plane sits at its own `translateZ` and a shared `rotateY(-24deg) rotateX(8deg)`,
so the four read as a stack seen from the side. **The tilt is fixed.** It does not
follow the pointer, it does not parallax on scroll, and a mouse-tilting hero is
exactly the gimmick this design exists to refuse.
**The 88px readouts.** Three of the four planes carry a spec readout set beside them
in the layout — the value at the 88px Spec-readout role, the key and `=` stepping down
to the 20px Spec-unit role beside it, so the pair reads `w=1200`, `crop=smart`,
`fm=avif` with the number carrying the scale. They are **live**: move the `w` fader and
the readout beside plane 2 counts to its new value in the same frame the plane resizes.
**Plane 1 carries no readout, only its `ORIGIN` overline** — it has no parameters, and a
readout beside it would be an invented one.
**The encode plane is deliberately unchanged, and that is the design's most important
sentence.** A browser cannot re-encode an image to AVIF and show you the artifact, and
this system will not fake one: there is no blur applied to suggest compression, no
mosquito noise drawn in, no file size ticking down beside it. The plate looks exactly
like plane 3 **because at this scale that is the truth** — and its readout still says
`fm=avif`, because the page can determine that honestly. It runs a **real decode
probe** on load (decoding a 1px AVIF, then a 1px WebP, via an `Image` object) and
prints the format this browser would actually be negotiated into by `fm=auto`'s
`Accept`-header handshake — `avif`, `webp`, or `jpeg`. If the probe cannot run, the
readout prints `auto` and never a guessed format. The plane is tagged `SERVER-SIDE` in
cyan, and the honesty of that tag is the reason the visitor should believe the other
three readouts.
**The connectors.** Between corresponding corners of adjacent planes run **thin 1px
lines**, stroked with a gradient from `--cyan` at the source end to `--magenta` at the
encode end, carrying the one emissive glow this system permits. They are `<line>`
elements inside a single `<svg>` overlaying the scene — and **every endpoint is
computed from the live layout**, read off each plane's rendered corners with
`getBoundingClientRect()` and recomputed on resize and on every parameter change. This
is the rule that keeps the hero from becoming a drawing:
> **If a connector can be drawn without measuring the plates, it is decoration and
> must be deleted.** No hand-authored path data. No arrowheads. No callout bubbles, no
> leader lines, no schematic symbols, no icons, no swooshes. The connectors exist only
> to state where a corner of one plate went in the next.
### 2. The instrument panel — the parameter playground's control surface
The playground **is** the hero — the panel and the stack are one object, and moving a
control mutates the plane that owns it. The panel is a `--panel` slab at 4px radius,
40px padding, sharing the hero band with the stack on desktop and sitting beneath it
below 1024px. **There is exactly one control surface in this design.** The demo band
below does not get a second one.
Every control is a **channel strip**, and a console is read *down* its channels, not
across its rows. So the four columns hold their positions on every strip, at fixed
widths, in one order: the **channel marker** — a 6px square, `--hairline-strong` when
unset, `--magenta` when set — is the strip's status lamp; the **key** in the 12px
Overline role is its name; the **control** occupies the middle; and the **live value**
sits at the right in Chivo Mono, flush against a common right rule, so the readings
form a single column that can be scanned for a wrong number without reading a single
row. A 1px `--hairline` separates the strips. Because the mono is tabular by
construction and the column is set from the right, a value that gains a digit moves a
digit and never moves the column — an instrument whose scale shifts when its reading
changes is an instrument nobody trusts. The seven interactive
channels are exactly the seven **browser-honest** parameters — the ones a browser can
genuinely apply to a real image, live, with no server and no lying:
| Channel | Control | Honest browser mechanism | Mutates |
| ------- | -------------------------------------------------------- | ----------------------------------- | -------- |
| `w` | Horizontal fader (a 4 × 20px bar on a 2px track) + numeric field | Rendered width of the plane | Plane 2 |
| `h` | Horizontal fader + numeric field | Rendered height of the plane | Plane 2 |
| `rot` | Hard-edged 3-cell selector: `90` `180` `270` | `transform: rotate()` | Plane 2 |
| `blur` | Horizontal fader, 0–100 | `filter: blur()` | Plane 2 |
| `fit` | Hard-edged 4-cell selector: `cover` `contain` `fill` `crop` | `object-fit` | Plane 3 |
| `crop` | Hard-edged 3-cell selector: `smart` `center` `edges` | `object-position` | Plane 3 |
| `bg` | Row of 24px square swatches + a hex field | The plane's background colour | Plane 3 |
**Manipulating any control mutates its plane immediately and rewrites the URL string
across the bottom of the panel.** Nothing here is a mock-up: if a control moves and the
photograph does not, the design has failed.
The selectors are **hard-edged segmented banks** — 2px radius cells divided by 1px
`--hairline` verticals. The selected cell takes a `--panel-raised` fill, its label steps
`--ink-mid` at weight 400 (the Body S role) → `--ink` at weight 700, and it carries
`aria-checked="true"`. Three signals at once — a tonal step, a weight step, and a
semantic state — and **not one of them is chromatic.** The hairlines measure 1.3:1 and
carry no contrast at all, so no cell's identity may rest on its divider; and no cell's
state rests on a hue either. Note what is *absent*: there is **no
magenta inside a selector cell**, because magenta on `--panel-raised` measures 2.99:1
and fails even the non-text bar. The voltage marks the channel from outside, on the
`--panel` surface, where it measures 3.62:1 — that is what the channel marker is for.
**These banks are not pills, they are not chips, and they do not round.**
Four rules govern the panel, and they are the design's integrity clauses:
- **`fm`, `q`, and `dpr` are readouts, not controls.** They sit as three inert rows at
the foot of the panel, each tagged **`SERVER-SIDE`** in the cyan Overline role, with
no fader and no selector and no marker. They appear in the URL string in `--ink-mid`
rather than `--ink`. They are labelled that way because that is what they are:
`fm=auto` negotiates AVIF → WebP → JPEG from the request's `Accept` header, and a
browser cannot demonstrate a re-encode. `dpr` prints the visitor's real
`devicePixelRatio`, clamped to the brief's 1–3, because the browser honestly knows it.
**A staged reading is still a reading, and it would be a false one.** Running a payload
counter down beside the plate, or printing a byte count that nothing on this page ever
measured, puts a fabricated figure on an instrument whose entire claim is that its
figures are measured — and puts it there at 88px, in the largest type the system owns.
**Every number in this system is taken from the brief or it is not displayed.** The tag
is what the panel prints in the place where the fabrication would have gone.
- **An unset parameter is absent from the URL.** There is no `rot=0` and no `blur=0` in
the string, because the brief defines `rot` as `90`/`180`/`270` and this design does
not invent a fourth value. An unset channel shows an `--ink-dim` placeholder, its
marker stays `--hairline-strong`, and it contributes nothing.
- **`bg` is inert unless `fit=contain`.** The brief scopes `bg` as the background fill
*for `contain`* — so the channel is disabled (`aria-disabled="true"`, key in
`--ink-dim`, swatches unclickable) in every other fit mode, and goes live the moment
`contain` is chosen. This is the one conditional in the panel and it is not
decoration: it is the spec being honest about what the parameter is for.
- **`bg` is the visitor's data, never the system's chrome.** A `bg` value is not a
system hue like the voltage or the flow — it is the API's own output being
demonstrated, and it lives in exactly one place: the letterbox painted inside the
preview plate (plane 3, mirrored on plane 4 and the before/after pair) the moment
`fit=contain` is live. It is never allowed to leak outward into a brand surface: no
button, band, card, panel, nav, or focus state ever takes a visitor's `bg` value as
its fill. The control that offers it stays a **neutral control carrying a sample, not
a piece of coloured UI**: each swatch is a 24px square with the same 1px
`--hairline-strong` border and 0px corner every other control in the panel carries,
so the chip's frame is system type regardless of what it previews, and no swatch ever
takes a glow, a magenta ring, or any emphasis the system reserves for its own two
hues. The preset row stops at **five swatches** — `--canvas` graphite, white, and
three neutral greys between them. Five is the count that demonstrates a letterbox has
an edge; a sixth would begin a palette, and a console does not get to grow a palette
it has no channel for. A visitor's own colour, chromatic or not, enters through the
hex field beside them — and it enters the plate, never the chrome. `bg` therefore
cannot be read as licensing a third hue in the interface: the interface's own
vocabulary stays the voltage and the flow, and nothing else.
The URL string runs across the foot of the panel in the 16px Chivo Mono URL role with
`zero`, its **parameter keys in `--cyan`** and its values and syntax in `--ink`. It
opens at the brief's own request form — `https://demo.refract.dev/hero.jpg?w=1200&fm=auto&q=80`
— and the seven channels rewrite it live. A hard-edged `COPY URL` button
(`button-outline`, 2px) sits at its right. **There is no orb, no circle, and no round
control anywhere near it.**
> `q` reads **80** in the demo URL and **75** in the docs table, and both readings are
> correct. The brief specifies a default of **75**, then writes its own request form
> with **`q=80`** — a default and an explicit value are two different quantities, and
> an instrument prints what it is given rather than what would tidy up. Do not
> reconcile them. Agreement here would have to be manufactured, and nothing in this
> system is permitted to manufacture a reading.
### 3. The spec strip
The reference's proof band, transplanted intact. Four **88px figures** in tabular
lining numerals on a hairline-divided 4-up grid, each with its unit stepped down to
the 20px Spec-unit role and its label below in the 12px Overline:
```
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 `--magenta`** (3.96:1 against
the 3:1 large-text bar at 88px). Within it, only the numeral carries the voltage: `62`
sits in the 88px Spec-readout role in `--magenta`, exactly like every other readout in
this system; the `%` sign is the unit, and it steps down to the 20px Spec-unit role in
`--ink`, the same as `ms` beside `21`. The split is not stylistic — the Spec-unit role
sits at 20px, under the 24px floor `--magenta` is barred from entirely (see the ration
in Palette), so the unit glyph is never a candidate for the voltage. The other three
figures are `--ink` (18.1:1). That is the reference's own move: the number that carries
the argument gets the voltage.
**No icons, no sparklines, no charts, no count-up animation, no card, no shadow.** An
instrument does not animate its own reading; it displays it. The same strip form carries
the caching & limits band on docs (`50` req/s · `30` days · `41` edge locations) and the
prices on pricing.
### 4. The before / after pair
The live-transform demo band, and the flat counterpart to the tilted hero. Two
square-cornered plates side by side on a `--panel` band: **plane 1 on the left, plane 4
on the right** — the same photograph, untransformed and transformed, both at 0° with no
perspective, so the visitor gets one undistorted read of the result the tilted stack
can only show at an angle. It is **not a second playground**: it holds no controls and
reads from the same state the hero panel sets. There is no second image asset and no
"optimized" version generated ahead of time — the right plate is the left plate under
`object-fit`, `object-position`, `transform`, `filter`, and a background colour, which
is precisely why those seven parameters and no others are the interactive set.
Beneath the pair, a Caption line names what changed, and **it names parameters, never
bytes.** Below 640px the pair stacks vertically; it never becomes a drag-slider
comparison, which would hide half of each image at all times.
## Components
- **Nav bar.** `--canvas`, **64px** tall, 1px `--hairline` beneath, 24px horizontal
padding. The wordmark **Refract** sits flush left in the 22px Heading role at
Archivo 800. Three page tabs — **Home · Docs · Pricing** — in the 14px Nav role at
`--ink-mid`; the active tab takes `aria-current="page"`, a **2px `--magenta`
underline** (3.96:1, a non-text mark), and a step to `--ink` at weight 700, so its
state never rests on the colour alone. Flush right: one `button-primary` reading
**"Start building"**. **The tabs are type only.** No icon sits beside a tab and no
badge sits above one: a badge is a *reading*, and there is no reading in the brief
that says a capability is new. An empty slot in a component is not a reason to
manufacture one.
- **`button-primary`.** `--magenta` (`#E4007C`) fill, `--ink` white label at the 15px
Button role (**4.58:1 — measured, passes AA**), **2px** radius, 48px tall, 14 × 28px
padding. Press flips the fill to `--magenta-deep` (6.66:1) — **no transform, no
shadow, no lift.** This is the site's primary action; it appears at most twice per
page. **It is a rectangle. The reference's pill does not survive** — a 9999px CTA in
a system whose every other corner is ≤ 4px would be the one soft thing on a cold
page, and the coldness is the identity.
- **`button-outline`.** Transparent fill, `--ink` label, 1px `--ink-faint` (`#8B9199`)
border, 2px radius, 48px tall. The `COPY URL` action, the three tier CTAs, and every
secondary action. **No tier CTA is ever `button-primary`:** the three cards are
identical in weight, and putting the voltage under one of them would rank it — which
is a reading this design was never handed.
- **`button-tertiary`.** No fill, no border, label in **`--magenta-bright`**
(`#FF2EA6`, 5.35:1) — the one magenta stop cleared for small text. Underlined on
hover. Used for inline links and the FAQ disclosure rows.
- **`channel-strip`.** One channel of the console, and every channel is built to the
same four fixed columns in the same order: a 6px square marker, a 12px Overline key,
a fader / selector / swatch row, and a Chivo Mono reading flush to the right rule.
1px `--hairline` between channels. 0px corners on the marker; 2px on the control.
- **`selector`.** A hard-edged segmented bank on `--panel`: cells at **2px** radius, 1px
`--hairline` dividers, labels at 14px `--ink-mid`, weight 400 (the Body S role).
Selected takes a `--panel-raised` fill **and** a step to `--ink` at weight 700 **and**
`aria-checked="true"` — three signals, none of them chromatic. **No magenta ever
enters a cell** (2.99:1 on the raised fill). **Not a pill. Not a chip. Never rounded
past 2px.**
- **`fader`.** A 2px `--hairline-strong` track with a hard-edged **4 × 20px
`--ink` bar** as the thumb. Focus draws the 2px `--magenta` ring around the bar. **It
is not a knob and it is not round.** The numeric field beside it is a `text-input`.
- **`text-input`.** `--panel-raised` fill, `--ink` text, 1px `--hairline-strong`
border, **2px** radius, 14 × 16px padding, 48px tall. Placeholder is **`--ink-mid`**
(6.2:1) — *not* `--ink-faint`, which measures 4.30:1 on this fill and fails AA, and
*not* `--ink-dim`, which collapses to 2.9:1 there. Focus replaces the border with a
**2px `--magenta` ring at a 2px offset**, so the ring lands on `--panel` (3.62:1) and
never on the raised fill (2.99:1). The error state keeps the ring and adds a message
in `--magenta-bright` (5.35:1) — and it is **reachable from one field only, the `bg`
hex** (see the third-hue rule in Palette): a `w`/`h` numeric field takes an integer
the brief sets no ceiling on, and there is no other free text in the panel.
- **`capability-card`.** `--canvas` on `--canvas`, **0px** radius, 1px `--hairline`,
with the photographic plate bleeding to all four of the card's inner edges and the
copy beneath it in 40px of padding: the title in the 28px Display M, a paragraph in
Body `--ink-soft`, and a figure line in the Data role with `tnum`. The three
capabilities — **Transform**, **Optimize**, **Deliver** — are three of these. The card
is 0px precisely so the photograph can be square: **a photographic plate is never
clipped by a radius in this system.**
- **Spec table.** The ten-parameter reference, built as a **printed instrument table**:
full-width hairline-divided rows, 12px of vertical padding, a 1px `--hairline` above
and below the block, the head row on `--panel-raised` in the Overline role at
`--ink-mid` (6.2:1 on that fill). **No card, no shadow, no zebra striping, no border
box, no rounded container.** Four columns: the
**parameter name in Chivo Mono `--cyan`**, the accepted values in Chivo Mono `--ink`,
the description in Body S `--ink-soft`, and a tag column. The `fm`, `q`, and `dpr`
rows each carry the `SERVER-SIDE` tag; the other seven do not. Defaults the brief
states (`q` default 75) are printed; defaults it does not state are not invented.
- **`server-side-tag`.** A **square** (0px) 12px uppercase tag in the Overline role,
`--cyan` text on a transparent fill with a 1px `--cyan` border, 2 × 8px padding,
reading `SERVER-SIDE`. It marks the three negotiated parameters in the URL string, in
the panel, on the encode plane, and in the docs table — and it is used for nothing
else. **It is never magenta.** Magenta is the voltage, and there is nothing live about
a parameter this browser does not touch.
- **Code block.** `--panel` fill, **4px** radius, 40px padding, no border, no shadow.
Chivo Mono at 14px / 1.6 in `--ink` (16.6:1) with `zero`. A `button-outline` "Copy"
sits at its top-right. **The only colour inside it is `--cyan` on the parameter
keys** (6.8:1 on `--panel`) — the flow colour marking the flow. There is **no syntax
highlight palette**: no keyword colour, no string colour, no comment colour. This
system has two chromatic elements and will not spend either on a language grammar.
- **`tier-card`.** `--panel` fill, **4px** radius, 1px `--hairline`, 40px padding. In
order: the tier name in the 28px Display M, the **price in the 88px Spec-readout role
with `tnum`** (`$0` / `$29` / `$249`) with `/mo` stepped down to the 20px Spec-unit, a
full-width `button-outline` CTA, and a quota ledger beneath in the Data role with
`tnum` — transforms, bandwidth, support, and the tier's extras, each figure set
against its label and locked to the same right rule, so the three cards are compared
by reading down a column rather than across a card. **No tier is marked "recommended,"
"popular," or "best value."** Nothing in the brief ranks the three. A preference is a
measurement this design was never given, and it does not manufacture measurements.
- **FAQ row.** A full-width disclosure row, 1px `--hairline` between rows: the question
in the 22px Heading role, a **square** 32px `--panel-raised` chevron button (0px) at
the right, and the answer in Body `--ink-soft` when open. **No card, no fill, no
shadow, no accordion box.**
- **Footer.** `--canvas` — **the same graphite as the page.** The reference closes on a
dark footer and so does this one, but here that is not a contrast band, because there
is nothing lighter to contrast with. A 1px `--hairline` top rule, 64 × 24px padding,
multi-column `--ink-mid` links in Body S, closed by a `--micro` legal row in
`--ink-dim` (3.8: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, mechanical, and never decorative.** The design's job is to make an
instrument feel immediate, and that is the only thing motion is spent on.
- **The stack assembles once.** On load, the four planes travel from flush (a single
flat photograph) to their exploded `translateZ` positions over **400ms
`cubic-bezier(0.2, 0, 0, 1)`**, and the connectors draw in behind them. It happens
once, on the index hero, and never again. **It is not scroll-triggered, it does not
replay, and it does not loop.**
- **The tilt is fixed.** No pointer-tracking rotation, no scroll parallax, no
scroll-jacking, no reveal-on-scroll anywhere on the site.
- **The preview responds instantly.** A control change repaints its plane and the
before/after pair within one frame. There is no artificial delay, no skeleton, and no
shimmer. A spinner here would be an instrument reporting a latency that is not
occurring: the operation is a CSS transform applied to an image already decoded in
memory, and the honest reading of that operation is that it is finished. The 88px
plane readouts change with the plane, in the same frame.
- **No count-up on the stats band.** A gauge that sweeps up to its value before settling
on it is a gauge that has been asked to sell the measurement.
- Hover and focus are **colour, border, and fill swaps only** — 120ms ease-out, **no
transform, no scale, no lift, no bounce, no spring.** No element in this system
carries a `box-shadow` at rest or on hover.
- **Focus is a 2px `--magenta` ring** at a 2px offset (3.96:1 on `--canvas`, 3.62:1 on
`--panel` — both clear the 3:1 non-text bar), on every interactive element, and it is
never removed.
- Under **`prefers-reduced-motion: reduce`**, the stack **renders already exploded** —
final positions, connectors drawn, no assembly — and every transition is dropped.
**No reading on this page is carried by movement**, the hero included: the exploded
state is the readable state, and the assembly only ever showed how it got there.
## Image treatment
**The bundle is shot under one lighting setup and it is never re-lit.** Every image in
this system is a **real photograph** in the engineering-theatre register: a machined or
optical object on a graphite surface under **hard, cool, directional light**, throwing
a deep hard shadow *inside the frame*, on a near-black ground that matches `--canvas`
so the photograph appears to be *set into the page* rather than pasted onto it. A
second photographic mode would be a second light source, and a bench that changes its
lighting between measurements is not reporting the same experiment twice. All the
shadow, all the depth, and all the warmth this design has lives inside a photograph —
which is exactly why the interface around them is flat metal with two voltages.
**Nothing in this system is drawn, and that prohibition is absolute.** There is **no
illustration, no vector art, no icon set, no diagram, no schematic, no exploded-machine
render, no chart, no 3D render, and no AI-generated artwork of any kind.** The
reference's most reproduced object is a *machine* sliced open — and this design does
not depict a machine, a device, a server, a chip, a rack, a cloud, or a pipeline, in a
photograph or anywhere else. The exploded hero is built from **real photographs, CSS 3D
transforms, and connector geometry computed from the live layout**; the crop rectangle
is a CSS border on a positioned element; the channel markers are CSS squares. If an
asset cannot be photographed, it is built in CSS — and if it can be neither, it does not
belong on this site.
**The prompt specification.** What follows is written as tolerances, not as taste: an
image is measured against them and it either passes or it is scrapped. A frame that
fails one of these is re-shot from the staging up. It is never accepted and cropped
back into compliance, because a crop hides a fault, and a hidden fault is the one thing
this design has no vocabulary for.
1. **Every specimen is unmarked.** Each prompt must state, explicitly and 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, no engraving, and no stamped or etched marks** —
not on the metal, not on the surface, not in the background, not anywhere. The model
will otherwise emboss something that looks like a maker's mark and is not one: a
plausible glyph, a serial that decodes to nothing, a badge belonging to no company.
That is counterfeit branding, and it is also a lie about a measurement. **This page
states its numbers in one place — the readout.** A photograph that also carries a
figure is a second, unverifiable instrument in the same frame, and the part is
anonymous precisely so it cannot become one.
2. **No people and no hands. Not one, not in the background, not out of focus.** Two
reasons, one mechanical and one structural. Mechanically, the model builds a hand out
of guesswork and fuses the fingers into a mass with no knuckles in it; further
attempts do not converge on an anatomy, so **the hand is removed from the staging
rather than argued with in the prompt.** Structurally, every photograph here is *an
input under test*, and a bench does not put an operator in the frame with the
specimen. Put a person in the shot and the page has quietly begun claiming something
else.
3. **The frame is empty around the subject, and the emptiness is commanded.** State it
in each prompt: **near-black graphite ground, nothing else in the frame, no props, no
secondary objects, no tools, no clutter, no visible room or horizon.** An image that
fills its corners with incidental detail has broken the design even if every object in
it is beautiful.
4. **`hero-plate` must survive being taken apart.** It is cropped to 1:1, blurred to
100, rotated 270°, and letterboxed against a `bg` colour — live, in front of the
visitor, four times over in the hero and twice more in the demo band. **A specimen
that only holds up at one setting is not a specimen, it is a portrait, and a portrait
cannot be used to demonstrate a range.** And **its subject must sit well off-centre.**
`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. Centre the subject and `smart`
and `center` return the same rectangle: the control and the treatment agree, the
channel discriminates nothing, and the visitor has been shown a label instead of a
result. Set it off-centre and the two crops differ visibly, which is the only
condition under which the reading can be checked.
Under those four, the lighting setup is carried into every prompt unchanged, word for
word, the way a rig is left bolted down between shots: **hard cool directional light,
deep hard shadow, near-black graphite ground, machined and precise, cold, still,
engineering product photography, no people, no text.** No image ever has type set on
top of it, every plate is square-cornered, and no plate is ever clipped by a radius.
Needed images (referenced `./assets/<id>.webp`):
- `hero-plate` (4:3) — A solid clear glass prism standing on a graphite surface, a
hard cool directional beam raking across it from the right and splitting inside the
glass, the prism set well off-centre to the left of the frame, deep hard shadow,
near-black ground, nothing else in frame, no text, no lettering, no numerals, no
labels, no logos, no brand markings, no signage, no engraving, no stamped or etched
marks, no people, no hands.
- `capability-transform` (4:3) — A stack of thin brushed-aluminium plates fanned
slightly apart on a graphite surface, hard cool side light picking out each edge,
deep hard shadow, near-black ground, no props, no text, no lettering, no numerals, no
labels, no logos, no brand markings, no signage, no engraving, no stamped or etched
marks, no people, no hands.
- `capability-optimize` (4:3) — A fine perforated steel mesh filling the frame edge to
edge, hard cool raking light picking out the grid of holes, sharp macro detail, cold
near-black tones, no text, no lettering, no numerals, no labels, no logos, no brand
markings, no signage, no engraving, no stamped or etched marks, no people, no hands.
- `capability-deliver` (4:3) — A long row of identical polished nickel cylinders
receding into darkness, hard cool light falling across the nearest and dropping off
sharply, near-black ground, no text, no lettering, no numerals, no labels, no logos,
no brand markings, no signage, no engraving, no stamped or etched marks, no people,
no hands.
- `docs-origin` (1:1) — A single blank unmarked machined aluminium plate lying flat on
a graphite surface under hard cool directional light, the plate completely empty, no
text, no lettering, no numerals, no labels, no logos, no brand markings, no signage,
no engraving, no stamped or etched marks, nothing else in frame, no people, no hands.
- `pricing-hero` (3:4) — A tall column of stacked graphite blocks receding upward, hard
cool light from above raking one edge into a deep hard shadow, near-black ground,
nothing else in frame, no text, no lettering, no numerals, no labels, no logos, no
brand markings, no signage, no engraving, no stamped or etched marks, no people, no
hands, tall portrait.
## Do / Don't
Do:
- Keep the floor graphite (`--canvas` `#141618`) and every grey cool. The nav, the
page, and the footer are the same graphite, and **there is no light band anywhere.**
- Open the index with the **exploded photograph**: four `<img>` planes of one real
photograph in a 3D stack, thin magenta-cyan connectors whose endpoints are read off
the live layout, and an 88px readout beside each of the three transform stages.
- Keep the instrument panel and the stack **one object**: moving a control mutates its
plane in the same frame, and there is exactly one control surface on the site.
- Keep the seven browser-honest parameters (`w` `h` `fit` `crop` `rot` `blur` `bg`)
interactive and genuinely wired to the photograph, and keep `fm` `q` `dpr` as inert
readouts tagged `SERVER-SIDE` in the URL, the panel, and the docs table.
- Set every headline figure in the 88px Spec-readout role with `tnum`, unit stepped
down to the 20px Spec-unit — the stats band, the caching strip, and the tier prices.
**The stats band is a readout, not a caption**, and it is the loudest thing on the
index page after the hero.
- Hold display type at weight **800** with tight negative tracking (-1px to -2px), and
keep both voices sans: Archivo for everything, Chivo Mono for the URL, the code, the
parameter names, and the panel's value column.
- Give the panel, cards, and code block **4px**; buttons, inputs, and selector cells
**2px**; plates, bands, tables, tags, and the footer **0px**.
- Spend the voltage by **shape, not by count**: magenta is a fill under a white label,
a 1–2px mark, an 88px figure, or the focus ring — and never anything else. Cyan is
the flow: source-side connectors, parameter keys, and the `SERVER-SIDE` tag.
- Keep `--ink-soft` (11.5:1) and `--ink-mid` (8.2:1) for anything a visitor must read;
keep `--ink-faint` (5.7:1) off `--panel-raised`; keep `--ink-dim` (3.8:1) for
disabled labels only.
Don't:
- **Never draw a machine.** No illustrated pipeline, no exploded-machine diagram, no
schematic, no icon, no vector art, no AI-generated illustration. The only depicted
object in this system is a photograph. If a connector could be drawn without
measuring the plates, delete it.
- **No paper, no cream, no white page background, and no light band.** The page never
inverts. A white canvas is `aperture`, and a paper canvas is `folio` or `carton` —
three different designs.
- **No third hue.** No green success, no amber warning, no separate error red, no blue
link, no syntax-highlight palette. Two chromatic elements: the magenta→violet
voltage and the cyan flow.
- **Neither voltage is ever a large fill background** — not a band, not a card, not a
panel. The only blend of two stops is the violet→magenta atmospheric wash behind the
hero stack, and it never sits behind body copy.
- **`--magenta` (`#E4007C`) is never text below 24px** — 3.96:1 fails AA body. Small
magenta text is `--magenta-bright` (5.35:1), which in turn is **never a fill** (white
on it is 3.39:1). `--magenta-deep` (`#B4006B`) is a press fill and **never text**
(2.72:1).
- **`--violet` never carries meaning** — 2.2:1 fails even the 3:1 non-text bar. Gradient
wash only.
- **No chromatic token on `--panel-raised`** — magenta measures 2.99:1 there and fails
the non-text bar.
- **`--ink-dim` (`#6E747B`) is never body copy** — 3.8:1 fails AA — and it never appears
on `--panel-raised` (2.9:1). **`--ink-faint` (`#8B9199`) is never used on
`--panel-raised` either** (4.30:1).
- **No radius above 4px. No pill, no chip, no circle, no orb, no knob, no round
anything.** A 9999px radius is `aperture`'s language.
- **No `box-shadow` anywhere** — at rest or on hover, on any element. Depth is the tonal
step, the hairline, the 3D transform, and the shadow inside a photograph. The one
emissive glow belongs to the connectors and the crop rectangle, and to nothing else.
- **No serif anywhere**, and no light display weight. No rounded or humanist substitute
face — it erases the engineered coldness.
- **No faked encode.** The encode plane is visually identical to the frame plane, no
compression artifact is drawn in, and **no byte count, no file size, and no payload
figure appears anywhere beside the preview.** The format is determined by a real
browser decode probe or it prints `auto`.
- **No count-up animation, no charts, no sparklines, no pointer-tilt on the stack, no
scroll parallax, no reveal-on-scroll.**
- **Every figure on this site is a reading, and a reading has a source.** These are the
ones the brief supplies — 62%, 21 ms, 98.6%, 99.95%, 41 edge locations,
89 ms / 340 ms, 50 requests per second, 30 days, $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 — and a design
that sets its numbers at 88px has forfeited the right to make one up. No "most
popular" tier, no "NEW" badge, no latency the brief did not supply, and no byte count
beside the preview. **A number with no source is the only real defect this system can
have.**
- No emoji anywhere, and **no naming of the source reference in the built page** — the
reference is named in this document's prose only. The site carries the product's own
name, **Refract**, in English, and nothing else.