sdfkjh · design study
The axial grid
One dominant axis instead of a uniform grid. A single vertical rule is the spine; everything keys off it. Rigid structure, editorial result.
Study page. Noindex; linked only from the home page. After the Musashino "Chairs for All" poster.
sdfkjh · a demonstration
Brand and web.
One page, built on the home keys. The whole layout is a single axis. Everything else simply keys off it.
the mark, exploded into materials
Six letters, one wordmark, cut into layers: solid, reversed, outline, hatch, and flat. The object, exploded. Here the object is a name.
unrelated content, on purpose
In 1946 Charles and Ray Eames put a molded plywood chair into production, bending thin birch veneers in a heated press until the seat took the shape of the sitter. The trick was not the curve, it was the joint: rubber shock mounts bonded between wood and frame, so the chair could flex with no visible hardware. The press itself was a garage-built rig they nicknamed the Kazam! machine, and it had spent the war forming plywood leg splints for the US Navy before it ever formed a chair.
The material was bent to the sitter, not the sitter to the material.
- molded birch plywood, thin plies pressed to a compound curve
- rubber shock mounts, no fixings visible from the front
- two heights, dining and lounge
A grid that only ever carries copy written to flatter it has proven nothing. This band is the test: a long measure, a pull-quote, a list, and an image slot the axis never saw coming. It either holds or it does not.
colophon
Why 26: the source sets its spine about a quarter in from the left edge. 26% is that quarter. The alternatives are live above: at 20 the void thins until it stops reading as deliberate, at 33 the column starts crowding the right edge. Look rather than take our word for it.
The source
Musashino Art University's exhibition poster for "Chairs for All" (Igarashi Design Studio): one red spine set about a quarter in from the left, a chair exploded into stacked material bands, the title climbing the axis, dense information anchored low. The poster is theirs and stays theirs, so what follows is a structural sketch of it, not a copy. A study needs its before.
Structure only. The chair, the photography, and the red are Igarashi Design Studio's.
taken
- the off-centre axis, about a quarter in
- content set to one side, the void left standing
- the object exploded into material bands
- the vertical title riding the spine
- numbered markers and a dense colophon
invented
- the object is a wordmark, not a chair
- amber for red
- a 760px collapse the print original never needed
- live overlays in place of ink
Six moves
- One dominant axis.A single off-centre rule; everything aligns to it.
- Content set to one side.Material on one side of the axis, the empty side deliberate.
- Horizontal banding.Sliced into stacked bands, hairline rules between.
- The object, exploded.The subject cut into material layers. The focal point.
- Vertical text on the axis.A title set vertically, riding the spine.
- Markers and colophon.Numbers pinned to the axis, dense info low.
Mobile is a decision, not a breakpoint. Below 760px the axial grid is abandoned rather than shrunk: the spine collapses to a thin rule in the left margin, the vertical title is dropped, the bands stack full width, and the overlays go with it. Scaled proportionally instead, a 26% axis would spend 94 pixels of a 360px screen on deliberate emptiness. On a phone, readability wins; the rule stays as the grid's trace.
Caveats: the outline and hatch slabs lean on -webkit-text-stroke and background-clip: text, vendor-prefixed properties every modern engine ships but no standard guarantees. Where they fail they fail invisible, so the exploded stack is one labelled image to assistive tech and every slab inside it is decorative. The vertical title is hidden from screen readers for the same reason: writing-mode rotates geometry, not reading order. Print aesthetics come to the web on the web's terms.