How CONE TEN was made — Generative Assets

01Palette

Every colour is drawn from the kiln itself — the dark of the chamber, the brick, the light coming off the ware at temperature, and the two glazes worth arguing over.

Chamber: #191008 — the near-black inside of a cold kiln; the page's ground.

Kiln brick: #3A2A22 — hard refractory brick; panels, doors and the god's ledge.

Heat: #FF3D00→#FFE8A0 — the colour of the glow from 900° to 1300°; the firing curve is stroked in it.

Cone pale: #FFE8A0 — the top of the heat scale; the live pyrometer readout.

Celadon: #A8C5B4 — river-jade glaze, kept cool and scarce; links and the △10 marker.

Slip: #F0E4D0 — warm off-white for headings and body text.

02Type

Cone Ten

Instrument Serif. Its italic is doing the loud talking — the hero, the section heads and every verdict are set in it. It reads like a hand-lettered kiln log: warm, slightly irregular, and unafraid at 118px. The one moment of bravery is the hero's dropped, heat-coloured meant.

FIRE THE KILN

Karla. A plain grotesque for the instrument — readouts, warnings, chart labels and the controls. Tabular figures keep the pyrometer from jittering; wide uppercase tracking turns labels into panel signage rather than prose.

03Techniques

The heatwork model — the signature. Pure JS, no libraries.
SVG firing-curve editor: draggable nodes, pointer-capture, keyboard sliders (role="slider"), double-click to add or drop a step, live rate labels and a natural-cool preview.
Canvas 2D ember field in the hero (DPR-capped, resize-aware, paused on document.hidden).
SVG spy-hole: a radial glow interpolated across ten heat stops, with a three-cone pack that bends by its own accumulated heatwork.
SVG pots rendered from the firing result — clip-masked glaze sheets, seeded drips, speckle, crackle, blisters and shelf-welded runs.
CSS entrance choreography gated on document.fonts.ready with a timer fallback; a two-leaf kiln door opens on a crafted swing ease.

The kiln is real in the ceramic sense. A cone doesn't measure temperature — it measures heatwork, the integral of heat over time. The model samples your curve minute by minute and accumulates exp((T − 1288)/22) above 700 °C, calibrated so a 60 °/h climb bends cone 10 at exactly 1305 °C — sooner if you soak, later if you sprint. That single number, together with your peak, your soak minutes and your cooling rate, is fed to each glaze's own maturing window: tenmoku crystallises to tea-dust on a slow cool, copper red greys out without its soak, shino blisters past cone 11. Nothing is faked or rolled at random. Draw the same curve and you unload the same four pots — that is the whole point of the piece.

04Iteration log

Pass 1 — Craft

The smallest secondary text — the chart's axis numbers, the segment rate labels (+60°/h, HOLD 24m) and the drag hint — sat at roughly 4.3:1 on the dark chart. Lifted them to a warmer #A0–9C8A70 so every annotation clears 4.5:1.
Re-read spacing, radii and colour balance across the controller, glaze cards and stats; the type scale and heat/celadon accents were already coherent and left alone.

Pass 2 — Depth

Second-read detail: a seeded, rare firing-log line — a moth at the spy-hole, someone outside singing, the kiln god settling on his ledge. It surfaces on about one firing in eight and is deterministic per curve, so it rewards a second, closer firing rather than a refresh.
The kiln god now breathes a slow gold glow when a firing comes through perfect, instead of a static halo — the reward for pleasing him is alive.
Added quiet press feedback to the preset chips and step buttons so the instrument feels physical.

Pass 3 — Hardening

At 375px the wordmark wrapped to two lines and the nav's last link clipped off the edge (hidden by overflow-x, so it passed the width test but read as broken). Pinned the wordmark to one line and dropped the two in-page anchors below 560px, keeping Guide and Index.
Chanel rule: removed the blanket white gloss overlay on the glaze swatches — it lied on the matte tenmoku and shino chips. Their multi-stop gradients carry the depth honestly.
Verified headless at 1440 / 768 / 375: zero console errors, hero visible, no horizontal overflow; the reduced-motion path fires straight to a settled unload; the rAF loop pauses on a hidden tab and DPR is capped at 2.