ktz.dk

Andreas Katzmannsaved 3d ago · captured 3d ago

Twelve details, nine pinned.

View as Markdown ↗

Colors8 colors · ground #F8F8F8

ground#f8f8f8·95.67%#d1d1d3·2.39%#b4b5b5·0.89%accent#c2e7f9·0.22%#fac9cd·0.21%#8e979f·0.12%#0e0e0e·0.09%#93d0f2·0.09%

Sized by coverage · click to copy.

Typography1 family · 5 styles · lausanne

Hey, I'm Andreas Katzmann. Product designer & frontend engineer, based near Cope

lausanne · 16/25 · 400 · -0.176px

About

lausanne · 14/21 · 500 · -0.14px

Nørgård MikkelsenAn AI-driven skills directory

lausanne · 15/23 · 400 · -0.15px

Body

I shape how things look, then build them in code, sweating the details people do

lausanne · 16/25 · 400 · -0.176px

Small

Yosemite

lausanne · 12/12 · 500 · -0.12px

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsExplore1 style

Explore

primary · fill #efefef · label #141414 · radius 8px · border 0px · padding 0px 14px · height 36px · type 14px / 500

Shape4 radii · 41 uses

8px24 uses · 59%

6px8 uses · 20%

4px6 uses · 15%

5px3 uses · 7%

AnalysisA designer-engineer portfolio that whispers.

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.

Style recipeBuild on a #f8f8f8 background with #0e0e0e ink and a two-step gray ramp (#8e979f for secondary text, #d1d1d3 for hairlines).

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.

Details12 worth noting

ktz.dk — the captured page — Landing, 1440 × 900 · captured Oct 7, 2026

1Highlighter swipe behind the name
Highlighter-marker accent — a hand-skewed #c2e7f9 swipe behind the name only, the single dose of brand color on the page
2Body-size h1 hero
Body-size hero — the h1 is 16px regular, two short lines plus a two-line credo; confidence by understatement instead of a display headline
3Icon tabs with gray active pill
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
4Black and gray CTA pair
Paired CTAs of equal height (36px) — black #141414 Contact with a paper-plane icon beside a borderless #efefef Explore, both 8px radius, 14px/500
5Screenshot inset in gray tray
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
6Caption row with like count
One-line project caption under each tray: bold client name, gray one-sentence description, a heart and like count flush right
7Header splits into floating pills
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
8Floating Ask AI chip
Persistent "Ask AI" chip, black and centered at the bottom of the viewport, as a conversational way into the portfolio
9Tick-mark scroll rail
Left-edge tick rail — a column of short hairlines where the current section's tick grows longer, a quiet scroll-position indicator
10Fanned stack of personal photos
Fanned photo stack in the About section — three rotated personal photos (landscape, dog, bridge) overlapping like prints on a table
11Icon skill chips
Skill chips with leading icons in #efefef 6px pills, set as a two-row wrap under the bio
12Hairline writing list with New badge
Writing list as plain hairline-separated rows, title left, date and read time right, with a tiny blue "New" badge

portfolio · landing · light · minimal · calm, human, confident, technical

ktz.dk

More like this