CSS

Josh W. Comeau joshwcomeau.com/css/

Design type: Developer blog category index
Page tags: category index cards dark developer blog index grid footer newsletter
Site tags: dark personal developer
Vocabulary: two-column card gridoutlined cardshairline borderspage title with counttitle + subtitle + excerptinline code chipsread more linkgenerous card paddingdark near-black backgroundcloud silhouette footergradient footeruppercase footer labels
Prompt: Show prompt
Build a dark category archive page for a technical blog. Palette: bg #0E1114, card border #2A3038 (1px), card bg transparent, headings #F2F4F7, subtitles #9AA4B2, body #C9CED6, inline code chips bg #22272E with monospace text. Type: a friendly geometric sans (e.g. Wotfard / Outfit) — titles 18px semibold, body 14–15px, line-height ~1.6. - Header: wordmark [Your name] left, text nav (Categories, Courses, Goodies, About), icon buttons right. Content max-width ~1000px, centred. - Title row: big category name "[Category]" (~32px bold) left, "[N] Articles" small muted text right-aligned on the same baseline. - Grid: 2 equal columns, 20px gap, of outlined rectangular cards (6px radius, ~24px padding). Each card: post title (may include an inline code chip), optional muted subtitle line, a 4–6 line excerpt, then a bold small "Read more" link. Cards in a row stretch to equal height. An odd final card sits alone in the left column. Optional external-link icon after titles that point off-site. - Footer: separated from content by a wavy horizon of dark cloud silhouettes that reveal a teal-navy gradient (#1A3040→#265A70). Inside: wordmark + one-line tagline, newsletter input with yellow (#FFD60A) arrow button, three link columns with small uppercase labels, social icons row, copyright and legal links. Interaction: card border brightens and lifts 2px on hover. Responsive: single column below ~760px; footer columns wrap.
Added: 26 Oct 2026

Esc gallery · ← → pages

Full-page screenshot of CSS on Josh W. Comeau