TITLE
Halden Grotesk — A Type Specimen

PROMPT
A type specimen for a typeface that does not exist as a font file: "Halden Grotesk", from an invented foundry, "Nordre Type, Halden". Every display glyph on the page is drawn as hand-authored SVG path data (a geometric-grotesk design with a few distinctive features), so the specimen can show what font files hide: the bezier skeleton, on-curve and off-curve points, handles, metrics lines and construction circles. Concept: a specimen that x-rays its own letters.

Mood: clinical, exacting, Scandinavian; a foundry that numbers its screws. Palette: specimen paper off-white #F4F2EC, cobalt #1238D6 as the single colour (construction lines, points, highlights, one giant letter), black #0B0B0B. Light page, large flat areas, razor-thin rules.

The glyph set: design and draw as SVG paths a consistent set: at minimum the capitals H A L D E N G R O T S K, the lowercase a e g n o r s t k d l, and numerals 0–9 would be ideal but at least 1 2 5 8; all sharing stroke weight, x-height, cap height, overshoots and terminals cut at consistent angles. Distinctive features to make it a design, not a default: a single-storey "a" with a flat-cut terminal, a "G" with a spur-less straight jaw, an "R" with a straight diagonal leg, a "t" with a slanted top cut, perfectly circular "O". As built: 12 capitals, 11 lowercase, numerals 0–9, comma and full stop (35 glyphs); curved terminals are cut vertically throughout. Each glyph is stored as explicit points (on-curve and control points) so that the same data renders both the filled glyph and its skeleton overlay. Other text on the page uses a neutral system grotesk (Helvetica/Arial) and a monospace for data.

Structure (long scroll, strong grid, each section numbered in mono): 01 Cover: the word "Halden" set enormous, cropped by the viewport edges, black on paper, with a cobalt "Grotesk" small beside it and foundry line "Nordre Type · Specimen No. 4 · 2 weights drawn, 7 promised". 02 "Anatomy": one giant glyph (default "a", selectable from a strip of all glyphs) on a metrics grid with labelled baseline, x-height, cap height, ascender, descender, side bearings, and the outline shown with points (squares for on-curve, circles for off-curve) and handles in cobalt, coordinates in tiny mono beside each point. 03 "Construction": the O, G and D with their construction circles and tangent lines, overshoot exaggerated in a callout ("the O is 12 units taller than the H. It has to be, to look the same."). 04 "In use": a waterfall of sample settings built from the drawn glyphs: words that can be composed from the available letters at several sizes ("HALDEN", "GROTESK", "LONGER NORTHERN SHADE", "stone, salt, strand", "TOLL ROAD ENDS"), a short text line and figures, a nine-weight row (Regular and Bold drawn, seven shown as empty "promised" boxes), a mock poster ("LETTERS DRAGGED ASHORE", cobalt field with a giant black g) and a mock signage panel (ferry terminal wayfinding). 05 "Spacing": a kerning demonstration with two glyphs whose gap the viewer can drag, numeric value updating, and a correct value that snaps with a tick; four pairs to choose from (T o, L T, A T, k e). 06 Colophon: the invented designer Solveig Aamodt's short note on why the "a" has one storey, licensing joke ("Desktop licence: one handshake"), a giant cobalt "a", and the character set grid (undrawn letters shown hatched).

Signature moment: glyphs draw themselves from their bones. When the Anatomy section enters (and whenever a new glyph is selected), the points appear first in sequence with coordinate labels ticking, then handles extend, then the outline strokes on along the path direction (stroke-dashoffset), then the fill floods in with a crisp wipe; a toggle switches the whole page between "ink" (filled), "outline" and "x-ray" (skeleton + points over ghost fill), and in x-ray mode every display glyph on the page shows its points. Dragging any point in the Anatomy view actually deforms the glyph live (the path updates), with a "reset drawing" control: the viewer can ruin the "a" and put it back. The Anatomy drawing is the master: every instance of that letter elsewhere on the page (cover included) deforms with it. A selected point can also be nudged with the arrow keys. On load, the cover word assembles the same way in a staggered 1.5 seconds.

