Blog

TkDodo tkdodo.eu/blog

Design type: Developer blog landing with intro card
Page tags: blog index intro card cards dark personal developer search sponsors avatars grid minimal
Site tags: dark personal developer
Vocabulary: narrow centred columnoutlined intro cardeyebrow labelemoji bullet paragraphsrounded portrait with captioncommand-k search buttontheme switcherthree-column post grid16:9 cover imagesdate + read-time metasection header with see-all linkcircular avatar gridbadge overlay
Prompt: Show prompt
Build a calm, minimal dark landing page for a personal developer blog. Palette: bg #151B23, card border #3A4350 (1px), text #E3E7EC, muted #9AA3AE, link accent mint/teal #5FD3B3. Type: a clean neo-grotesk sans (e.g. Inter), body 15px / 1.65, section headings 22px medium, title 20px semibold. - Header (max-width ~620px, centred): "[Blog name]" bold left with an outlined search button (magnifier, "Search", ⌘ K key chips) beside it; theme selector "Auto ▾" right. A second row of small text links: [Blog] [Tags] [Sponsors] [RSS] left, [Social] [GitHub] right. - Intro card: full column width, 1px border, 10px radius, faintly translucent with a very blurred photo showing through. Inside: tiny uppercase eyebrow "[BLOG NAME]", a large "👋 I'm [Your name]", then 3–4 short paragraphs each starting with an emoji, with inline accent links. Rounded-corner portrait floats top-right with a small "Photo by [Credit]" caption. - Latest Posts: heading left, "Read all posts" small link right. 3-column grid (gap ~24px) of cards with no border: cover image (≈3:2, 4px radius), muted meta "[Date], [N] min read", then bold 15px title. - Sponsors: heading + "See all sponsors" link; 5-across grid of 70px circular avatars with a tiny tier-emoji badge on the bottom-right, name centred below. - Footer: single line, copyright left, credits right, small muted text. Interaction: post images scale 1.03 on hover; ⌘K opens search. Responsive: post grid 3→2→1, sponsors wrap.
Added: 26 Oct 2026

Esc gallery · ← → pages