It's Not Unusual
"It's Not Unusual" is a song written by Les Reed and Gordon Mills, first recorded by a then-unknown Tom Jones, after it had first been offered to Sandie Shaw.
Design page
The 1960s
Pop art and the psychedelic poster: a fat display face, a Swiss grotesque for the reading, and hot magenta, orange and acid green on cream.
Colour
Every colour is a token on [data-decade="60s"] 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 | #FFF4D6 | Page. A warm poster stock, not white | Page background |
--bg-2 | #FFE3A0 | Tinted panels and quote backgrounds | Background; text on it is checked below |
--tx | #1F1A3D | All running text | 15.05:1 on bg |
--tx-2 | #5C5478 | Secondary text, captions | 6.40:1 on bg |
--primary | #A8105F | Links, outline buttons, current nav item | 6.60:1 on bg |
--accent | #FF6A13 | Filled button, quote bar, decoration | Fill only; see accent-ink |
--accent-ink | #1F1A3D | Text on the accent fill | 5.75:1 on accent |
--decor | #7CB518 | Decoration only, never behind text | Never behind or as text |
--ui | #E6B6D8 | Rules and borders | Border, 1px rules |
--ui-strong | #1F1A3D | Form field borders | 15.05:1 on bg |
--focus | #1F1A3D | Focus ring | 15.05:1 on bg |
--danger | #B3001B | Errors | 6.53:1 on bg |
Contrast checks run at build time
| Pair | Measured | Needed | Result |
|---|---|---|---|
| tx on bg | 15.05:1 | 4.5:1 | Pass |
| tx-2 on bg | 6.4:1 | 4.5:1 | Pass |
| tx on bg-2 | 13.15:1 | 4.5:1 | Pass |
| tx-2 on bg-2 | 5.59:1 | 4.5:1 | Pass |
| primary on bg | 6.6:1 | 4.5:1 | Pass |
| primary on bg-2 | 5.77:1 | 4.5:1 | Pass |
| accent-ink on accent | 5.75:1 | 4.5:1 | Pass |
| danger on bg | 6.53:1 | 4.5:1 | Pass |
| focus on bg | 15.05:1 | 3:1 | Pass |
| ui-strong on bg | 15.05: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: Bowlby One, a fat rounded face in the line of Cooper Black, which the decade's record sleeves and posters leaned on. Big, friendly, slightly cartoonish, as the decade's pop art was.
- Body: Archivo, a grotesque in the Helvetica family. Helvetica (1957) was the sans of the sixties, from Swiss corporate work to the New York subway.
- Colour: the San Francisco poster palette (Wes Wilson, Victor Moscoso) was hot magenta, orange and acid green pushed against each other. Here they are tamed for reading: the magenta is darkened until it passes as a link, the orange and green are kept for fills and decoration only.
- Shape: round everything. Pill buttons with a hard green drop, deep corner radii, thick rules.
- Television: a walnut console on splayed legs, a deeply rounded black-and-white tube, two bakelite dials. The ident is a plain white caption, as a 405-line picture would have carried it.
Type
Display
1960s number ones
--font-display: 'Bowlby One', 'Arial Black', Impact, sans-serif
Body
"It's Not Unusual" is a song written by Les Reed and Gordon Mills, first recorded by a then-unknown Tom Jones, after it had first been offered to Sandie Shaw.
--font-body: Archivo, Helvetica, Arial, sans-serif
Utility
Captions, labels, code and table headings. Never below 16px.
--font-utility: Archivo, Helvetica, 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.
These Boots Are Made for Walkin'
"These Boots Are Made for Walkin'" is a hit song written by Lee Hazlewood and recorded by American singer Nancy Sinatra.
Release Me
"Release Me" (sometimes rendered as "Release Me (and Let Me Love Again)") is a country song written by Eddie Miller and Robert Yount in 1949.
Panel
A panel groups content with nothing clickable inside, so it is flat and does not look pressable. "It's Not Unusual" is a song written by Les Reed and Gordon Mills, first recorded by a then-unknown Tom Jones, after it had first been offered to Sandie Shaw.
Quote
"These Boots Are Made for Walkin'" is a hit song written by Lee Hazlewood and recorded by American singer Nancy Sinatra. It charted on January 22, 1966, and reached No.
Wikipedia, These Boots Are Made for Walkin'
Tags
1965 1966 1967 1960s
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 |
|---|---|---|---|
| 1965 | It's Not Unusual | Tom Jones | 1 |
| 1966 | These Boots Are Made for Walkin' | Nancy Sinatra | 4 |
| 1967 | Release Me | Engelbert Humperdinck | 6 |
| 1968 | Cinderella Rockefella | Esther & Abi Ofarim | 3 |
| 1969 | Where Do You Go To (My Lovely)? | Peter Sarstedt | 4 |
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.
1960s number ones on 13 March
- 1965It's Not Unusual Tom Jones
- 1966These Boots Are Made for Walkin' Nancy Sinatra
- 1967Release Me Engelbert Humperdinck
- 1968Cinderella Rockefella Esther & Abi Ofarim
- 1969Where Do You Go To (My Lovely)? Peter Sarstedt