starlight

the idea

Starlight puts the whole birthday site under the sky at the moment the first stars come out. the sun has just gone down, so the top of every page is a soft lavender, as if night were drawing a curtain from above, and the bottom still holds a band of peach and rose where the light is leaving. gold sparkles and tiny white pinpricks are scattered through the evening, thick near the top and thinning out as you scroll, the way the sky fills in a few stars at a time. it's dreamy, but it's never dark: every word stays dark ink on a light ground, so it reads as easily as any other page.

friends' cards become moonlit paper. the torn edges of the scrapbook look are rounded into soft corners with a clean ink line, the hard shadow underneath has a little night mixed into it, and inside each card runs a dotted frame like the border of a star chart, with a small gold star pinned to its corner. the tape that holds them down is a sheer ribbon printed with tiny white stars. and where the scrapbook look leaves one coffee ring on a page, this one leaves a pale crescent moon rising in the corner instead.

the palette

moonlight cream is the page and the paper cards, and lavender mist is the card stock and the evening veil. periwinkle is the accent: the big buttons, the name tabs on friends' cards and the site's name. star gold goes on every star, the tape, the badges and the stamp a card gets when it lands. peach glow and rose horizon are the last of the sunset, peach for hover and party hats, rose for the little pops of love and the record button. moonbeam blue marks keys and prompts, and night indigo fills the love meter and the three little windows of the countdown.

every colour pair on the page is checked for contrast, so an evening sky never turns into a hard one to read. periwinkle comes with four checked alternatives: lavender, rose, moonbeam and wish gold. pick one and the buttons, the name tabs, the site's name and the moon you drag down the scrollbar all follow it, while the stars stay gold.

the type

• Comfortaa for the headlines: soft, round geometric letters with a white rim, a hard ink shadow and a faint gold glow behind them, like a name written in starlight.
• Caveat for what friends write by hand: a loose, friendly pen, set a little larger and a little heavier than usual so every note reads easily.
• Nunito for everything you read at length, the labels and the buttons: round, open and comfortable at any size.

the site's name gets the front page to itself, with two gold stars twinkling slowly at its corners and a small line above it that says a birthday under the stars. under the big button, the hand line reads "write it, draw it, film it. add your star." because on this site, every card a friend leaves is one more star in the sky.

the constellation (the nav)

the nav is a constellation. across the top of every page floats a band of dusk, lavender at one end where night is coming on and peach at the other where the sun went down, with a few stars of its own on the dark side. each page is a star with its name underneath: home, add a star, the sky, the island and night fair. the stars are joined by a dotted line that zigzags between them, up and down like the lines on a star chart. point at a star and it lights up gold. the page you're on shines: a bigger gold star in a soft halo, twinkling slowly. every so often a shooting star streaks across the band, and if you're quick you can make a wish.

on a phone the band keeps the site's name across the top (on the front page, a crescent moon cradling a little star) and five stars underneath it. the last one is more, which opens a small scrap of evening sky holding the night fair and the music switch. the music switch itself becomes a moonlit pill wherever it sits.

the scrollbar

the scrollbar is a slim strip of night. down the middle of its pale lavender groove runs a narrow band of sky, deep indigo at the top fading to a dusky violet at the bottom, pricked with tiny stars. the thumb riding it is the moon: a moonlight-cream pill in a dark ink line, shaded softly on one side, with a small ink crescent between two star points where the grip lines would be. it turns star gold under the pointer and takes the site's accent colour while you drag.

small boxes, like the card maker's message box and the island's menu, get a plain, slimmer moon on a clear groove. Firefox draws scrollbars in a single colour, so there it's a night-indigo bar on the lavender groove: the same evening, fewer details.

page by page

• the front page: the name with its twinkling stars, and the countdown told in three little windows onto the night sky, gold stars inside and the numbers glowing.
• the card maker: the steps are joined by a thin line like a constellation, and the step you're on is lit as a gold star. every button has a moonlit sheen, and a star pops onto its corner when you point at it.
• the board: renamed the night sky, every card a moonlit one. the tidy button says "line up the stars", and "let them drift" scatters them again.
• the night fair: the festival's booths and arcade cabinets, each game's best scores kept in a dotted box.
• the island: hugs pop up as STARSTRUCK!, SO BRIGHT! and TWINKLE!, the menu opens as a moonlit card, and the loading bar fills with gold stars on a strip of night.
• a missing page: "this star wandered off", a sleepy crescent moon beside the outline of the star that's gone, and a button to follow the stars home.

who it suits

the dreamer, first of all: the friend who still makes a wish on the first star of the evening. the astronomy fan who can tell you which bright dot is really a planet. the night owl whose best conversations start after midnight. it's made for late celebrations too: a birthday dinner that runs long, a party that starts after sunset, a winter birthday when it's dark by five, or a birthday spent far apart, with everyone looking up at the same sky.

the island keeps its own paper-cutout world whichever look the site wears, so walking around feels the same; the look reaches its menu, its loading bar and the words that pop up. what friends left doesn't change either: every note, doodle, photo and clip is exactly as they made it, because a look changes how the site is dressed, never what's in it.