# Photo Viewer — Build Pack

Component build specification for the dev team. Paste this into your build prompt, or work from it directly. Token-led: build against semantic tokens; resolve values from the Colour and Typography registries.

| | |
|---|---|
| Component | Photos / Viewer / Photo Viewer |
| ID | `photos-viewer` |
| Cardinality | photo (one, with album navigation) |
| Container | 12C, full content width (1376) |
| Surface | Light + Dark lightbox (light WIP) |
| Status | Draft; both modes exported, light conversion in progress |
| Sketch doc | WDS Design System v3.0 |
| Sketch page | WIP: Components > Photos > Photo Details |
| Version | WDS v3.0 |
| Generated | 2026-07-14 |

The Photo Viewer is the single-photo lightbox: one photo at full size on a black stage, a fixed metadata panel to its right, and a thumbnail carousel below to move through the album. It opens from a photo cell in a Listing.

## Layout

A full-width viewer: photo stage (left) plus metadata panel (288 wide, right), with a thumbnail carousel spanning the full width beneath. The photo stage takes the remaining width (1028 x 713 in the master), ~25 gap to the panel.

## Parts

| # | Part | Data | Colour token | Notes |
|---|------|------|--------------|-------|
| 1 | Photo stage | Web Original | Black | Photo at full size, never cropped |
| 2 | Sponsor watermark | Sponsor mark | — | Mark applied to the media itself, corner-anchored (part of the web original). NOT the sponsor tag. Optional |
| 3 | More icon | — | Icon (white) | `more_horiz`, top-right of photo; opens the actions menu |
| 4 | Fullscreen icon | — | Icon (white) | `fullscreen`, top-right corner |
| 5 | Actions menu | Download, Share | SSD1 surface | Popover: `download` + `ios_share` rows, divider between |
| 6 | Metadata panel | — | — | Right column, 288 wide |
| 7 | Taken-on date | Capture date | Text 2 | Muted, top of panel |
| 8 | Tagged person | Person, Affiliation | Text 1 / Text 2 | Avatar + name + affiliation; repeats; reuse the Speaker Strip element |
| 9 | Sponsor tag | Sponsor logo | — | **New.** Sponsor logo lockup shown as a block in the panel, above session/event. The credit; distinct from the watermark. Optional, per photo |
| 10 | Session | Session | Text 2 / Text 1 | "SESSION" label over the session title |
| 11 | Event | Event | Text 2 / Text 1 | "EVENT" label over the event name; foot-anchored |
| 12 | Carousel | Album photo[] | SSD1 surface | Thumbnail filmstrip (170 tall, thumbs 120 tall) with `chevron_left` / `chevron_forward` |

Sponsor tag vs watermark: two independent placements. The **sponsor tag** credits the sponsor with a clean logo in the metadata panel; the **watermark** is the mark on the media itself. Set separately, and they may show different marks — keep them apart in the build.

## Typography

Panel text binds to the role grid and resolves colour through `Text / DM`; muted lines take a Text 2 override.

| Slot | Role | Font | Size / line-height |
|------|------|------|--------------------|
| Session / Event value | Meta / base | Inter 400 | 12 / 16 |
| Label ("SESSION", "EVENT") and date | Utility / base | Inter 500 | 12 / 16 (muted, Text 2) |
| Tagged person (name / affiliation) | Body / sm | Inter 500 / 400 | 13 / 20 (affiliation muted) |

The Download / Share menu labels are currently unstyled (Inter 12, no role). Assign a role — likely Utility — when finishing the master.

## Icons

`more_horiz`, `fullscreen`, `chevron_left`, `chevron_forward`, `download`, `ios_share` — all DM (white). Avatar = Speaker Image 100x100 Circle.

## Open items (Sketch master)

- Artboards are named inversely: `Photo Asset - LM` is the dark render, `Photo Asset - DM to DO` the light one. Rename to match, and finish the light conversion (currently provisional).
- Layer names are stale from an Event card (`Event Title Copy`, `Event Subtitle`, `Date & Time Copy`) — rename to content.
- Give the Download / Share labels a type role.
- Both modes required at ship if a light variant is kept.