Tier 1
Compact
16px padding, two or three content items, 16px internal gaps, title at body size plus two steps. Suited to long lists and admin interfaces where scanning speed beats impact.
Blueprint 03
Cards, grids, density & spacing
Cards are where most design systems quietly fall apart: five variants become fifteen, gaps drift, and radii multiply. This blueprint fixes the architecture, the grid, the density tier and the spacing scale before a single card is built.
Five card architectures
A card architecture is a fixed arrangement of slots, not a visual style. Pick one per collection and do not mix architectures within a single grid — mixed architectures are the reason a grid looks untidy even when every card is individually fine.
| Architecture | Slots | Best for | Watch out for |
|---|---|---|---|
| Horizontal split | Media left, title, meta, tags, action right | Search results, article lists, directories | Must stack below 640px or the media becomes a stamp |
| Framed canvas | Offset background frame behind a foreground panel | Feature grids where cards need presence | Offset must reduce to zero on mobile to avoid overflow |
| Glass overlay | Full-bleed image with a translucent panel over it | Galleries, destination and event listings | Contrast varies per image; needs a solid scrim fallback |
| Border accent | No border except a top or left accent bar | Status lists, documentation callouts, changelogs | Accent colour must not be the only carrier of meaning |
| Data grid | Stats block built into the card header | Dashboards, comparison sets, portfolio metrics | Needs 12px minimum between each figure and its label |
This site uses the framed canvas architecture throughout, which is why every card here sits in front of an offset block. The rule that makes it safe is simple: the frame is a decorative pseudo-element with positive insets inside the grid gap on desktop, and it is removed entirely below 768px, replaced by a hard offset shadow that cannot create horizontal scroll.
Grid type
There are four grid strategies worth knowing, and the choice is driven by whether the number of items is known in advance.
- Auto-fit with minmax —
repeat(auto-fit, minmax(260px, 1fr)). The column count responds to available width with no media queries. Best default for card collections of unknown length. The risk is a lonely stretched card on the final row;auto-fillavoids the stretch but leaves visible empty tracks. - Fixed columns with breakpoints — four columns, then two, then one. More predictable for editorial layouts where you want a specific rhythm, but it needs maintaining as content grows.
- Asymmetric — a 2fr/1fr or 12-column arrangement where one card is deliberately larger. Good for a featured item; bad if the featured item changes often and the copy lengths vary wildly.
- Horizontal scroller — a single row with overflow-x auto and scroll snapping. Acceptable for secondary content on mobile, never for primary navigation, and it must be keyboard reachable.
Whatever you choose, set min-width: 0 on grid children. Without it, a long unbroken string — a URL, an email address, a brand name — forces the track wider than its share and pushes the whole grid past the viewport.
Content density tiers
Density is the number of distinct content items per card and the padding around them. Define three tiers and label each collection with one.
Tier 2
Comfortable
24px padding, four or five items, 24px between distinct elements. The default for marketing card grids. Wide enough for a media slot, a tag, a paragraph, a meta line and an action without crowding.
Tier 3
Airy
40px padding, two or three items, generous line height. Reserved for three-up feature grids or premium landing pages where each card is effectively a small section in its own right.
The spacing system
Use one scale: 4, 8, 16, 24, 40, 64. Four steps handle almost everything. 4px separates an icon from its label. 8px separates a tag from a title. 16px is the minimum distance between any text and a container edge or border. 24px is the minimum between two distinct elements inside a card. 64px separates page sections. The one extra rule worth memorising is the statistic rule: a number and its caption belong together, so give them 12px — close enough to read as a pair, far enough that the label does not collide with the numeral's descenders.
Apply the scale through gap rather than margins wherever possible. Gap on a flex or grid container means the spacing belongs to the relationship, not to the element, so a component dropped into a different container adopts that container's rhythm automatically.
Border radius
Radius is a single decision with knock-on effects. Choose 0px for a hard, structural, neo-brutalist or Swiss feel; 4px for a neutral corporate look that is barely perceptible but softens screenshots; 12px for the soft modern default; 24px or more for a playful consumer feel. Then derive everything else: nested elements get the parent radius minus the padding, buttons get the same value as inputs, and images inside a rounded card either match the card radius or are clipped by overflow: hidden on the parent. Two radii in one component is a bug unless the difference is deliberate and nesting-derived.
Component hierarchy inside a card
Order the slots: tag, media, title, description, metadata, action. The title should be the only element inside a card using a heading tag, and the link should wrap the title rather than duplicating it as a separate "read more" plus an invisible overlay — duplicate links to the same destination make keyboard and screen reader navigation twice as long. If the whole card must be clickable, wrap the title in the anchor and extend the hit area with a pseudo-element, keeping any secondary action outside that stretched region.
Responsive behaviour
Write the three lines for every card collection. Desktop: three or four columns, comfortable density, 32px gap. Tablet: two columns, same density, 24px gap. Mobile: one column, compact density, 16px gap, media aspect ratio changed from 4:3 to 16:9 to reduce vertical run. Below 400px, drop the tag row's horizontal padding, keep 16px minimum inside the card, and make any card action full width so the touch target is unambiguous.