glossy valley

the idea

Glossy Valley dresses the birthday site as a glossy game menu, the chunky, shiny kind you'd click through before the fun started. panels are sky-blue glass with a bright top half and a navy bevel. inside them sit near-white wells for the words. buttons are round and glossy with white icons. sections are split by a hairline with three small diamonds, and a faceted gem is the one ornament.

nothing is torn and nothing is tilted. where the sticker look is paper and marker, this one is plastic and light: level panels, soft navy shadows instead of hard offset ones, and a sky wash with a glow on the horizon behind every page. it's bright, it's playful, and it's very easy to read.

the palette and the type

glass blue is the accent: the main buttons and the page you're on. panel blue and sky top make the glass. navy carries every word and outline. mint means done, sunburst gold is the gem and the badges, selection teal lights up whatever the pointer is over, and party purple fills the love meter. glass blue comes with five checked alternatives, bubble pink, mint, sunburst, lilac and aqua, every one tested so navy stays readable on it; the buttons and the scrollbar's capsule follow the pick.

• Baloo 2 for the headlines: round and bold, with a navy outline.
• Nunito for labels, buttons and everything you read at length.
• Gochi Hand stays for what friends write by hand, so their cards still look like their notes.

the glass bar (the nav)

the nav is a glossy glass capsule floating just inside the top of the page, bright along its top half, with a white rim in a navy bevel. on it sits a row of big glass pucks, home, make, gifts, play and arcade, each with a white icon and its name underneath in navy. point at one and it lights up teal, lifting a little while a glint runs across its glass. the page you're on glows in the accent colour inside a white ring and a teal halo, its icon turned navy and its name in white on a navy plate. a small gold diamond separates the pucks from the music switch, a glossy capsule of its own.

on a phone the pucks drop to a dock along the bottom of the screen, where thumbs are: home, make, gifts, play and more, which opens a glass sheet upward with the arcade and the music switch. the bar at the top keeps just the site's name (on the front page, the gem). the card maker has its own back and next bar along the bottom, so there the pucks stay up top under the name, and one bar never covers the other.

the scrollbar

the scrollbar is a glass capsule: a glossy pill in the site's accent colour with a navy ring, a thin bevel inside it and a small gold gem at its middle, riding a frosted channel with a recessed lip. it glows teal under the pointer and goes pressed navy while you drag, with the bevel flipped like a button pushed in.

small boxes, like the card maker's message box and the island's menu, get a slimmer capsule without the gem. Firefox draws scrollbars in a single colour, so there it's a plain navy capsule on the channel.

page by page

• the front page: the birthday person's name in rounded glossy letters beside a framed picture of a gem over green hills, drawn in code.
• the card maker: glossy step dots, white wells to type in, and six candy-glass colours for a friend's blob: glass blue, bubble pink, mint, sunburst, lilac and coral.
• the board: renamed the gift pile, with every card a level glass panel. the tidy button says "line them up", and "let them float" puts them back.
• the festival: twelve booths and a row of glossy arcade cabinets.
• the island: the menu opens as a glass sheet, and hugs pop up as +100 LOVE, LOVE UP! and SO LOVED.
• a missing page: "this room isn't built yet", and a way back to the valley.

who it suits

the gamer. anyone who misses chunky glossy menus and the sound a button made when you pressed it. a friend who'd rather have bright and playful than handmade and scrappy. it's a good fit for a 21st, a birthday that's going to be shared on a big screen at a party, and for anyone whose favourite colour is "sky".

the island itself stays the same paper-cutout world whichever look the site wears (the look reaches its menu and the words that pop up), and every card, photo and clip friends left is exactly the same: a look changes how the site is dressed, never what's in it.