Design reference
World Cup Watch Layout Guide
Use this page to identify the exact spacing layer or layout component before requesting visual changes.
Mobile spacing diagram
Schematic overlay, not an exact screenshot. Use it to name the spacing layer before changing CSS.
The space between the viewport/page edge and the outside edge of the hero or Tournament Score Dashboard card.
The space between the Tournament Score Dashboard card edge and the shared alignment rail used by the dashboard heading, intro, timestamp, stage buttons, Round Scores controls, Notes/Scoring Key row, and ScoreRoster table. Reduce D2 shared content-rail inset when this whole rail should move closer to the card edge.
The horizontally scrolling stage-button row inside the dashboard shared rail. On mobile, extra stage buttons can be clipped off to the right and scroll horizontally without creating page overflow.
The position of the Starting XI ScoreRoster table/container relative to the dashboard shared content rail. If the roster should align with the heading and controls, S4 should sit on the D2 rail.
The empty spacing inside the ScoreRoster table/container between the header or container edge and the player cards. Preserve S5 inner list gutter; it is a spacing layer, not a visible component, and it is different from D2.
The space between a player card’s border and the player name, country chip, score bubble and breakdown text.
The horizontal and vertical spacing between player name, position/price, country chip, score bubble and breakdown text.
The vertical gap between one player card and the next.
Current dashboard state to preserve
- Round Scores: the current production flow includes Round 1, Round 2, Round 3, Round of 32, and a live Round of 16. Round of 16 is an active settled score of 47 with Facundo Medina still pending.
- ScoreRoster: knockout score-mode tables use SCORING XI, BENCH, and TRANSFERS & CHIPS sections with points and breakdown rows. Mbappé displays as 18 as captain from a raw 9, Medina remains Pending · v EGY, and the visible bench total remains 9 without being counted in the active XI total.
- Transfer history: Round of 16 shows the four-transfer record Camilo Vargas → Mike Maignan, Ezri Konsa → Achraf Hakimi, Felix Nmecha → Ismael Saibari, and Harry Kane → Matheus Cunha.
- Captaincy route: the Movable Armband Route reflects corrected Round of 32 and Round of 16 route ordering and includes knockout-round Available to Add alternatives. Do not describe Available to Add as group-stage-only.
- Editorial imagery: round-specific AP captaincy-story cards are contextual editorial cards inside the route story. They are not hero, branding, social-promo, or generic decorative imagery, and the C3/high-friction image rules stay strict.
- Footer and policy: production footer copy includes Last updated: 2026-07-07 UTC, names The Associated Press in the independence notice, and links to the mature Independence and Content Use Policy covering AP Editorial Match Imagery, Commercial Status and Future Licensing, and licence-readiness language.
Video-readiness assessment
Yes, but needs one more dedicated video-storyboard PR. This page is still structurally useful as a clean capture/storyboard surface because it isolates the mobile spacing vocabulary and current dashboard state without the full production dashboard. It is not a finished video page yet: the diagram remains schematic, noindex, and development/reference oriented rather than a shot-by-shot video storyboard.
The ?pr675-revised-diagram query string is historical/dead for this guide: the page does not read it or branch behaviour from it.
How to ask for a change
- “Reduce D2 shared content-rail inset.”
- “Keep D2 unchanged, but increase S5 ScoreRoster inner list gutter.”
- “Do not change S6/S7 player-card internals.”
- “Keep heading, stage buttons, Round Scores controls and table aligned to the same D2 rail.”
- “Do not create a table-only breakout.”
Common mistakes
- Do not say “reduce the gutter” without naming the layer.
- D2 and S5 are different.
- Changing S5 will not reduce the space between the dashboard card edge and the table.
- Compressing S6/S7 can cause country-chip / score-bubble overlap.
- Moving only the table can break shared alignment.
Copyable labels
D2 shared content-rail inset
S5 ScoreRoster inner list gutter
S6 player-card padding
S7 player-card internal gaps