Talks

Kent C. Dodds kentcdodds.com/talks

Design type: Talks and events listing
Page tags: filters cards dark pills events talks grid list
Site tags: dark personal developer
Vocabulary: topic pill filtersfilter status labeltwo-column card gridraised dark cardsstatus dotdate eyebrowfavourite star toggletag chippresentation list with dateslong description excerptmuted body copygenerous card padding
Prompt: Show prompt
Build a dark listing page for [Your name]'s talks and events, filterable by topic. 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: - "Search talks by topics": a small white label, then a wrapping cloud of pill buttons (#2f323b background, 13px white text, ~36px tall, 8px gaps). Clicking a pill toggles it and it turns white with dark text when active. - A status line such as "Showing all talks" or "Showing [N] talks about [topic]". - Talk grid: 2 equal columns with a 16px gap. Each card is a raised panel (#2a2d36, small radius, ~32px padding) and tall enough to feel editorial: - Top row: a green status dot (upcoming/live) or grey dot (past) with a bold date ([Date]). On the right, an optional topic pill and an outlined star favourite button. - A big ~24px white [Talk title] placed well down the card. - A muted 14px multi-paragraph [Abstract] with 1.6 line-height. - A "Presentations" sub-list: green bullet, white [Event name], muted ISO date right-aligned on each row. - An empty or "TBD" card keeps the same structure with a short title. Interaction: card borders brighten subtly on hover, the star fills when toggled, and the filter updates the list instantly. Responsive: the grid collapses to 1 column under 768px and the pills keep wrapping.
Added: 26 Oct 2026

Esc gallery · ← → pages

Full-page screenshot of Talks on Kent C. Dodds