Page type · 12 assets
Portfolio gallery
A gallery is the one layout where the design should lose. Every decision spends attention that belongs to the work, so the winning move is usually subtraction: a neutral ground, a strict grid, and typography that labels rather than performs. The hardest part is resisting the urge to make the frame interesting.
What to get right
- A near-neutral background. A coloured ground recolours every thumbnail sitting on it, and you will not notice until the work looks wrong for reasons nobody can name.
- One grid, held. Mixed tile sizes need a reason beyond variety; a masonry layout that means nothing just makes scanning harder.
- Captions that inform without competing. Title, year, role, and stop.
- Hover states that reveal information rather than animate for their own sake. If the motion does not tell you something, cut it.
- Image loading that does not reflow the grid. A gallery that jumps while it loads undoes the calm the layout was built for.
- A deliberate order. The first three tiles decide whether anyone scrolls, so the best work goes there rather than the newest.
Each is an installable shadcn/ui theme and a DESIGN.md for your agent.
npx shadcn@latest add https://csscreme.com/r/porcelain.json 9 free templates in this archetype, each installable as a theme too.
Seen one in the wild?
Point the decoder at any live gallery and pull its real type scale, spacing rhythm, radii and shadows, plus an accessibility read — then copy the whole thing as a DESIGN.md. Or drop a screenshot into the extractor if you only need the colours.