← A-000 · back to the set

How this site
was drawn

01Concept & art direction

The site is a set of drawing sheets, because that is how an architect actually argues.

Axiom Atelier presents four museums with no photographs at all — every image is an SVG section or axonometric that draws itself, stroke by stroke, as you scroll into it, then floods with a single shadow tone. The page chrome borrows the conventions of a construction set: sheet numbers, title blocks, registration crosses, dimension strings. Structure is information — the numbering (A-000 … A-900) is a real drawing-set index.

02Palette — concrete greys, one ink

  • paper#E7E8E3
  • paper, deep#DCDED7
  • shadow#AAB1BF
  • ink#2038A0

Blueprint blue is the only ink; every rule, letter and stroke on the site is #2038A0 at varying opacity, exactly like line weights on a plotted sheet. The one permitted "colour" is shadow — a cool grey-violet that floods a drawing once it finishes, the way a rendered section gets its poché. No accent colour exists because a drawing set doesn't have one.

03Type — a drafting pair

Archivo · 62–125 width

Archivo (variable) supplies the architectural voice: display set ultralight and extended to 125% width — wide, thin capitals like letters scribed on a title sheet — while body text runs at weight 340 for quiet legibility. One family, twelve jobs, tuned by axis rather than by mixing faces.

Fragment Mono 0123.45

Fragment Mono does everything a pen with a stencil would: sheet numbers, dimensions, title blocks, data columns. Its slightly warm drawing of figures reads as annotation, not as code.

The pairing is the drafting table itself: the extended sans is the lettering guide, the mono is the dimension text. Project data sits in narrow columns like a title block, always uppercase, always letterspaced — hierarchy comes from convention, not from size alone.

04Technique — the drawing engine

Each drawing is hand-plotted SVG using drafting line weights (.s2 cut lines, .s1 profiles, .s05 light lines, .ray for daylight). On load, the engine measures every stroke and hides it with its own length:

els.forEach(function(el){
  var len = el.getTotalLength();
  el.style.strokeDasharray  = len + " " + len;
  el.style.strokeDashoffset = len;      // fully undrawn
  strokes.push({ el: el, len: len, start: total });
  total += len;                         // cumulative pen-length
});

Scroll position maps to a single progress value, and the cumulative length makes the strokes land in sequence — one pen, one line at a time — instead of all at once:

var drawn = p * total;                  // mm of ink so far
strokes.forEach(function(s){
  var d = clamp(drawn - s.start, 0, s.len);
  s.el.style.strokeDashoffset = s.len - d;
});
svg.classList.toggle("done",    p >= .86);   // dims fade in
svg.classList.toggle("flooded", p >= .995);  // shadow pochés

Annotations (dimension strings, level markers) live in a separate .annot group that fades in near the end; the .flood group carries the shadow polygons. With prefers-reduced-motion, the engine skips itself and every sheet arrives fully drawn and flooded.

The cover strip draws once on load with an eased 2.1-second pass — quick lay-in, careful finish — and each elevation in it is tied to the index table: hover a row and the matching building thickens its stroke, the way you'd tap a keyplan. Everything is hand-written; no animation library is loaded.

05Three passes over the board

  • Pass 1

    Correctness. The drawing engine was written and wired to every sheet: cumulative-length scrubbing, annotation fade, shadow flood, cover-strip load sequence, binding-edge nav state. Fixed the 404 that had left every dimension string and shadow invisible; zero console errors after.

  • Pass 2

    Elevation. Tied the index table to the key-elevation strip (hover lights the building), tightened the mid-draw thresholds so annotations land as the last strokes do, rebalanced the cover so the strip sits above the fold, and gave the interleaf manifesto more air.

  • Pass 3

    Taste. Chanel rule: removed a redundant dashed construction line from the axonometric rather than adding anything. Mobile check at 390px — title blocks wrap to two rows cleanly, drawings keep their dimension text legible. Reduced-motion verified: full set, instantly plotted.

06Do this yourself — a working method

  1. Pick the artifact your subject actually produces (a drawing set, a boarding pass, a lab notebook) and make the page BE that artifact, not a website about it.
  2. Write the constraint down before any CSS: here, "one ink, shadows are the only colour, no photographs." Give Claude the constraint, not a mood word.
  3. Choose one variable font and exploit its axes for hierarchy; add a mono only if your artifact genuinely has annotation text.
  4. Ask Claude to draw the imagery as inline SVG with real drafting conventions — line weights, dimension strings, hatching — and to keep coordinates honest (a 62 m hall should measure 62 units).
  5. Build one signature behaviour and let it carry everything: measure stroke lengths with getTotalLength(), scrub stroke-dashoffset from scroll, sequence by cumulative length.
  6. Encode meaning in the chrome: sheet numbers, title blocks and scales that are internally consistent, so the structure itself tells the truth.
  7. Iterate by screenshot: three passes — fix, elevate, subtract. On the last pass, remove one thing.
  8. Check reduced motion, keyboard focus and 390px before calling it done; the calm fallback must still look designed.