Design system

Edit colors per component below. Previews are independent until you save; saved colors apply across the app.

Back to home

Typography

Type scale used across the app.

Page header

Header fill (Card)

--card

bg-card

Border (Border)

--border

border-border

Logo color (Primary)

--primary

bg-primary

App background

Page background (Background)

--background

bg-background

Headings

Page title (text-2xl)

Section title (text-lg)

Body (text-sm)

Page title (Foreground)

--foreground

text-foreground

Section title (Card foreground)

--card-foreground

text-card-foreground

Body (Foreground)

--foreground

text-foreground

Label, muted text, link button

Muted helper text for descriptions.

Text link

Label (Foreground)

--foreground

text-foreground

Helper (Muted foreground)

--muted-foreground

text-muted-foreground

Link (Primary)

--primary

bg-primary

Badge

DefaultSecondary

Fill (Primary)

--primary

bg-primary

Text (Primary foreground)

--primary-foreground

text-primary-foreground

Secondary fill (Secondary)

--secondary

bg-secondary

Secondary text (Secondary foreground)

--secondary-foreground

text-secondary-foreground

Inline code

Copy .env.example to .env.local

Body (Muted foreground)

--muted-foreground

text-muted-foreground

Code text (Foreground)

--foreground

text-foreground

Code bg (Muted)

--muted

bg-muted

Buttons

Button component variants from @/components/ui/button.

default — active

Fill (Primary)

--primary

bg-primary

Text (Primary foreground)

--primary-foreground

text-primary-foreground

Focus ring (Ring)

--ring

ring-ring

default — disabled

Fill (Primary)

--primary

bg-primary

Text (Primary foreground)

--primary-foreground

text-primary-foreground

size lg — active

Fill (Primary)

--primary

bg-primary

Text (Primary foreground)

--primary-foreground

text-primary-foreground

size lg — disabled

Fill (Primary)

--primary

bg-primary

Text (Primary foreground)

--primary-foreground

text-primary-foreground

outline — default

Border (Border)

--border

border-border

Fill (Background)

--background

bg-background

Text (Foreground)

--foreground

text-foreground

Hover fill (Muted)

--muted

bg-muted

outline + lg (footer pattern)

Outline border (Border)

--border

border-border

Outline bg (Background)

--background

bg-background

Primary fill (Primary)

--primary

bg-primary

Primary text (Primary foreground)

--primary-foreground

text-primary-foreground

Form controls

Input, Label, Select, Textarea, Switch, Tabs, and composed field components.

Input — empty

Border (Input)

--input

border-input

Fill (Card)

--card

bg-card

Text (Foreground)

--foreground

text-foreground

Placeholder (Muted foreground)

--muted-foreground

text-muted-foreground

Focus ring (Ring)

--ring

ring-ring

Input — filled

Border (Input)

--input

border-input

Fill (Card)

--card

bg-card

Text (Foreground)

--foreground

text-foreground

Select (admin filters)

Border (Input)

--input

border-input

Fill (Card)

--card

bg-card

Text (Foreground)

--foreground

text-foreground

Menu (Popover)

--popover

bg-popover

Menu text (Popover foreground)

--popover-foreground

text-popover-foreground

Menu item hover (Accent)

--accent

bg-accent

Menu item hover text (Accent foreground)

--accent-foreground

text-accent-foreground

AutoResizeTextarea — short

Border (Input)

--input

border-input

Fill (Card)

--card

bg-card

Text (Foreground)

--foreground

text-foreground

AutoResizeTextarea — long

Border (Input)

--input

border-input

Fill (Card)

--card

bg-card

Text (Foreground)

--foreground

text-foreground

PickerField — date & time

Label (Foreground)

--foreground

text-foreground

Input border (Input)

--input

border-input

Input fill (Card)

--card

bg-card

Icon (Muted foreground)

--muted-foreground

text-muted-foreground

VotingToggle (Switch)

Track on (Primary)

--primary

bg-primary

Track off (Input)

--input

border-input

Thumb (Background)

--background

bg-background

Label (Foreground)

--foreground

text-foreground

LyricsHighlightWordsField

Matched words appear in red in the admin lyrics preview. Remove all to disable highlighting.

  • fuck
  • shit
  • bitch
  • cunt
  • whore
  • nigga
  • nigger
  • retard
  • retarded

Helper (Muted foreground)

--muted-foreground

text-muted-foreground

Chips (Muted)

--muted

bg-muted

Chip text (Foreground)

--foreground

text-foreground

Surfaces & cards

Card component and empty-state patterns.

Card — padded

Card content

border-border, rounded-2xl, shadow-sm.

Fill (Card)

--card

bg-card

Text (Foreground)

--foreground

text-foreground

Muted text (Muted foreground)

--muted-foreground

text-muted-foreground

Border (Border)

--border

border-border

Empty state (dashed)

No events yet

Create your first event to start collecting song requests.

Fill (Card)

--card

bg-card

Border (Border)

--border

border-border

Text (Foreground)

--foreground

text-foreground

Button (Primary)

--primary

bg-primary

Setup warning heading

Setup required

Amber heading variant for configuration errors.

Card (Card)

--card

bg-card

Heading

text-amber-800

Hardcoded — not a design token

Body (Muted foreground)

--muted-foreground

text-muted-foreground

Media & content

Domain components (unchanged) plus timestamps.

ExplicitBadge

E

Fill

bg-zinc-500

Hardcoded — not a design token

Text

text-white

Hardcoded — not a design token

SongTitleLine

Levitating

WAP

E

Title (Foreground)

--foreground

