Ir para o conteúdo

Cards de imagem

Cards guiados por uma foto: imagem no topo, capas sangradas e texto sobre um fade ou um overlay escurecido.

Designing for quiet interfaces

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

C 001Conteúdo discreto

Design

Grid systems that actually help

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

C 002Foto com tag

Case study

Rebuilding a checkout in six weeks

C 003Imagem com fade inferior

Motion that explains

Use easing to tell users where things went.

C 005Zoom na imagem

Hot

Poster workshop

Sat 14:00 · Studio B

C 033Pôster com etiqueta

Lift and glow

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

C 036Elevação com brilho colorido

Harbor at dusk

Series 03 · 24 frames

C 040Legenda deslizante

C 041Overlay escurecido

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

C 054Prévia de link

Engineering

What we learned migrating 400 components to container queries

Noor HaddadSep 4, 2026 · 7 min read

C 065Blog com autor

Lemon orzo with charred broccoli

25 minVegetarianEasy

C 081Receita com chips

12 lessons

Modern CSS layout

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

7 of 12 complete · 58%

C 083Progresso do curso

Visual do site inteiro: o prompt Guiado por fotografia. Prateleiras vizinhas: cards de preço, cards de perfil, cards horizontais.