groovy sunshine

the idea

Groovy Sunshine dresses the birthday site as a long seventies summer afternoon, the kind with a record playing in the next room and someone flipping burgers in the garden. the page is warm cream, a soft sunburst of mustard rays fans out from behind the top of every page, and two low hills of mustard and burnt orange roll along the bottom. everything is rounded: the cards, the buttons, the boxes friends write in, even the photos, which come back with soft corners like snapshots from the chemist.

the sticker rule still holds underneath, so every card keeps its dark ink outline and its hard little shadow, and every note, doodle, photo and clip sits exactly where a friend put it. what changes is the room it's in. friends' cards lose their torn edges and become rounded retro cards, each with a racing stripe of mustard, burnt orange and rust across the top, held down with pinstriped tape. daisies turn up wherever the site wants a little mark, and the headlines are set in a heavy seventies brush italic with a stacked rainbow shadow.

the palette

eight colours, straight out of a seventies kitchen, each with a job. warm cream is the page and oatmeal is the card stock half the cards are cut from. mustard is the accent: the main buttons, the name tabs on friends' cards, the site's name and the page you're on. burnt orange stamps things and carries the middle of the stacked shadow, sunflower is the tape and the highlighter, dusty rose marks the keys and prompts you can press, avocado means done, and a deep rust fills the love meter.

every word is dark ink on a light ground, and every colour pair on the page is checked for contrast, so the warm palette never costs anyone their reading. mustard comes with four checked alternatives, apricot, avocado, dusty rose and turquoise: pick one on the site's design page and the buttons, the name tabs and the scrollbar's tab all follow it, while the rainbow stays the rainbow. friends choosing a colour for their blob pick from six seventies colours too: mustard, burnt orange, avocado, dusty rose, turquoise and rust.

the type

• Shrikhand for the headlines: a heavy, swooping brush italic, outlined in ink over a stacked shadow of sunflower, burnt orange and rust, like the title on a record sleeve.
• Caveat for the handwriting: card messages, captions and the notes friends scribble in the margins.
• Nunito for everything you read at length, from the buttons to the names of the pages in the nav.

headlines keep the case they were written in, so the board's title and the line on a missing page read like a relaxed hello rather than a shout. friends' names sit on mustard tabs at the top of their cards, in the same brush italic, exactly as they typed them.

the groove (the nav)

the nav is a groove: a cream capsule across the top of every page with a wavy rainbow band running through it, five stripes of avocado, mustard, orange, rust and dusty rose between two ink lines. the site's name and every page ride the band as rounded white pills: the porch, drop a card, the mixtape, the island and the jamboree. each pill leans a little, like a row of friends swaying to a slow song. point at one and it straightens up, turns sunflower and does a tiny boogie. the page you're on turns mustard with a daisy stuck on its shoulder, and the music switch rides the band at the end as one more pill.

on a phone the pills ride the band in two rows, three on top and two underneath. the last one says more grooves, and it opens a cream card with the rainbow band across its top like an awning, holding the jamboree and the music switch. on a tablet the band runs through two rows of three, so every page has room without anything squeezing.

the scrollbar

even the scrollbar is in on it. the thumb is a striped tab: a rounded mustard pill outlined in ink, with a sock stripe round its middle, burnt orange over rust, which doubles as its grip. it rides a cream groove with a thin orange and mustard line waving down it. it turns sunflower under the pointer and avocado while you drag, and it follows whichever accent the host picked, so with turquoise chosen the tab turns turquoise and keeps its stripe.

small boxes, like the message box in the card maker and the island's menu, get a slimmer plain tab on a clear groove. Firefox draws scrollbars in a single colour, so there it's a plain dark-mustard thumb on the cream: the same idea, with fewer details.

page by page

• the front page: the birthday person's name in big mustard brush letters with a rainbow shadow, a white badge above it that says "far out, it's a birthday" with a daisy pinned on, and the countdown told on three rounded little television screens.
• the card maker: the step you're on blooms into a daisy, finished steps turn avocado with a tick, and every button wears a cream inline like an enamel badge.
• the board: renamed the mixtape, every card a track on it and the card count shouted from a scalloped sun badge. the tidy button says "line up the tracks", and "shuffle them again" puts them back.
• the festival: the jamboree in the nav, twelve booths and a row of arcade cabinets set up in the backyard, each game's best scores on a little white ticket, and a new best lands on the sun badge.
• the island: the menu opens on a striped retro card, and hugs pop up as +100 LOVE, FAR OUT! and GROOVY!
• a missing page: "this track skipped", a record with a slice broken off it, and a way back to the porch.

who it suits

the vintage lover, whose flat is all wood panelling, trailing plants and a record player rescued from a car-boot sale. the music friend, who once made you a mixtape and still asks whether you listened to side two. a laid-back backyard party with a paddling pool, a long playlist and a cake going a little soft in the sun. it suits a 30th as well as a 60th, and it's a lovely fit for anyone born in the seventies, or anyone who wishes they had been.

whichever look a site wears, the island stays its paper-cutout self, and every card, photo and clip friends left stays exactly as they left it. a look changes the record on the turntable, never the party.