carlhauser.com

A designer's sketchbook published as a single scrolling archive, and the whole aesthetic is a refusal to compete with the drawings. The page ground is a flat warm-neutral gray (#e6e6e6) and every surface on it — the header, each sketch, the footer — is the same off-white card (#f1f1f1) at an 18px radius, so the site reads as one uninterrupted stack of tiles rather than a sequence of sections. There is no color: the only ink is near-black, the only chrome is the solid black circled plus that prefixes each nav link, and the single spot of hue on the page is the yellow of a waving-hand emoji. Type is Inter SemiBold at three sizes with negative tracking, and the 11px date/ID line on every card turns a pile of ballpoint sketches into a cataloged archive. What makes it work is the restraint in the header card: the wordmark and nav pin the top, the mission paragraph sits at the bottom, and a deliberate void of roughly 200px between them gives the sketches below room to be the loudest thing on the screen. The voice does the warming instead — "brainfarts", a wave, "Ohhh that's the end" — so a monochrome grid never turns cold.

Build on a flat neutral-gray ground (#e6e6e6) and place every piece of content inside an off-white card (#f1f1f1) with an 18px radius, no border and no shadow — the ~5% value step between ground and card is the entire separation system, so never add a stroke to "help" it. Keep a generous outer gutter (about 100px at 1440) and the same gap between cards, so the gray shows as a consistent grid of channels.

Type is Inter (or any grotesque with tight negative tracking) at exactly three sizes: 36px/600 at -0.8px tracking and 1.2 line-height for headlines, 17px/600 at -0.5px for navigation and links, and 11px/400 for metadata. Never introduce a fourth size and never go above 600 weight. Ink is near-black (#383838 to #000) on card, metadata is a mid-gray (#909090). Use zero brand hues — links are underlined, not colored, and the only permitted color anywhere is whatever an emoji brings with it.

Give navigation a glyph instead of a treatment: prefix each link with a solid black filled circle containing a white plus, and set the links in a two- or three-column block rather than one row. Repeat the identical nav block in the footer.

Compose the top card around emptiness. Anchor identity and nav to its top edge, anchor a 3–4 line statement paragraph at 36px to its bottom edge, and leave 200px+ of untouched card between them; resist putting a hero image, a button or a badge in that space. Park one small live signal in the opposite bottom corner — a ticking local clock, a counter, a status — as the page's only animation.

Treat every content tile as a catalog record: a metadata row inside the card's top padding with a date on the left and a zero-padded ID on the right, both 11px in mid-gray, then the content below it with breathing room on all sides. Let the tiles flow as masonry across a four-track grid where any tile may span one or two tracks and heights are set by the content, never normalized — the uneven right edge is the point.

Motion is near-zero: no parallax, no reveal-on-scroll, no hover lift. At most a subtle tint change on a card hover. Carry all the warmth in the copy — write the headlines as spoken asides ("Hello 👋", "Ohhh that's the end"), use one emoji per headline, and close with a hand-written-sounding sign-off over a hairline rule. The recognizable move is the pairing: a rigorously monochrome Swiss grid with a voice that sounds like a text message.