Design system · 00
Paper, ink, and a few things you can press.
This is the Haru Assembly design system: the colour, type, materials and behaviour the studio’s own site is built from, written down where it can be used.
It is a working document rather than a picture of one. Every specimen in these chapters is the production component, drawn from the same tokens the site ships, so the guide cannot describe a brand the product has since moved away from.
Direction
A high-tech sketchbook. A restrained, modern interface set on warm paper, with pencil-like rules, diagrams and underlines — the notebook a careful engineer keeps, not a terminal and not a brochure.
The system in one plate
Full-stack digital studio
Built once, properly.
Serif headings in brown ink, a pencil stroke under the phrase that matters, and quiet sans for everything that has to be read.
Principles
Six rules that the rest of the system follows from. When a chapter does not cover a case, these decide it.
01
Paper first
The page is a sheet. It carries grain, ruling and ink, and it never lifts, tilts or glows. Whatever depth there is belongs to something lying on it.
02
Objects are not interface
Interface colour stays inside a narrow warm range. Real pigment is kept for the things on the desk — the four books and the seal — because a bound book is not part of the screen.
03
Hover belongs to things you press
A sheet of paper does not rise to meet a cursor. Panels stay still; the key travels, because it is the one thing here built to be pushed.
04
Light falls from above
One light, in one place. Lit edges are top edges, shadows fall beneath, and nothing is lit from the desk upwards.
05
One entrance
Content resolves out of the paper by a single blur-fade, on one set of timings. Nothing slides in, and nothing loops unless looping is what it describes.
06
Finished without motion
Every diagram and every page reads complete with animation switched off. Motion is added to something that already works, which is also what makes reduced motion correct for free.
Using this guide
Chapters run down the left; the marks on the right are the sections of the chapter you are reading — hover them, or tab into them, to see the headings. On a phone or a tablet both live behind the contents control at the foot of the screen. Press / anywhere to search every section at once.
Anything with a value can be copied. Press a swatch for its colour, a token name for the name, the link beside a heading for the address of that section. Right-click the H mark for the logo as SVG and the full asset pack.
Rules come with reasons. Most of what is fixed here is fixed because the alternative was built first and looked wrong. Where that happened the chapter says so, so the same ground is not walked twice.
Implementation is folded away. The rules are written for anyone who uses the brand. Utility names, tokens and code sit in a panel marked Implementation at the foot of each section, for the people who build with it.
Chapters
- 01 Identity The H mark, the wordmark, the seal and Nabi — and which of them is the logo.
- 02 Voice How the studio writes: plainly, in the first person plural, and about the reader's problem.
- 03 Colour A cream sheet, warm-brown ink, and pigment kept for physical objects.
- 04 Typography Asar, Geist and Geist Mono, with two Japanese faces held in reserve.
- 05 Imagery A watercolour wash, logos printed as ink, and diagrams drawn in line. No stock photography.
- 06 Iconography A small set of line icons, used as plumbing and never as illustration.
- 07 Paper The grain, the ruling, the wash and the perforation: what the page is made of.
- 08 Surfaces Recess, panel, card and stock, and why none of them moves under a cursor.
- 09 Controls The key, the fields and the accordion: the few things on a page you press.
- 10 Volumes Four bound books in dyed cloth, and the layers that make them objects.
- 11 Motion One entrance, three loops, and what happens when motion is turned down.
- 12 Layout The page frame, reading measures, section rhythm and radii.
- 13 Accessibility Contrast, focus, keyboard, motion and markup: what every page is held to.
- 14 Assets Marks, textures, tokens and typefaces, packaged to take away.
- 15 Changelog What changed in the system, and when.
Colophon
- Version
- 1.0 · October 2026
- Set in
- Asar, Geist and Geist Mono
- Foundation
- The Veil theme, on SvelteKit and Tailwind CSS
- Maintained by
- Haru Assembly, Australia & Japan