A custom playlist creator for sharing music. Fits music apps, social tools, share-to-friend products, and consumer-creative landing page designs.
Screenshots of 2 pages from cassettine.com: homepage and Cassettine 01.
Three ways to ship a Cassettine-style UI.
Use in your AI builder, no-code tool, or CMS
Paste the DESIGN.md in and ask the tool to restyle your existing site to match this design, or start a brand new one from scratch with the same visual language.
Not affiliated with Cassettine. All trademarks belong to their respective owners.
About Cassettine
Hero
The home page opens on a loud, saturated yellow background cut by wide diagonal streaks of mint green, like a retro sticker sheet. A tiny black logo, a cassette-shaped icon with the wordmark, sits at the top center, and a small circular badge with a starburst and the words "make it pop" runs around the edge at the top right. In the middle, a single 3D cassette in lilac and amber floats with a soft shadow. Its label reads "awesome mixtape" in a brush script. The headline, "Make your playlist pop," is set in a very wide, heavy, black display face, and a small black get-it-started button with rounded corners sits beneath it. The second capture of the page swaps the colors for a pale aqua background with lime shards and a black cassette with a yellow label, so the same layout is a theme that changes.
Three-step explainer
A solid electric-blue band begins with a line-drawn smiling cassette with a heart above it, then a huge white heading, "Send a music gift in just 60 seconds," and a short line saying to pick a style, a message and a playlist link. The rest of the page is three stacked full-width rounded cards, one for each step, each with a tiny step number, a heavy black title, a one-line description and a screenshot on the right. Step one, "Import a playlist," sits on yellow and green stripes with logos of three music streaming services and a screenshot of a dark playlist menu with the share submenu open. Step two, "Customize your tape," sits on a mint and cyan starburst background with a screenshot of a final title and link form next to a preview card for a recipient. Step three, "Share your mixtape," sits on pink with a messaging-app screenshot that shows the link sent to a friend.
Ways to use it
A charcoal band, "Ways to use your Cassettine," shows a horizontal row of colored cards, each with a different cassette and handwritten label, such as a throwback mix, a love mix and a dance mix, on yellow, pink and pale aqua backgrounds. The row runs off the right edge, so it reads as a carousel of examples.
Design notes
The page borrows its look from cassette culture: high-saturation color blocks, hard diagonal shapes, pixel-free flat vector art, a wide display typeface and a brush script on the tape labels. The only action on the first screen is a single button, and each step is a self-contained card, so the whole page can be understood by scrolling once.
Based on two full-page screenshots of cassettine.com: the home page and a second color variant of it. The playlist names and the messages in the screenshots are examples on the page. The product is described only as shown on the page. Check the live site for how the product currently works.
Related designs
Catalog Pass included