# ktz.dk

Source: https://ktz.dk/
Captured: 2026-10-07
Tags: portfolio, landing, light, both, minimal, calm, human, confident, technical
Colors: #f8f8f8, #d1d1d3, #b4b5b5, #c2e7f9, #fac9cd, #8e979f, #0e0e0e, #93d0f2
Type (h1): lausanne · 16px/24.8px · 400 · tracking -0.176px — "Hey, I'm Andreas Katzmann. Product designer & frontend engineer, based near Cope"
Type (h2): lausanne · 14px/21px · 500 · tracking -0.14px — "About"
Type (h3): lausanne · 15px/22.5px · 400 · tracking -0.15px — "Nørgård MikkelsenAn AI-driven skills directory"
Type (body): lausanne · 16px/24.8px · 400 · tracking -0.176px — "I shape how things look, then build them in code, sweating the details people do"
Type (small): lausanne · 12px/12px · 500 · tracking -0.12px — "Yosemite"
Type (button): lausanne · 14px/14px · 500 · tracking -0.14px — "Explore"
Button: "Explore" — fill #efefef, text #141414, radius 8px, border 0px, padding 0px 14px, height 36px, type 14px/500
Radii: 8px (24), 6px (8), 4px (6), 5px (3)

## Images

- Hero (desktop): https://media.lvly.design/library/ktz-dk/hero.webp?v=9997a6b1
- Page crop (mid-1): https://media.lvly.design/library/ktz-dk/mid-1.webp?v=8c626ff0
- Page crop (mid-2): https://media.lvly.design/library/ktz-dk/mid-2.webp?v=d12ab19f
- Hero (mobile): https://media.lvly.design/library/ktz-dk/mobile-hero.webp?v=f7b31cb5
- Full page (desktop): https://media.lvly.design/library/ktz-dk/full.jpg?v=ad10589f
- Full page (mobile): https://media.lvly.design/library/ktz-dk/mobile-full.jpg?v=93dbbdf0
- Clip preview (mp4): https://media.lvly.design/library/ktz-dk/video-qv2a9z.preview.mp4?v=7be9c442

A designer-engineer portfolio that whispers. The entire type system is one face, Lausanne, at body size: the h1 is 16px/400 with -0.011em tracking, section labels are 14px/500, so hierarchy comes from gray versus ink and from spacing, not from scale. The only color in the chrome is a pale-blue highlighter swipe behind the author's name; everything else is #f8f8f8 paper, #0e0e0e ink and soft #efefef gray. The work does the talking — each project is a full-bleed screenshot inset in a large #efefef tray, captioned below in one line with a like count, so the bright client UIs (forest green, royal blue, near-black) become the page's color by proxy. The interaction layer is where the craft shows: the nav detaches into a floating pill on scroll and splits off a black Contact button, a centered "Ask AI" chip floats at the bottom, and a tick rail on the left tracks your position.

## Steal-worthy details

- Highlighter-marker accent — a hand-skewed #c2e7f9 swipe behind the name only, the single dose of brand color on the page
- Body-size hero — the h1 is 16px regular, two short lines plus a two-line credo; confidence by understatement instead of a display headline
- Icon-led tab nav with a filled active state — Work / About / Writing, each with a small glyph, the active tab on a #efefef 8px pill, a hairline divider after the logomark
- Paired CTAs of equal height (36px) — black #141414 Contact with a paper-plane icon beside a borderless #efefef Explore, both 8px radius, 14px/500
- Work in a tray — each project's screenshot sits inset ~60px inside a large #efefef rounded panel, cropped at the panel's bottom edge so it reads as a live window, not a thumbnail
- One-line project caption under each tray: bold client name, gray one-sentence description, a heart and like count flush right
- On scroll the header splits into two floating pieces — the tab pill on the left in a frosted white capsule and a standalone black Contact button on the right
- Persistent "Ask AI" chip, black and centered at the bottom of the viewport, as a conversational way into the portfolio
- Left-edge tick rail — a column of short hairlines where the current section's tick grows longer, a quiet scroll-position indicator
- Fanned photo stack in the About section — three rotated personal photos (landscape, dog, bridge) overlapping like prints on a table
- Skill chips with leading icons in #efefef 6px pills, set as a two-row wrap under the bio
- Writing list as plain hairline-separated rows, title left, date and read time right, with a tiny blue "New" badge

## Style recipe

Build on a #f8f8f8 background with #0e0e0e ink and a two-step gray ramp (#8e979f for secondary text, #d1d1d3 for hairlines). Use a single neo-grotesk (Lausanne; fall back to Inter) for everything at small sizes: 16px/1.55 regular body with -0.011em tracking, 14px/500 labels and buttons, 12px/500 metadata. Do not use a display size — make the headline the same size as body and let gray-versus-ink contrast and whitespace carry hierarchy. Spend color once: a pale-blue (#c2e7f9) highlighter swipe, slightly skewed and taller than the text, behind one key phrase; optional secondary pastel #fac9cd. Buttons are 36px tall, 8px radius, 0 14px padding, no border: primary #141414 with white text and a leading icon, secondary #efefef with #141414 text. Radii: 8px for buttons and tabs, 6px for chips, 4px for badges, larger (~16px) for showcase trays. Present visual work inside big #efefef rounded trays with the image inset and cropped at the tray's bottom, captioned underneath on one line (bold name, gray description, a metric right-aligned). Navigation is icon-plus-label tabs with a filled gray active state; on scroll, detach it into floating capsules with a soft white translucent fill. Lists are hairline-ruled rows with metadata right-aligned in tabular gray. Keep shadows nearly absent; depth comes from tonal grays.