American Pie
"American Pie" is a song by the American singer and songwriter Don McLean.
Design page
The 2000s
The white iPod and the blue iMac: cool white, one hard blue, lime and orange, a techno display face and Verdana, the screen face of the decade.
Colour
Every colour is a token on [data-decade="2000s"] 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 | #F3F6FA | Page. Cool white, the iPod box | Page background |
--bg-2 | #DFE7F2 | Panels and quote backgrounds | Background; text on it is checked below |
--tx | #16213A | All running text | 14.76:1 on bg |
--tx-2 | #4A5570 | Secondary text | 6.86:1 on bg |
--primary | #1A5BC9 | Links and outline buttons: one hard blue | 5.73:1 on bg |
--accent | #A8D81A | Filled button and quote bar: lime | Fill only; see accent-ink |
--accent-ink | #16213A | Text on the lime | 9.52:1 on accent |
--decor | #FF7A00 | Orange, decoration only | Never behind or as text |
--ui | #BFC9D9 | Rules and borders | Border, 1px rules |
--ui-strong | #16213A | Form field borders | 14.76:1 on bg |
--focus | #1A5BC9 | Focus ring | 5.73:1 on bg |
--danger | #B3001B | Errors | 6.61:1 on bg |
Contrast checks run at build time
| Pair | Measured | Needed | Result |
|---|---|---|---|
| tx on bg | 14.76:1 | 4.5:1 | Pass |
| tx-2 on bg | 6.86:1 | 4.5:1 | Pass |
| tx on bg-2 | 12.84:1 | 4.5:1 | Pass |
| tx-2 on bg-2 | 5.97:1 | 4.5:1 | Pass |
| primary on bg | 5.73:1 | 4.5:1 | Pass |
| primary on bg-2 | 4.98:1 | 4.5:1 | Pass |
| accent-ink on accent | 9.52:1 | 4.5:1 | Pass |
| danger on bg | 6.61:1 | 4.5:1 | Pass |
| focus on bg | 5.73:1 | 3:1 | Pass |
| ui-strong on bg | 14.76: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: Audiowide, a wide techno face from the era of the glossy logo and the ringtone chart.
- Body: Verdana (1996), the decade's screen face on every Windows machine and most web pages; as with Georgia on the nineties page, it loads from nowhere.
- Colour: Apple's white plastic, the translucent blue of the iMac and the lime of the first Xbox and MSN. The blue carries links; lime is a fill with dark text; orange is decoration.
- Shape: the Web 2.0 button: a glossy pill with a highlight across the top half, a one-pixel border and a soft drop shadow.
- Television: a silver widescreen plasma on a pedestal, glossy bezel, and a blue screen with the reflection every gadget rendering had.
Type
Display
2000s number ones
--font-display: Audiowide, 'Trebuchet MS', Verdana, sans-serif
Body
"American Pie" is a song by the American singer and songwriter Don McLean.
--font-body: Verdana, Geneva, 'DejaVu Sans', sans-serif
Utility
Captions, labels, code and table headings. Never below 16px.
--font-utility: Verdana, Geneva, 'DejaVu Sans', 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.
It Wasn't Me
"It Wasn't Me" is the first single from Jamaican-American reggae musician Shaggy's fifth studio album, Hot Shot (2000).
Anything Is Possible" / "Evergreen
"Anything Is Possible" is a song co-written by Chris Braide and Cathy Dennis for the winner of the first series of Pop Idol in the United Kingdom.
Panel
A panel groups content with nothing clickable inside, so it is flat and does not look pressable. "American Pie" is a song by the American singer and songwriter Don McLean.
Quote
"It Wasn't Me" is the first single from Jamaican-American reggae musician Shaggy's fifth studio album, Hot Shot (2000). The song features vocals from British-Jamaican singer Rikrok.
Wikipedia, It Wasn't Me
Tags
2000 2001 2002 2000s
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 |
|---|---|---|---|
| 2000 | American Pie | Madonna | 1 |
| 2001 | It Wasn't Me | Shaggy featuring RikRok | 1 |
| 2002 | Anything Is Possible" / "Evergreen | Will Young | 3 |
| 2003 | Beautiful | Christina Aguilera | 2 |
| 2004 | Toxic | Britney Spears | 1 |
| 2005 | Dakota | Stereophonics | 1 |
| 2006 | It's Chico Time | Chico | 2 |
| 2007 | Shine | Take That | 2 |
| 2008 | Mercy | Duffy | 5 |
| 2009 | My Life Would Suck Without You | Kelly Clarkson | 1 |
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.
2000s number ones on 13 March
- 2000American Pie Madonna
- 2001It Wasn't Me Shaggy featuring RikRok
- 2002Anything Is Possible" / "Evergreen Will Young
- 2003Beautiful Christina Aguilera
- 2004Toxic Britney Spears
- 2005Dakota Stereophonics
- 2006It's Chico Time Chico
- 2007Shine Take That
- 2008Mercy Duffy
- 2009My Life Would Suck Without You Kelly Clarkson