# Cassettine — Design System
> A digital mixtape creation platform that lets users customize and share music playlists as virtual cassette tapes.
- **Canonical:** https://uiuxskills.com/library/cassettine
- **Source:** https://www.cassettine.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:12:55.862Z

---

---
version: alpha
name: Cassettine
description: >-
  A digital mixtape creation platform that lets users customize and share music playlists as virtual
  cassette tapes.
tone: Playful, nostalgic, and high-energy.
color-scheme: light
colors:
  primary: "#FDF533"
  secondary: "#000000"
  surface: "#FFFFFF"
  on-primary: "#000000"
  on-surface: "#5137FF"
  error: "#9B59B6"
  surface-container: "#F3F4F6"
  outline: "#9CA3AF"
  focus-ring: "#5137FF"
  success: "#33FF57"
typography:
  display-lg:
    fontFamily: Agrandir
    fontSize: 72px
    fontWeight: 700
  headline-md:
    fontFamily: Agrandir
    fontSize: 56.4px
    fontWeight: 700
  body-md:
    fontFamily: Satoshi
    fontSize: 20.4px
    fontWeight: 400
  body-sm:
    fontFamily: Satoshi
    fontSize: 16px
    fontWeight: 400
  label-md:
    fontFamily: Satoshi
    fontSize: 14px
    fontWeight: 500
  label-sm:
    fontFamily: Satoshi
    fontSize: 12px
    fontWeight: 400
  headline-sm:
    fontFamily: Agrandir
    fontSize: 24px
    fontWeight: 700
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 6px
  sm: 12px
  md: 24px
  lg: 48px
  xl: 72px
  2xl: 96px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#E5DE2D"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface}"
    typography: "{typography.label-md}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.on-surface}"
  link-hover:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "#FFFFFF"
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "#000000"
  card-container:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: ease-out
elevation:
  sm: 0 1px 3px rgba(0,0,0,0.2)
  md: 0 4px 6px rgba(0,0,0,0.2)
  lg: 0 10px 40px rgba(0,0,0,0.25)
---

## Overview

Cassettine is a high-energy, playful platform designed for music enthusiasts to create and share personalized digital mixtapes. The visual identity leans into nostalgia with a modern, bold aesthetic, utilizing vibrant yellow accents against a clean, high-contrast black-and-white foundation to create an engaging, user-friendly experience.

## Colors

The color strategy relies on a high-contrast palette to guide user attention toward interactive elements. The brand uses a signature yellow for primary actions, while keeping the structural background clean and neutral.

