Skip to content

Image cards

Cards led by a picture: image on top, full-bleed covers and text over a fade or a darken overlay.

Designing for quiet interfaces

Why the best screens are the ones you barely notice, and how to get there.

C 001Quiet content

Design

Grid systems that actually help

Twelve columns is a habit, not a law. Pick the grid your content needs.

C 002Tagged photo

Case study

Rebuilding a checkout in six weeks

C 003Bottom fade image

Motion that explains

Use easing to tell users where things went.

C 005Hover zoom image

Hot

Poster workshop

Sat 14:00 · Studio B

C 033Sticker tag poster

Lift and glow

Rises on hover and casts a tinted shadow instead of a gray one.

C 036Tinted glow lift

Harbor at dusk

Series 03 · 24 frames

C 040Sliding caption

C 041Darken overlay

designforai.dev Design references written for AI coding tools Copy the CSS, or copy the prompt and let your editor build it.

C 054Link preview

Engineering

What we learned migrating 400 components to container queries

Noor HaddadSep 4, 2026 · 7 min read

C 065Author meta blog

Lemon orzo with charred broccoli

25 minVegetarianEasy

C 081Recipe chips

12 lessons

Modern CSS layout

Grid, subgrid, container queries and :has() in real projects.

7 of 12 complete · 58%

C 083Course progress

Whole-site look: the Photography-led prompt. Nearby shelves: pricing cards, profile cards, horizontal cards.