Pass Out
"Pass Out" is a single by British rapper Tinie Tempah.
Design page
The 2010s
Flat design: pure white, midnight blue text, a thin geometric display face, flat teal and orange, nothing glossy, nothing shadowed.
Colour
Every colour is a token on [data-decade="2010s"] 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 | #FFFFFF | Page. Pure white, on purpose | Page background |
--bg-2 | #EEF1F4 | Panels and quote backgrounds | Background; text on it is checked below |
--tx | #2C3E50 | All running text, midnight blue | 10.98:1 on bg |
--tx-2 | #5A6B7C | Secondary text | 5.48:1 on bg |
--primary | #1A6E86 | Links and outline buttons: flat teal | 5.80:1 on bg |
--accent | #F39C12 | Filled button and quote bar: flat orange | Fill only; see accent-ink |
--accent-ink | #2C3E50 | Text on the orange | 5.01:1 on accent |
--decor | #27AE60 | Flat green, decoration only | Never behind or as text |
--ui | #D5DBE1 | Rules and borders | Border, 1px rules |
--ui-strong | #2C3E50 | Form field borders | 10.98:1 on bg |
--focus | #1A6E86 | Focus ring | 5.80:1 on bg |
--danger | #C0392B | Errors | 5.44:1 on bg |
Contrast checks run at build time
| Pair | Measured | Needed | Result |
|---|---|---|---|
| tx on bg | 10.98:1 | 4.5:1 | Pass |
| tx-2 on bg | 5.48:1 | 4.5:1 | Pass |
| tx on bg-2 | 9.69:1 | 4.5:1 | Pass |
| tx-2 on bg-2 | 4.84:1 | 4.5:1 | Pass |
| primary on bg | 5.8:1 | 4.5:1 | Pass |
| primary on bg-2 | 5.12:1 | 4.5:1 | Pass |
| accent-ink on accent | 5.01:1 | 4.5:1 | Pass |
| danger on bg | 5.44:1 | 4.5:1 | Pass |
| focus on bg | 5.8:1 | 3:1 | Pass |
| ui-strong on bg | 10.98: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: Raleway, the thin geometric of every 2010s start-up landing page and festival poster.
- Body: Open Sans (2011), the body face of the same pages; the decade read almost everything in it.
- Colour: the flat UI palette that followed iOS 7 and Material: teal, orange and green with no gradients. Teal carries links; orange is a fill with dark text; green is decoration.
- Shape: flat. Four-pixel corners, no borders on the primary button, no shadows anywhere; hover darkens, nothing moves.
- Television: a thin black bezel on a slim central stand, and a flat-colour screen with nothing reflected in it.
Type
Display
2010s number ones
--font-display: Raleway, 'Helvetica Neue', Arial, sans-serif
Body
"Pass Out" is a single by British rapper Tinie Tempah.
--font-body: 'Open Sans', 'Segoe UI', Arial, sans-serif
Utility
Captions, labels, code and table headings. Never below 16px.
--font-utility: 'Open Sans', 'Segoe UI', Arial, 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.
Someone like You
"Someone like You" is a song recorded by English singer-songwriter Adele.
Somebody That I Used to Know
"Somebody That I Used to Know" is a song written, produced, and performed by the Australian singer-songwriter Gotye, featuring vocals from the New Zealand singer Kimbra.
Panel
A panel groups content with nothing clickable inside, so it is flat and does not look pressable. "Pass Out" is a single by British rapper Tinie Tempah.
Quote
"Someone like You" is a song recorded by English singer-songwriter Adele. She and Dan Wilson wrote and produced the track for her second studio album, 21 (2011).
Wikipedia, Someone like You
Tags
2010 2011 2012 2010s
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 |
|---|---|---|---|
| 2010 | Pass Out | Tinie Tempah | 2 |
| 2011 | Someone like You | Adele | 4 |
| 2012 | Somebody That I Used to Know | Gotye featuring Kimbra | 4 |
| 2013 | Mirrors | Justin Timberlake | 3 |
| 2014 | Happy | Pharrell Williams | 1 |
| 2015 | Love Me like You Do | Ellie Goulding | 4 |
| 2016 | 7 Years | Lukas Graham | 5 |
| 2017 | Shape of You | Ed Sheeran | 13 |
| 2018 | God's Plan | Drake | 9 |
| 2019 | Someone You Loved | Lewis Capaldi | 7 |
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.
2010s number ones on 13 March
- 2010Pass Out Tinie Tempah
- 2011Someone like You Adele
- 2012Somebody That I Used to Know Gotye featuring Kimbra
- 2013Mirrors Justin Timberlake
- 2014Happy Pharrell Williams
- 2015Love Me like You Do Ellie Goulding
- 20167 Years Lukas Graham
- 2017Shape of You Ed Sheeran
- 2018God's Plan Drake
- 2019Someone You Loved Lewis Capaldi