Designing a registry that reads like a notebook.
Most B2B tools look alike: same blue, same neutral sans-serif, same grey background. We did the opposite — not out of vanity, but because a registry you read a hundred times a day needs a grain, a hierarchy, a voice.
Why refuse the default SaaS look
The purple gradient, the generic geometric sans, the isometric illustration: that vocabulary exists because it's safe, not because it's good. It signals "software," and nothing else. But Hostik isn't a dashboard you contemplate: it's a registry you consult under pressure, between two checkouts, on a phone, in a hallway.
So we set one requirement before any colour: the page must have a hierarchy legible in a second and a personality that survives the hundredth visit. A tool used every day deserves better than being forgettable.
Fraunces for headlines, Poppins for body
Headlines are set in Fraunces, a high-contrast serif with editorial temperament — it gives pages the tone of a printed journal rather than an admin console. It carries the visual weight, sets the hierarchy, and signs the brand without needing a logo in every corner.
The body is Poppins: a geometric sans, neutral in the good sense, that gets out of the way so the data reads. The contrast between an expressive serif above and a plain sans below does all the hierarchy work — no need to stack five weights to say "this matters."
Geist Mono for what gets counted
Labels, section codes (§), numbers, machine statuses are set in Geist Mono. Monospace isn't a retro affectation: it aligns figures in columns, distinguishes data from prose at a glance, and reminds you you're in a system, not a brochure.
This third voice plays a precise role: it marks the boundary between prose (which explains) and the operational (which is scanned). A supervisor scanning a rack doesn't need to read sentences — they need landmarks that don't move.
A single rust accent
One accent colour, rust. Not a palette of six semantic shades, not a rainbow of states. When a single tone draws the eye, it means something: a link, an action, the hot spot of the page. Multiply the accents and none of them is one any more.
That constraint is also a product discipline. If everything becomes "important" through colour, the agent no longer knows where to look first. A single accent forces real prioritisation: what, on this screen, deserves the only colour we have?
Paper as a system
The background isn't a clinical white but a paper-like texture: a discreet grain, hairline rules as separators rather than cards floating in shadow. The whole thing reads like an operations notebook — hence the name of this blog, the field notebook.
This choice is functional as much as aesthetic. Hairline rules and generous margins hold the reading on a small screen in daylight, where drop shadows and grey backgrounds blur. Paper reads outdoors.
Legible under pressure
The real test of an operations design isn't the marketing screenshot, it's the use at 9 a.m. on a Saturday with twelve pending departures. Everything above — the serif that structures, the sans that gets out of the way, the mono that aligns, the single accent, the paper that reads outdoors — serves that one moment.
We didn't design a pretty piece of software. We designed a registry that stays legible when its reader has neither the time nor the calm to decipher it. That's the only aesthetic that counts here: the one that holds under pressure.