*   Primary (#FDF533): The brand's signature vibrant yellow, used for primary CTAs and high-impact accents.
*   Secondary (#000000): Deep black used for text, secondary buttons, and structural elements to provide high contrast.
*   Surface (#FFFFFF): Clean white background for maximum readability and a modern, minimal feel.
*   On-Surface (#5137FF): Brand-specific blue used for links and interactive text elements.
*   Error (inferred) (#9B59B6): Semantic color for error states.
*   Surface-container (inferred) (#F3F4F6): Light grey for subtle container backgrounds.
*   Outline (#9CA3AF): Neutral grey for borders and dividers.
*   Focus-ring (inferred) (#5137FF): High-visibility blue for focus states.
*   Success (inferred) (#33FF57): Semantic color for success states.

## Typography

Typography choices prioritize hierarchy and readability, pairing a bold, geometric display font with a clean, modern sans-serif for body content.

*   Display-lg (Agrandir): Used for hero headlines to create maximum impact.
*   Headline-md (Agrandir): Used for section headers.
*   Body-md (Satoshi): Standard body text for readability.
*   Body-sm (inferred) (Satoshi): Secondary text and labels.
*   Label-md (inferred) (Satoshi): Small UI labels.
*   Label-sm (inferred) (Satoshi): Caption text.
*   Headline-sm (inferred) (Agrandir): Sub-headers for features.

## Layout

The layout follows a clean, centered approach with generous vertical spacing, utilizing a 6px base unit for all spacing increments. The page pattern follows a logical flow: nav, hero, features, use-cases, and footer. The hero section is composed of a centered headline and subhead with a primary CTA button on a white background. The design is mobile-first, with all sections stacking vertically on smaller screens.

## Elevation & Depth

Elevation is used sparingly to draw attention to primary CTAs, creating a floating, high-impact effect.

*   elevation.sm: Subtle card lift.
*   elevation.md: Used for dropdowns and popover elements.
*   elevation.lg: Applied specifically to buttons to create a floating, high-impact effect.

## Shapes

The brand uses a consistent radius system to balance a modern, minimal aesthetic with the retro theme of the cassette. Sharp corners are used for structural containers, while interactive elements utilize a rounded approach.

The `{rounded.lg}` radius is the standard for primary buttons, providing a friendly, approachable feel. Containers typically use `{rounded.md}` to maintain a clean, organized structure.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button-primary
The primary action button uses `{colors.primary}` for the background and `{typography.label-md}` for the text. Use this for the main call to action in the hero section or to trigger the primary workflow.

### Card
The card component utilizes `{colors.surface}` with `{rounded.lg}` and an `{colors.outline}` border. Use this to group related content or feature highlights.

### Input-field
The input field features a clean `{colors.surface}` background with `{rounded.md}` corners. When focused, the border should transition to `{colors.focus-ring}` to indicate active state.

### Badge
Badges use `{colors.primary}` with `{typography.label-sm}`. Use these for small status indicators or categories.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs to ensure high visibility. | Never use `{colors.primary}` for body text as it lacks sufficient contrast. |
| Apply `{typography.display-lg}` for hero headlines to maintain brand impact. | Avoid using `{typography.body-md}` for headers; always use `{typography.display-lg}` or `{typography.headline-md}`. |
| Use `{elevation.lg}` on buttons to create a floating, interactive feel. | Never apply `{elevation.lg}` to non-interactive elements. |
| Maintain consistent `{spacing.md}` between section elements. | Do not use spacing smaller than `{spacing.xs}` between interactive elements. |
| Use `{colors.on-surface}` for links to ensure they stand out against body text. | Do not mix different border-radius values on the same component type. |
| Apply `{rounded.lg}` to all primary buttons for a consistent shape language. | Avoid using `{colors.error}` for anything other than validation states. |
| Use `{input-field}` with `{rounded.md}` for all form inputs. | Do not use `{colors.secondary}` for primary action buttons. |
| Use `{colors.outline}` for subtle dividers and borders. | Avoid using `{colors.surface-container}` for primary backgrounds. |

## Content Style

CTA style is imperative and action-oriented, using verbs like "Get it started" or "Create" to encourage immediate interaction. Labels should be concise and direct.

Headings are bold and benefit-driven, designed to communicate the value of the platform instantly. They should be phrased as declarative statements that highlight the user's gain.

Copy density is kept low. Use short, scannable paragraphs and frequent lists to break up information. Maintain a rhythm that allows for generous whitespace between sections.

## Imagery & Icons

The imagery style is mixed, combining high-quality vector illustrations of cassette tapes with clean, modern iconography for streaming services. Illustrations should feel playful and nostalgic, while icons remain minimal and functional. Avoid cluttered imagery; ensure all assets are high-resolution and maintain the brand's high-contrast, clean aesthetic.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Cassettine, a playful, nostalgic mixtape platform with a minimal high-contrast aesthetic. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.lg}` — never hardcode hex values, font sizes, or pixel radii.
2. Respect the components block exactly. `button-primary` uses `{rounded.lg}` and `{elevation.lg}`; `card` uses `{rounded.lg}`; inputs use `{rounded.md}`. Do not invent variants not listed.
3. Follow the Layout narrative: mobile-first, vertically stacked sections, 6px base unit, one breakpoint at 768px. Use `{spacing.xs}` through `{spacing.2xl}` for all gaps and padding.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., using `{colors.primary}` for body text), surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source exists (theme file, Storybook), those values override the spec.

## Output contract

**Must:**
- Use named tokens for every color, font, radius, spacing, and elevation value.
- Include hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{elevation.lg}` to primary buttons; `{elevation.sm}` to cards; `{elevation.md}` to dropdowns and popovers.
- Match CTA copy style — imperative, action-oriented, concise — per the Content Style section.
- Render hero headlines in `{typography.display-lg}` only in hero contexts; use `{typography.headline-md}` for section headers.

**Must NOT:**
- Invent colors, fonts, radii, or spacing values absent from the spec.
- Use generic system defaults when a brand token exists.
- Apply `{elevation.lg}` to non-interactive elements.
- Use `{colors.primary}` for body text or `{colors.secondary}` for primary CTAs.
- Add emoji, filler copy, or marketing language.
- Rewrite existing page copy, button labels, or alter navigation structure.

## When in doubt
- Ask the user before introducing any token not in the spec.
- Prefer composing existing components over creating new ones.
- For ambiguous backgrounds, default to `{colors.surface}`; for container backgrounds, use `{colors.surface-container}`.
- For ambiguous text on dark surfaces, default to `{colors.surface}`; for links, use `{colors.on-surface}`.
- Inferred tokens are approximations — flag them if precision is critical.