Swiss type, brutalist edges: designing this site

I wanted this site to feel like a well-set document with a few sharp edges. The references were Swiss posters, structural engineering brochures and the harder end of contemporary web design: hairlines, big grotesk headlines, monospace metadata, square corners.

Here is the system, and the reasoning.

Two typefaces, strict roles

Inter Tight does the talking: headlines, body, buttons. It is a grotesk with tight default spacing, which suits large sizes without hand-kerning every line.

JetBrains Mono does the labelling: index numbers, eyebrows, dates, coordinates, form hints. Monospace signals "this is metadata, not prose", so the eye can skip it or find it instantly.

The rule is simple. If a human is meant to read it as a sentence, it is sans. If it is a label, it is mono and uppercase with tracking.

A fluid scale, not breakpoints

Type sizes are clamp() expressions: a floor, a viewport-relative middle, a ceiling. The display size runs from 3rem on a phone to 8.5rem on a wide screen with no breakpoints in between. The headline is always the loudest thing on the page, at any width.

Hairlines do the layout

Almost every section starts with a 1px rule. Cards are 1px borders with no radius. Tables are rows of rules. It is a cheap way to make a page feel structured, and it scales down to a phone without changing anything.

Corners are square everywhere except two places: the availability pill and the form chips. Round means "toggle" on this site. Nothing else is round, so the signal stays clean.

Index numbers everywhere

[01], [02], 03 / 05. Every section, row and card gets a number. It is partly homage to the references and partly practical: numbers give the eye a path through a dense page, and they make it easy to talk about ("the third service row").

One accent, rationed

Orange-red, and only on things that mean something: the active nav item, the last word of a headline, the arrow on hover, the "open for work" dot, an error message. If a page has more than a handful of accent elements, one of them is wrong.

The full-bleed accent band under the hero is the exception that proves the rule. One big block, once, so the rest of the site can stay quiet.

Motion with restraint

Three moves: a fade-and-rise as sections scroll in, an arrow that nudges on hover, and a slow marquee. All of it switches off when the operating system asks for reduced motion. Nothing bounces. Nothing follows the cursor.

What I would tell someone doing the same

Decide the type first and let it constrain everything else. Pick one accent and be stingy. Use rules instead of shadows. And write down why, because six months from now you will want to change something and it helps to know what it was protecting.