Ready Variant · Album Cover

Album Cover

The 4C three-up cover tile, Square or Standard media.

Bucket: CardsGroup: ForeseeableMedia: Square · Standard

↓ Download build packDraft, building out. Markdown spec to prompt and build from. Generated 14 Jul 2026WDS v3.0 Sketch docWDS Design System v3.0 Sketch pageWIP: Components > Photos > Album Covers

Details

Container · 4C (three-up)

TierVariant

FamilyPhotos

BucketCards

GroupForeseeable (4C)

VariantAlbum Cover

MediaSquare · Standard (setting)

Canonical namePhotos / Cards / Foreseeable / Album Cover

IDphotos-cards-foreseeable-album-cover

Notes

Cards are the individual Sketch masters at true size (2x export), rebuilt in HTML, not a board screenshot. Foreseeable holds three cards across at 4C.
The chrome is white-on-media and mode-agnostic. The build is currently dark-only: the Light-mode surface and LM renders are outstanding in the master, so the Light toggle shows the dark render for now.

Component Anatomy

#	Layer	Colour	Data	Notes
1	Media Cover	—	Album Cover Image	Full-bleed media slot, 16:9 (Standard) or 1:1 (Square). Fills the card; the album's cover photo.
2	Gradient Overlay	—	—	Bottom-up black scrim over the photo so the overlaid text stays legible. Not a colour token.
3	Date	Text / DM	Album Date	Eyebrow above the title (e.g. "10 FEB").
4	Album Title	Text / DM	Album Title	Primary line; wraps to two lines.
5	Album Total	Text / DM	Photo count	Foot-anchored count (e.g. "330 Photos").
6	More icon	Icon (White)	—	Overflow menu (`more_horiz`), top-right. Interactive, but sits white over media for contrast rather than Accent. See Icons.
7	Sponsor watermark	—	Sponsor logo	Sponsor Light lockup, bottom-right. Optional; carried by the album's sponsor.

Notes

The three text slots (Date, Album Title, Album Total) are bound to the WDS type role grid (Callout, Headline, Utility) and to Text / DM, so they read white over the media in either mode.
Media, Title and Total are required; Date, the More icon and the Sponsor watermark are optional settings.
Anatomy is shared by every Album Cover group (Mini, Foreseeable, 5050); only the card footprint and media aspect change.
Layer-name drift to reconcile in Sketch: the More icon layer is named Material Icon / Arrow Right but instances the Icon / more_horiz DM master.

Spacing

Position	Applies to	Value
Inset	Left edge to the text column	20 lg
Between	Date to Album Title	0 (stacked)
Between	Album Title to Album Total	8 xs
Bottom	Album Total to bottom edge	16 md
Corner	More icon, from top / right edge	10
Corner	Sponsor watermark, from bottom / right edge	15 / 16

Notes

Measured off the Foreseeable Standard master (448 × 252). The inset and bottom cluster hold across Square; only the media aspect changes.
Spacing scale: xs 8 · md 16 · lg 20.

Typography

Date · Album Date · Callout

·Callout / base
Inter 500 · 14 / 20

10 FEB

Album Title · Album Title · Headline

·Headline / base
Poppins 600 · 24 / 32

AVCJ Private Equity Forum Japan 2026

Album Total · Photo count · Utility

·Utility / base
Inter 500 · 12 / 16

330 Photos

Notes

Album Cover is single-density: the card size is set by the group's grid width, not by a Small / Medium / Large density axis, so each slot carries one role and metric.
These metrics are identical across Foreseeable and 5050; Mini scales them down with the card (see the Mini variant note).
Roles and metrics mirror the Notion Typography Role Registry; all three slots resolve their colour through Text / DM.

Examples

Examples coming soon. The Square and Standard covers at 4C, reassembled from the Sketch master.

Notes

Media axis: Standard (16:9) and Square (1:1) cover slots, both at the 4C three-up width.
Both-mode example renders and a Light-mode surface are pending the LM/DM resolution in the Sketch master.

Components · Photos · Cards · Foreseeable · Album Cover
Details, anatomy and type read from the live Sketch master (WDS Design System v3.0). Dark-only for now; add the Light-mode surface once the LM/DM question is resolved.