Wand'rin' Star
"Wand'rin' Star" is a song that was originally written by Alan Jay Lerner (lyrics) and Frederick Loewe (music) for the stage musical Paint Your Wagon in 1951.
Design page
The 1970s
Earth tones and disco geometry: harvest gold, avocado and burnt orange on parchment, a rounded geometric display face and a soft rounded body face.
Colour
Every colour is a token on [data-decade="70s"] 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 | #F4E8CC | Page. Parchment, the colour of a seventies kitchen | Page background |
--bg-2 | #E9D59F | Tinted panels and quote backgrounds | Background; text on it is checked below |
--tx | #3A2211 | All running text, a dark chocolate brown | 12.18:1 on bg |
--tx-2 | #6B4A28 | Secondary text | 6.55:1 on bg |
--primary | #8F3409 | Links and outline buttons, a burnt rust | 6.48:1 on bg |
--accent | #D89A1D | Filled button and quote bar: harvest gold | Fill only; see accent-ink |
--accent-ink | #3A2211 | Text on the gold | 6.04:1 on accent |
--decor | #5F6E2B | Avocado, decoration only | Never behind or as text |
--ui | #C9A96A | Rules and borders | Border, 1px rules |
--ui-strong | #3A2211 | Form field borders | 12.18:1 on bg |
--focus | #3A2211 | Focus ring | 12.18:1 on bg |
--danger | #9E1B1B | Errors | 6.57:1 on bg |
Contrast checks run at build time
| Pair | Measured | Needed | Result |
|---|---|---|---|
| tx on bg | 12.18:1 | 4.5:1 | Pass |
| tx-2 on bg | 6.55:1 | 4.5:1 | Pass |
| tx on bg-2 | 10.22:1 | 4.5:1 | Pass |
| tx-2 on bg-2 | 5.5:1 | 4.5:1 | Pass |
| primary on bg | 6.48:1 | 4.5:1 | Pass |
| primary on bg-2 | 5.44:1 | 4.5:1 | Pass |
| accent-ink on accent | 6.04:1 | 4.5:1 | Pass |
| danger on bg | 6.57:1 | 4.5:1 | Pass |
| focus on bg | 12.18:1 | 3:1 | Pass |
| ui-strong on bg | 12.18: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: Righteous, a rounded geometric built from seventies disco and Art Deco revival lettering, the shapes on a roller rink sign or a Bee Gees sleeve.
- Body: Nunito, a rounded sans. The decade's text face was ITC Souvenir (1970), soft and rounded in every ad and album note; Nunito has that softness without being a copy.
- Colour: harvest gold, avocado green and burnt orange were the decade's domestic palette, on appliances, carpets and cars. The rust is darkened to pass as a link; gold is a fill with dark text on it; avocado is decoration.
- Shape: pill buttons with a glossy gold face and a highlight along the top, soft corners, warm double rules.
- Television: a teak-veneer colour set with a brushed-metal surround, and the test card's colour bars across the top of the picture.
Type
Display
1970s number ones
--font-display: Righteous, 'Trebuchet MS', sans-serif
Body
"Wand'rin' Star" is a song that was originally written by Alan Jay Lerner (lyrics) and Frederick Loewe (music) for the stage musical Paint Your Wagon in 1951.
--font-body: Nunito, 'Segoe UI', Verdana, sans-serif
Utility
Captions, labels, code and table headings. Never below 16px.
--font-utility: Nunito, 'Segoe UI', Verdana, 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.
Baby Jump
"Baby Jump" is a popular song, released as a single in 1971 by Mungo Jerry.
Without You
"Without You" is a song written by Pete Ham and Tom Evans of Welsh rock group Badfinger, and first released on their 1970 album No Dice.
Panel
A panel groups content with nothing clickable inside, so it is flat and does not look pressable. "Wand'rin' Star" is a song that was originally written by Alan Jay Lerner (lyrics) and Frederick Loewe (music) for the stage musical Paint Your Wagon in 1951.
Quote
"Baby Jump" is a popular song, released as a single in 1971 by Mungo Jerry.
Wikipedia, Baby Jump
Tags
1970 1971 1972 1970s
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 |
|---|---|---|---|
| 1970 | Wand'rin' Star | Lee Marvin | 3 |
| 1971 | Baby Jump | Mungo Jerry | 2 |
| 1972 | Without You | Nilsson | 5 |
| 1973 | Cum On Feel the Noize | Slade | 4 |
| 1974 | Jealous Mind | Alvin Stardust | 1 |
| 1975 | If | Telly Savalas | 2 |
| 1976 | I Love to Love (But My Baby Loves to Dance) | Tina Charles | 3 |
| 1977 | Chanson D'Amour | The Manhattan Transfer | 3 |
| 1978 | Wuthering Heights | Kate Bush | 4 |
| 1979 | Tragedy | Bee Gees | 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.
1970s number ones on 13 March
- 1970Wand'rin' Star Lee Marvin
- 1971Baby Jump Mungo Jerry
- 1972Without You Nilsson
- 1973Cum On Feel the Noize Slade
- 1974Jealous Mind Alvin Stardust
- 1975If Telly Savalas
- 1976I Love to Love (But My Baby Loves to Dance) Tina Charles
- 1977Chanson D'Amour The Manhattan Transfer
- 1978Wuthering Heights Kate Bush
- 1979Tragedy Bee Gees