Blinding Lights
"Blinding Lights" is a song by Canadian singer-songwriter the Weeknd, from his fourth studio album, After Hours (2020).
Design page
The 2020s
Digital lavender and viva magenta on a soft off-white, a heavy contemporary display face, large radii and long soft shadows.
Colour
Every colour is a token on [data-decade="2020s"] in decades.css; nothing in the markup names a hex. The last column is the measured WCAG contrast against the page background (or, for the accent ink, against the accent fill).
| Token | Value | Use | Contrast |
|---|---|---|---|
--bg | #FBF8FF | Page. A soft lavender-white | Page background |
--bg-2 | #EEE7FA | Panels and quote backgrounds | Background; text on it is checked below |
--tx | #1E1533 | All running text | 16.50:1 on bg |
--tx-2 | #5B4F78 | Secondary text | 7.05:1 on bg |
--primary | #6B22C9 | Links and outline buttons: purple | 7.40:1 on bg |
--accent | #B8234F | Filled button and quote bar: viva magenta | Fill only; see accent-ink |
--accent-ink | #FFF5F8 | Text on the magenta | 5.80:1 on accent |
--decor | #2FB596 | Mint, decoration only | Never behind or as text |
--ui | #CFC4E6 | Rules and borders | Border, 1px rules |
--ui-strong | #1E1533 | Form field borders | 16.50:1 on bg |
--focus | #6B22C9 | Focus ring | 7.40:1 on bg |
--danger | #B3001B | Errors | 6.81:1 on bg |
Contrast checks run at build time
| Pair | Measured | Needed | Result |
|---|---|---|---|
| tx on bg | 16.5:1 | 4.5:1 | Pass |
| tx-2 on bg | 7.05:1 | 4.5:1 | Pass |
| tx on bg-2 | 14.42:1 | 4.5:1 | Pass |
| tx-2 on bg-2 | 6.16:1 | 4.5:1 | Pass |
| primary on bg | 7.4:1 | 4.5:1 | Pass |
| primary on bg-2 | 6.47:1 | 4.5:1 | Pass |
| accent-ink on accent | 5.8:1 | 4.5:1 | Pass |
| danger on bg | 6.81:1 | 4.5:1 | Pass |
| focus on bg | 7.4:1 | 3:1 | Pass |
| ui-strong on bg | 16.5:1 | 3:1 | Pass |
Text pairs need 4.5:1 (WCAG 1.4.3). The focus ring and field borders need 3:1 (1.4.11). A failing pair stops the build.
Why these choices
- Display: Syne, a wide, heavy contemporary face of the kind the streaming services and festival identities of the decade use.
- Body: Manrope, a modern geometric sans with open forms, in place of the Inter that every app defaulted to.
- Colour: Pantone's own decade so far: digital lavender (2023) and viva magenta (2023), with a mint for decoration. Purple carries links; magenta is a fill with pale text.
- Shape: pill buttons with a purple-to-magenta gradient that lift on hover, large radii, long soft shadows.
- Television: an edge-to-edge OLED with almost no bezel and no stand, lit from behind by its own ambient glow.
Type
Display
2020s number ones
--font-display: Syne, 'Arial Black', sans-serif
Body
"Blinding Lights" is a song by Canadian singer-songwriter the Weeknd, from his fourth studio album, After Hours (2020).
--font-body: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif
Utility
Captions, labels, code and table headings. Never below 16px.
--font-utility: Manrope, system-ui, sans-serif
Scale
- h1Heading one
- h2Heading two
- h3Heading three
- ledeLede paragraph at 1.25rem
- bodyBody text at 1.0625rem, line height 1.6, 68 characters wide
- floorThe smallest text on the page, 1rem (16px)
Decoration
A three-colour line and three shapes. The markup is the same on every page: three spans for the line, three for the shapes. The decade's CSS decides what a line and a shape are here, in its own three tokens (primary, accent, decor).
The line
The shapes
Behind a page's opening, kept to the right and the corners so they never sit under the text.
Television
A song page plays its video on the decade's own set. With a video id the embed sits in the screen; without one the screen carries an ident and a play link.
Components
Buttons
One primary button per group. The outline button is the comparable second action. Each decade shapes them its own way; see "Why these choices".
Links in text
Every link is coloured and underlined, so it reads as a link without colour alone. Only buttons and cards drop the underline. For example, the full listing.
Cards
A grid of equal-weight linked items. Each title is a real heading and the whole card is one link.
Drivers License
"Drivers License" is the debut single by American singer-songwriter Olivia Rodrigo.
We Don't Talk About Bruno
"We Don't Talk About Bruno" is a song from Disney's 2021 animated musical film Encanto, with music and lyrics written by Lin-Manuel Miranda.
Panel
A panel groups content with nothing clickable inside, so it is flat and does not look pressable. "Blinding Lights" is a song by Canadian singer-songwriter the Weeknd, from his fourth studio album, After Hours (2020).
Quote
"Drivers License" is the debut single by American singer-songwriter Olivia Rodrigo. It was released on January 8, 2021, by Geffen and Interscope Records, as the lead single from her debut studio album Sour.
Wikipedia, Drivers License
Tags
2020 2021 2022 2020s
Disclosure
How the decade is chosen
A song's decade follows from its year and is never stored. 1983 is the 80s; 2007 is the 2000s.
Table
| Year | Single | Artist | Weeks |
|---|---|---|---|
| 2020 | Blinding Lights | The Weeknd | 3 |
| 2021 | Drivers License | Olivia Rodrigo | 9 |
| 2022 | We Don't Talk About Bruno | Carolina Gaitán, Mauro Castillo, Adassa, Rhenzy Feliz, Diane Guerrero and Stephanie Beatriz | 7 |
| 2023 | Flowers | Miley Cyrus | 10 |
| 2024 | Texas Hold 'Em | Beyoncé | 4 |
| 2025 | Pink Pony Club | Chappell Roan | 2 |
| 2026 | Rein Me In | Sam Fender and Olivia Dean | 3 |
Forms
Labels above fields, hints below labels, what is optional said so, errors in a summary at the top and again by the field. Nothing here submits anywhere.
2020s number ones on 13 March
- 2020Blinding Lights The Weeknd
- 2021Drivers License Olivia Rodrigo
- 2022We Don't Talk About Bruno Carolina Gaitán, Mauro Castillo, Adassa, Rhenzy Feliz, Diane Guerrero and Stephanie Beatriz
- 2023Flowers Miley Cyrus
- 2024Texas Hold 'Em Beyoncé
- 2025Pink Pony Club Chappell Roan
- 2026Rein Me In Sam Fender and Olivia Dean