# Album Cover (Foreseeable) — Build Pack

Component build specification for the dev team. Paste this into your build prompt, or work from it directly. It is token-led: build against the semantic tokens, not raw hex values. Resolve token values from the Colour registry and type metrics from the Typography registry.

| | |
|---|---|
| Component | Photos / Cards / Foreseeable / Album Cover |
| ID | `photos-cards-foreseeable-album-cover` |
| Container | 4C (three-up) |
| Media | Square (1:1) or Standard (16:9), a setting |
| Status | Draft, dark-only build; LM surface outstanding |
| Sketch doc | WDS Design System v3.0 |
| Sketch page | WIP: Components > Photos > Album Covers |
| Registries | Colour + Typography |
| Version | WDS v3.0 |
| Generated | 2026-07-14 |

An Album Cover is an event photo album tile: the album's cover photo fills the card, with the date, title and photo count overlaid on a bottom-up gradient scrim. Foreseeable is the 4C, three-up grid — the base group, and the documented exemplar. Mini (3C, four-up) and 5050 (6C, two-up) share this anatomy and type; only the footprint and media options change.

## Media, not density

Album Cover is single-density: card size is set by the group's grid width, not a Small / Medium / Large axis. Within Foreseeable, one setting varies the tile: Media, either Square (1:1) or Standard (16:9). The chrome is white-on-media and mode-agnostic, so the card reads the same in Light and Dark; only the page surface flips. Both modes are required; the Light-mode surface pass is outstanding.

## Slots

The cover photo and the gradient scrim fill the card; three text slots and two icon affordances sit over them.

| # | Layer | Holds | Colour token | Presence |
|---|-------|-------|--------------|----------|
| 1 | Media Cover | Album cover image (1:1 / 16:9) | — | Required |
| 2 | Gradient Overlay | — | Black (scrim) | Required |
| 3 | Date | Album date | Text / DM | Optional |
| 4 | Album Title | Album title | Text / DM | Required |
| 5 | Album Total | Photo count | Text / DM | Required |
| 6 | More icon | — | Icon (white over media) | Optional |
| 7 | Sponsor watermark | Sponsor logo | — | Optional |

The three text slots bind to the type role grid (Date = Callout, Album Title = Headline, Album Total = Utility) and resolve colour through `Text / DM`, so they read white over the photo in either mode. The More icon (`more_horiz`) is the card's interactive affordance but stays white over media for contrast rather than Accent.

## Typography

Roles and metrics mirror the Notion Typography Role Registry. Identical across Foreseeable and 5050.

| Slot | Role | Font | Size / line-height |
|------|------|------|--------------------|
| Date | Callout / base | Inter 500 | 14 / 20 |
| Album Title | Headline / base | Poppins 600 | 24 / 32 |
| Album Total | Utility / base | Inter 500 | 12 / 16 |

## Spacing

Measured off the Foreseeable Standard tile (448 × 252). Scale: `xs` 8, `md` 16, `lg` 20.

| 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 |