# carlhauser.com

Source: https://www.carlhauser.com/
Captured: 2026-09-20
Tags: portfolio, landing, light, both, minimal, swiss, playful, calm, human, raw, friendly
Colors: #f1f1f1, #d0d0d0, #afafaf, #909090, #737373, #515151, #383838, #f4c452
Type (h1): Inter-SemiBold · 16px/19.2px · 600 · tracking -0.5px — "東京 JST"
Type (h2): Inter-SemiBold · 36px/43.2px · 600 · tracking -0.8px — "Hello 👋"
Type (h3): Inter-SemiBold · 17px/18.7px · 600 · tracking -0.5px — "The Process"
Type (small): Inter · 11px/13.2px · 400 — "ID"
Radii: 18px (32), 100px (5), 131px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/carlhauser-com/hero.webp?v=376bd4dd
- Page crop (mid-1): https://media.lvly.design/library/carlhauser-com/mid-1.webp?v=33ce1b59
- Page crop (mid-2): https://media.lvly.design/library/carlhauser-com/mid-2.webp?v=40f6cad0
- Hero (mobile): https://media.lvly.design/library/carlhauser-com/mobile-hero.webp?v=8d9b16c8
- Full page (desktop): https://media.lvly.design/library/carlhauser-com/full.jpg?v=5a23dadb
- Full page (mobile): https://media.lvly.design/library/carlhauser-com/mobile-full.jpg?v=4692bb71
- Clip preview (mp4): https://media.lvly.design/library/carlhauser-com/video-nu4g73.preview.mp4?v=07226878

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.

## Steal-worthy details

- Two-tone card-on-ground system — the page is a flat #e6e6e6 field and every surface is a #f1f1f1 card at 18px radius with no border and no shadow; contrast between the two is about 5%, so the tiles separate by edge alone
- Nav as circled-plus links in a two-column block — five items, each prefixed by a solid black filled plus glyph, stacked 3+2 at the top right instead of running as one horizontal bar; the filled circles are the only "UI" on the page
- A header card that is mostly deliberate void — wordmark and nav at the top, the statement paragraph at the bottom, and roughly 200px of empty card between them; the emptiness is the composition, not a gap to fill
- A live local clock as the only moving element — "東京 JST 10:12:49 AM" set 16px/600 at -0.5px tracking, bottom-right of the header card; it signals a person in a timezone rather than a company
- Every card carries an archival slug line — capture date left, "ID" plus a zero-padded three-digit number right, 11px/400 in mid-gray, sitting inside the card's top padding above the image; the numbering counts down as you scroll
- Masonry on a four-track grid where tiles span one or two columns — card heights are set by the artwork, not normalized, so a tall portrait sketch and a wide schematic sit in the same flow without cropping either
- Three type sizes and nothing else — 36px/600/-0.8px for the two card headlines, 17px/600/-0.5px for nav and links, 11px/400 for metadata; every link is underlined rather than colored, which keeps the palette at zero hues
- The footer is the header card run backwards — same off-white tile, same 36px greeting-style headline ("Ohhh that's the end"), the nav repeated as circled-plus links, then a hairline rule over an italic copyright and a "Made with love in Tokyo, JP" sign-off

## Style recipe

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.