Interaction details: hovering a glyph in the character grid enlarges it and shows its advance width and point count; keyboard: typing a letter that exists selects it in Anatomy; unavailable letters shake a tiny "not drawn yet" tag in mono. Focus rings in cobalt. Motion: precise, linear-ish, no bounce: cubic-bezier(.4,0,.1,1), 200–700ms; grid lines extend from the margins. Reduced motion: glyphs appear complete; x-ray toggle still works. Responsive: the giant glyph scales to width; point labels thin out on phones.

DESCRIPTION
A long-scroll specimen for Halden Grotesk, an invented geometric grotesk from the invented foundry Nordre Type, in which no font file exists: all 35 glyphs are stored in the page as explicit on-curve and off-curve points and drawn from that data. The page is clinical and Scandinavian: specimen-paper off-white, black, and a single cobalt used for construction lines, points and one giant letter, organised on a twelve-column grid with hairline rules and mono section numbers. The cover crops an enormous "Halden" at the viewport edges and assembles it from points, outline and a rising flood of ink. Anatomy pins one glyph out on a metrics grid with every coordinate labelled and every point draggable; because that drawing is the master, damaging the "a" damages every "a" on the page until it is reset. Construction shows the compass work behind O, G and D and an eight-times vertical exaggeration of the overshoot; In use sets a waterfall, a weight row, a poster and ferry-terminal signage from the drawn letters only; Spacing lets the viewer kern a pair by hand until it snaps to the foundry's value; the Colophon carries the designer's note, a licensing joke and the full character grid with its gaps.

VISUAL TECHNIQUES
- Hand-authored glyph outlines (lines and cubic beziers, 1000 units per em) parsed into a shared point model that renders fill, outline, handles and points from the same data
- Inline SVG text setting with a kerning table, per-word wrapping and size control through a single CSS variable
- Three global rendering modes (ink, outline, x-ray) switched by a root attribute; x-ray overlays are built lazily as compact zero-length-stroke point paths so hundreds of glyphs stay cheap
- Staged drawing sequence: points appear in order with ticking coordinate labels, handles extend, contours stroke on with stroke-dashoffset, fill floods upward with a clip-path wipe
- Metrics grid with baseline, x-height, cap height, ascender, descender, side bearings and advance, lines extending from the margins
- Greedy label collision thinning and screen-constant point and stroke sizes via a per-SVG units-per-pixel variable
- Construction circles and tangents drawn in cobalt and inverted to paper where they cross the black glyph, using the glyph itself as a clip path
- Broken-view overshoot diagram with non-uniform vertical scaling
- Faux bold weight by outline expansion; flat cobalt poster and black signage panel with drawn arrows
- Hatched character grid distinguishing drawn from undrawn glyphs; reduced-motion variant with all glyphs complete

INTERACTION MODEL
A fixed three-way toggle (Ink, Outline, X-ray) re-renders every drawn letter on the page; in X-ray each one shows its points and handles. In Anatomy, choose a glyph from the strip, click one in the character grid, or simply type a character: available ones are pinned out and redraw themselves from their bones, unavailable ones raise a small shaking "not drawn yet" tag. Drag any square or circle (mouse or touch) to deform the glyph live; on-curve points carry their handles, a selected point moves with the arrow keys (Shift for ten units, [ and ] step between points), and all other instances of the letter on the page follow. "Redraw" replays the sequence and "Reset drawing" restores the master. In Spacing, drag the cobalt letter sideways or use the arrow keys; the kern value, state label and ruler update, and within six units of the foundry's value the pair snaps, turns black and a tick is drawn; four pairs can be chosen. Hovering or focusing a cell in the character grid enlarges the glyph and shows its advance width and point count; signage arrows nudge on hover; index links jump between the six numbered sections.