The home page
About this kit
Sunny Side Roller Club is a fictional roller rink on a lake road, made as a mockup from two Pinterest references: a podcast site with a lavender bar, condensed serif headlines, and pill buttons, and a candy brand with a bright hero, tickers, and a giant product word. It grew into six pages: home, the week at the rink as a board of cards you can book from, three party packages with the questions people ask, a shop of ten things photographed through a duotone, a bag that follows you between pages to a checkout, and a contact page with the hours, a drawn map, and a form that knows what you came about. Headlines rise word by word, the tickers run faster as you scroll, and the cards lean toward the cursor.
The kit is a cobalt and an apricot on cream, with paper for the cards and a near-black ink. Instrument Serif sets the headlines, the buttons, and the tickers, tight enough that the letters nearly touch; Syne at a heavy weight sets the wordmark and the giant SKATE SHOP; Instrument Sans sets the text and the small caps labels. The rink, the sessions, the prices, and the press are invented, and the photos are from Unsplash, printed in the palette.
The kit as CSS
:root {
--sunny-side-cobalt: #2E3BFF;
--sunny-side-apricot: #FFB27A;
--sunny-side-cream: #F3EEE3;
--sunny-side-paper: #FFFDF8;
--sunny-side-ink: #16130F;
--sunny-side-display: "Instrument Serif", Georgia, serif;
--sunny-side-wordmark: "Syne", system-ui, sans-serif;
--sunny-side-text: "Instrument Sans", system-ui, sans-serif;
}
The fonts are Google Fonts under the SIL Open Font License, and the colors are yours to take. The mockup is Tide's: Sunny Side Roller Club is invented for design demonstration, and the pictures in it are placeholders.