Atomic
"Atomic" is a song by American rock band Blondie from their fourth studio album, Eat to the Beat (1979).
Design page
The 1980s
Neon and Memphis: a dark indigo ground, cyan, hot pink and yellow, a neon-tube display face, a geometric sans and hard square shadows.
Colour
Every colour is a token on [data-decade="80s"] 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 | #120A2E | Page. A deep night indigo | Page background |
--bg-2 | #211449 | Panels and quote backgrounds | Background; text on it is checked below |
--tx | #F4EEFF | All running text | 16.71:1 on bg |
--tx-2 | #C3B7E6 | Secondary text | 10.14:1 on bg |
--primary | #5CE6FF | Links and outline buttons: electric cyan | 12.83:1 on bg |
--accent | #FF4FA6 | Filled button and quote bar: hot pink | Fill only; see accent-ink |
--accent-ink | #120A2E | Text on the pink | 6.24:1 on accent |
--decor | #FFE14D | Yellow, for the hard drop shadow and decoration | Never behind or as text |
--ui | #4D3B94 | Rules and borders | Border, 1px rules |
--ui-strong | #C3B7E6 | Form field borders | 10.14:1 on bg |
--focus | #FFE14D | Focus ring | 14.55:1 on bg |
--danger | #FF7B7B | Errors | 7.55:1 on bg |
Contrast checks run at build time
| Pair | Measured | Needed | Result |
|---|---|---|---|
| tx on bg | 16.71:1 | 4.5:1 | Pass |
| tx-2 on bg | 10.14:1 | 4.5:1 | Pass |
| tx on bg-2 | 14.69:1 | 4.5:1 | Pass |
| tx-2 on bg-2 | 8.91:1 | 4.5:1 | Pass |
| primary on bg | 12.83:1 | 4.5:1 | Pass |
| primary on bg-2 | 11.28:1 | 4.5:1 | Pass |
| accent-ink on accent | 6.24:1 | 4.5:1 | Pass |
| danger on bg | 7.55:1 | 4.5:1 | Pass |
| focus on bg | 14.55:1 | 3:1 | Pass |
| ui-strong on bg | 10.14: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: Monoton, a neon tube face, the lettering of a nightclub sign or an MTV ident. Used only at large sizes, where its lines stay open.
- Body: Montserrat, a geometric sans in the line of ITC Avant Garde (1970) and Futura, which the decade's pop and electronic sleeves set everything in.
- Colour: the Memphis group (1981) and neon signage: saturated cyan, pink and yellow against black. The cyan carries links because it passes easily on the dark ground; pink is a fill with dark text on it; yellow is the shadow colour.
- Shape: no rounded corners at all. Hard offset shadows in a second colour, as on a Memphis print; buttons are letter-spaced blocks that shove down into their shadow when pressed.
- Television: a black boxy set with a silver pinstripe, square push-buttons and a red standby LED, showing a VCR's blue screen with its on-screen display.
Type
Display
1980s number ones
--font-display: Monoton, 'Arial Black', sans-serif
Body
"Atomic" is a song by American rock band Blondie from their fourth studio album, Eat to the Beat (1979).
--font-body: Montserrat, 'Century Gothic', 'Avant Garde', Arial, sans-serif
Utility
Captions, labels, code and table headings. Never below 16px.
--font-utility: Montserrat, 'Century Gothic', 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.
Shaddap You Face
"Shaddap You Face" is a novelty song written and performed by Joe Dolce about a rebellious Italian boy.
The Lion Sleeps Tonight
"Mbube" is a popular song written and composed by South African musician Solomon Linda in 1939.
Panel
A panel groups content with nothing clickable inside, so it is flat and does not look pressable. "Atomic" is a song by American rock band Blondie from their fourth studio album, Eat to the Beat (1979).
Quote
"Shaddap You Face" is a novelty song written and performed by Joe Dolce about a rebellious Italian boy. Released in late 1980, it set a number of sales and longevity records.
Wikipedia, Shaddap You Face
Tags
1980 1981 1982 1980s
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 |
|---|---|---|---|
| 1980 | Atomic | Blondie | 2 |
| 1981 | Shaddap You Face | Joe Dolce Music Theatre | 3 |
| 1982 | The Lion Sleeps Tonight | Tight Fit | 3 |
| 1983 | Total Eclipse of the Heart | Bonnie Tyler | 2 |
| 1984 | 99 Red Balloons | Nena | 3 |
| 1985 | You Spin Me Round (Like a Record) | Dead or Alive | 2 |
| 1986 | Chain Reaction | Diana Ross | 3 |
| 1987 | Stand by Me | Ben E. King | 3 |
| 1988 | I Should Be So Lucky | Kylie Minogue | 5 |
| 1989 | Too Many Broken Hearts | Jason Donovan | 2 |
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.
1980s number ones on 13 March
- 1980Atomic Blondie
- 1981Shaddap You Face Joe Dolce Music Theatre
- 1982The Lion Sleeps Tonight Tight Fit
- 1983Total Eclipse of the Heart Bonnie Tyler
- 198499 Red Balloons Nena
- 1985You Spin Me Round (Like a Record) Dead or Alive
- 1986Chain Reaction Diana Ross
- 1987Stand by Me Ben E. King
- 1988I Should Be So Lucky Kylie Minogue
- 1989Too Many Broken Hearts Jason Donovan