Blog

Kent C. Dodds kentcdodds.com/blog

Design type: Developer blog index
Page tags: blog index search dark cards grid pills filters featured post hero 3d illustration footer
Site tags: dark personal developer
Vocabulary: split hero3d object illustrationtwo-tone headlinepill search inputresult count badgetopic pill cloudfeatured article panelthree-column card griddate and read-time metasort dropdownload-more buttoncircle arrow linkdark charcoal surfacesnewsletter footer
Prompt: Show prompt
Build a dark, calm blog index page for [Your name]'s writing. Global shell (reuse on every page): near-black charcoal background #1f2028, raised panels #2a2d36, hairline dividers #2f323b. Text #ffffff for headings, #9aa0aa for muted copy. A neutral grotesk sans throughout (Matter, Inter or similar), medium weight, tight tracking on headings. Header: wordmark [Your name] + round search icon button on the left, centred row of small nav links (active link gets a short underline), round theme-toggle and avatar buttons on the right. Content sits in a ~1000px column with generous vertical rhythm (120–160px between sections). Signature link style: bold label followed by a 40px outlined circle holding an arrow, the circle fills on hover. Footer: four columns (name + tagline + social icons + signature, Contact/General link lists, Sitemap list, newsletter form with two tall filled inputs and a "Sign me up →" circle-arrow button), then a small copyright line. Sections: - Hero: two columns. Left: a two-tone headline, the first sentence white ([Headline]) and the second in muted grey ([Subheadline]) at the same ~32px size, followed by a rounded pill search input (magnifier icon, placeholder "Search posts", a small total-count badge on the right) and a tiny "Try the full site search" link beneath. Right: one large glossy 3D object illustration floating on the dark background. - "Search by topics": small label, then a wrapping cloud of dark-grey pill buttons ([Topic]); selected pills invert to white. - "Articles" row with a small "Sort by" pill dropdown on the right. - Featured article: a full-width raised panel (#2a2d36, small radius). Left side has a "Featured article" eyebrow, a large title, and read time, with a circle-arrow "Read full article" link pinned at the bottom. Right side holds a landscape image. - Card grid: 3 columns, 24px gaps. Each card is a tall portrait image (~3:4, slight radius) followed by "[Date] — [N] min read" in muted 14px and a white 18px title. No card background. The image scales up slightly on hover. - A centred outlined pill "Load more articles +" button. - Cross-promo: 3D illustration on the left, two-tone headline and circle-arrow link on the right. Responsive: the grid goes 3 → 2 → 1 columns, the hero stacks with the illustration above the text, and the header nav collapses into a menu button.
Added: 26 Oct 2026

Esc gallery · ← → pages

Full-page screenshot of Blog on Kent C. Dodds