albumpalette.vercel.app — Design System

1. Visual Theme & Atmosphere

Album Palette is a music-reactive color extractor that makes its design philosophy literal: the UI adapts to match the album art it’s analyzing. The base canvas is pure black — a void that makes extracted colors pop. Everything is ephemeral and cinematic. The “design system” here is partly procedural: the --border-color and --image CSS custom properties change at runtime based on the selected album, meaning the design is always one palette extraction away from transformation. This is not a static brand — it’s a canvas that wears different albums.

2. Color Palette & Roles

Base (invariant)

• Background: rgb(0,0,0) — absolute black, the fixed ground
• Text: rgb(255,255,255) on dark areas, rgb(0,0,0) on light title logo
• Button resting text: rgba(255,255,255,0.5) — half-visible ghost labels

Dynamic (album-reactive)

• --border-color: #e8252c (default: a vivid cherry red from the demo album art)
• --image: the Spotify album cover URL — used as a CSS background-image

Extracted palette demo (from default album)

• Dominant: rgb(232,37,44) — vivid red (selected/active swatch)
• Light: rgb(242,135,138) — coral pink
• Mid-dark: rgb(138,14,19) — deep crimson
• Dark: rgb(113,17,21) — near-black red
• Deep: rgb(36,20,20) — almost-black

Structural

• Swatch borders on hover: --border-color reactive ring
• Title link: rgb(0,0,0) — the logo sits on a white-ish background context

3. Typography Rules

Album Palette uses the system sans-serif stack exclusively — no custom fonts loaded, which keeps the experience snappy and the focus entirely on the visual color extraction. The typographic hierarchy is intentionally minimal.

The 36px/600 anchor tag is the page title — “albumpalette” styled as a large bold link. Everything else defers to body text scale. There are no heading elements (h1–h6) defined in the typography data — this is a single-screen app, not a document. The absence of heading hierarchy is intentional: all visual hierarchy comes from color, not text size.

4. Component Stylings

Color swatch tiles

• Square divs: w-8 = 32px squares rendered in extracted palette colors
• Active/selected: ring-2 with --border-color reactive border — the selection ring updates to match the dominant color
• Shadow: rgba(0,0,0,0.1) 0px 20px 25px -5px, rgba(0,0,0,0.1) 0px 8px 10px -6px — Tailwind shadow-xl
• Border radius: 12px on cards, 9999px (full pill) on other elements

Artist/album suggestion buttons

• Background: rgba(255,255,255,0.05) — ghost white, barely visible on black
• Text: rgba(255,255,255,0.5) — half-opacity white label
• No hover state defined — focus only (browser default)
• The effect is intentional obscurity: these are hints, not calls to action

Background fixed panel

• div.fixed: rgb(0,0,0) — the persistent black base layer

Input field

• Background: transparent on black — the input is essentially invisible until typed in
• Text: white when active

Title treatment

• div.before_conic_title: rgba(255,255,255,0.1) — a subtle conic/radial glow behind the title, the only decorative background element

5. Layout Principles

The layout data is sparse by design — this is a single-screen micro-app with minimal structural complexity. No max-width containers, no grid columns, no complex section stacking. The design is centered on a single interaction: type an artist → see the palette. Everything arranges around that vertical flow.

Breakpoints: 640px, 768px, 1024px, 1280px, 1536px — the full Tailwind default breakpoint set. This breadth suggests a responsive grid for the color swatch display that reflows across screen sizes.

6. Depth & Elevation

The black background creates inherent depth — anything colored floats above the void. The color swatches use shadow-xl to give physical weight to what are essentially data objects. The rgba(255,255,255,0.1) title panel glow is the only atmospheric effect. There are no cards, panels, or surface layers — the design trusts negative space and color contrast for all spatial organization.

7. Do’s and Don’ts

Do

• Use pure rgb(0,0,0) as the immovable background
• Let the extracted palette provide all color — the UI chrome stays neutral
• Use rgba(255,255,255,0.05) for ghost surfaces that need to exist but not compete
• Apply shadow-xl to color swatches to give them physical presence
• Use 9999px border radius for pill shapes on small interactive elements

Don’t

• Define a static accent color — the design’s accent is always dynamically sourced
• Add text hierarchy with headings — this is a tool, not a document
• Use hover states on suggestion buttons — restraint communicates that they’re secondary
• Load custom fonts — system sans keeps the focus on the extracted colors, not typography
• Add white backgrounds or light surfaces — the void is the design

8. Responsive Behavior

The full Tailwind breakpoint ladder (640–1536px) suggests the color palette grid adapts from a single column on mobile to a multi-column display on desktop. The fixed black background scales independently of content. Input and suggestion buttons likely center-stack on mobile. At 640px, the swatch grid probably collapses from 4–5 columns to 2–3.

9. Agent Prompt Guide

Design a music color-extraction micro-app in the style of albumpalette.vercel.app: pure black (rgb(0,0,0)) background, white ghost UI elements at 5–50% opacity. No custom typeface — system sans only, 16px body, 36px/600 title link. Color swatches are 32px squares with shadow-xl and a reactive border ring using the dominant extracted color. Suggestion buttons are rgba(255,255,255,0.05) background with half-opacity text — intentionally ghostlike. Transparent input on black. A subtle rgba(255,255,255,0.1) conic glow behind the title. Full Tailwind breakpoint set for responsive swatch grid. The palette changes everything — the UI changes nothing.

Generated by Sparkbites — extracted from live CSS analysis