About this block

Duo Tone Card shows four projects in bordered tiles, each with a Placeholder thumbnail above a muted caption panel that carries the project name, role, and year. The contrast comes from bg-card against bg-muted/50 on the caption strip, not from a gradient, giving each card a clean two-surface read.

Projects are one array. The muted panel is the distinctive detail, it separates caption from image by tone alone so the text sits in its own layer without any overlay.

When to use

Reach for this block as the work grid on a homepage or a dedicated projects page. The installer swaps the Placeholder tiles for real project images and keeps the caption strip honest about role and year.

A natural flow around it on a Portfolio Pro page:

Before

• Name and role hero
• About split

After

• Case study split
• Services list

What you can display

One strong use is the selected-work grid with surface contrast. Other project-card layouts:

• Studio work. Replace the role line with the client name and the year for an agency-style grid.
• Dark theme showcase. The muted panel reads especially well in dark mode where the contrast flips.
• Hover state. Add a scale or opacity transition on the thumbnail on group-hover for subtle interactivity.

Tip: keep the caption strip to two lines maximum, a third line breaks the visual rhythm across the grid.