text-foreground

AlbumArt — fallback (sm / md / lg)

Border (Border)

--border

border-border

Fill (Muted)

--muted

bg-muted

Icon (Muted foreground)

--muted-foreground

text-muted-foreground

AlbumArt — with image (sm)

Border (Border)

--border

border-border

EventCover — card variant (placeholder)

Demo event

Card (Card)

--card

bg-card

Placeholder

bg-zinc-50

Hardcoded — not a design token

Border

border-zinc-200

Hardcoded — not a design token

EventCover — thumbnail

Demo

Border

border-zinc-200

Hardcoded — not a design token

Placeholder

bg-zinc-50

Hardcoded — not a design token

EventArtPlaceholder

Default event cover

Fill

bg-zinc-50

Hardcoded — not a design token

Border (Border)

--border

border-border

RelativeTime (~2 hours ago)

…

Text (Muted foreground)

--muted-foreground

text-muted-foreground

Patterns (mocked)

Composite UI slices with fixture data — no API calls.

EventListCard

Spring Formal 2026 cover

Spring Formal 2026

Dress code: cocktail attire. Requests close at midnight.

May 15, 2026, 8 PM – May 16, 2026, 2 AM

42 requests · 3 new

Card (Card)

--card

bg-card

Hover (Muted)

--muted

bg-muted

Title (Foreground)

--foreground

text-foreground

Meta (Muted foreground)

--muted-foreground

text-muted-foreground

Border (Border)

--border

border-border

DesignQueueRow — requested

  • Levitating

    Dua Lipa

    …

  • WAP

    E

    Cardi B ft. Megan Thee Stallion

    …

Title (Foreground)

--foreground

text-foreground

Artist (Muted foreground)

--muted-foreground

text-muted-foreground

Time (Accent foreground)

--accent-foreground

text-accent-foreground

Vote active (Primary)

--primary

bg-primary

Art border (Border)

--border

border-border

DesignQueueRow — declined

  • Never Gonna Give You Up

    Rick Astley

    …

    DJ: Already played twice tonight.

Decline note (Destructive)

--destructive

bg-destructive

Title (Foreground)

--foreground

text-foreground

TrackPreviewBar (static controls)

Levitating

Dua Lipa

0:12 / 0:30

iTunes preview · Stop closes player · Play another row to switch

Bar bg (Muted)

--muted

bg-muted

Title (Foreground)

--foreground

text-foreground

Artist (Muted foreground)

--muted-foreground

text-muted-foreground

Time (Accent foreground)

--accent-foreground

text-accent-foreground

Slider track (Muted)

--muted

bg-muted

Slider fill (Primary)

--primary

bg-primary

Slider thumb border (Ring)

--ring

ring-ring

Slider thumb fill (Background)

--background

bg-background

Play border (Border)

--border

border-border

Play fill (Background)

--background

bg-background

Play icon (Foreground)

--foreground

text-foreground

HighlightedLyrics

We're caught in a landslide No escape from reality Open your eyes Look up to the skies and see

Body (Foreground)

--foreground

text-foreground

Highlight (Accent)

--accent

bg-accent

Table action buttons

Border (Border)

--border

border-border

Fill (Background)

--background

bg-background

Text (Foreground)

--foreground

text-foreground

Hover (Muted)

--muted

bg-muted

Sortable column header pattern

Muted label (Muted foreground)

--muted-foreground

text-muted-foreground

Active label (Foreground)

--foreground

text-foreground

Hover text (Primary)

--primary

bg-primary

Overlays

ModalShell wraps shadcn Dialog; guest search uses Sheet.

ModalShell (Dialog)

Dialog surface (popover token)

Overlay

bg-zinc-900/40

Hardcoded — not a design token

Surface (Popover)

--popover

bg-popover

Text (Popover foreground)

--popover-foreground

text-popover-foreground

Border (Border)

--border

border-border

Guest request flow

RequestSheet uses a full-height Sheet for search and a Dialog for confirm — preview on a live guest event.

Body (Muted foreground)

--muted-foreground

text-muted-foreground

Emphasis (Foreground)

--foreground

text-foreground

Code bg (Muted)

--muted

bg-muted

Icons

Lucide icons at h-4 / h-5. App logo uses the primary token for its mark color.

Logo

Logo color (icon & wordmark) (Primary)

--primary

bg-primary

Common sizes

h-5 closeh-4 playh-4 pauseh-5 voteh-3.5 tableh-4 picker

Icon (Foreground)

--foreground

text-foreground

Caption (Muted foreground)

--muted-foreground

text-muted-foreground

Loading

Spinners for async UI — inline in buttons or centered in a region. Page chrome stays mounted; only the loading region updates.

Loading spinner

xssmmdlg

Spinner (Primary)

--primary

bg-primary

Loading state — default

Loading lyrics…

Spinner (Primary)

--primary

bg-primary

Message (Muted foreground)

--muted-foreground

text-muted-foreground

Loading state — muted spinner

Searching…

Spinner (Muted foreground)

--muted-foreground

text-muted-foreground

Message (Muted foreground)

--muted-foreground

text-muted-foreground

Loading state — inline

Searching…

Spinner (Muted foreground)

--muted-foreground

text-muted-foreground

Message (Muted foreground)

--muted-foreground

text-muted-foreground

Feature screens

Full-page composites — open real routes for manual QA.

  • Home / events list/
  • Design system/design
  • Create event/new
  • Admin dashboard/e/[slug]/admin
  • Guest event view/e/[slug]
  • Tidal export modalAdmin → Send to Tidal

Palette reference