Design system

Read-only catalog of every primitive and composite used in the app. All colors, fonts, and radii live in globals.css.

Back to home

Brand

Logo lock-up and gradient mark.

Full lock-up
Icon only
Warm gradient
Gradient text

Request Line

Typography

Unbounded for display, Inter for UI and body.

Display (Unbounded)

Spring Formal 2026

Section heading

Body (Inter)

Body copy at base size for paragraphs and labels.

Muted helper text for descriptions and timestamps.

Mono

request-line.dance/e/spring-formal-2026

Badge
DefaultSecondary
Inline code

Copy .env.example to .env.local

Color

All tokens are CSS variables on :root, overridden per [data-theme].

Brand

--brand

#c314a7

--accent

#e3a01a

--danger

#f43476

--success

#21ba72

Surfaces

--bg

#0e0712

--bg-elevated

#181020

--surface

#1f1530

--surface-2

#2a1c40

--surface-3

#382556

--ink

#f5eff8

Gradient stops

grad-1

#c314a7

grad-2

#c71585

grad-3

#cd5c5c

grad-4

#cd853f

grad-5

#e3a01a

Buttons

Primary fills with brand; large size is pill-shaped.

Primary
Large (pill)
Outline
Ghost
Destructive
Footer pattern

Form controls

Input, Label, Select, Textarea, Switch, Tabs, and composed fields.

Input — empty
Input — filled
Select
Textarea — short
Textarea — long
Picker — date & time
Switch (VotingToggle)
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
Label

Surfaces & cards

Card component and empty-state patterns.

Card — padded

Card content

Card surface uses the elevated background token.

Empty state (dashed)

No events yet

Create your first event to start collecting song requests.

Media & content

Domain components plus timestamps.

ExplicitBadge
E
SongTitleLine

Levitating

WAP

E
AlbumArt — fallback (sm / md / lg)
AlbumArt — with image (sm)
EventCover — card variant (gradient placeholder)
EventCover — thumbnail
RelativeTime (~2 hours ago)
…

Patterns (mocked)

Composite UI slices with fixture data.

EventListCard
+3 new

Spring Formal 2026

42 requests

Queue row — requested

  • Levitating

    Dua Lipa

    …

  • WAP

    E

    Cardi B ft. Megan Thee Stallion

    …

Queue row — declined

  • Never Gonna Give You Up

    Rick Astley

    …

    DJ: Already played twice tonight.

TrackPreviewBar (static controls)

Levitating

Dua Lipa · preview

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

Overlays

ModalShell wraps the Dialog primitive; guest search uses a Sheet.

ModalShell

Icons

Lucide at h-4 / h-5.

Common sizes
h-5 closeh-4 playh-4 pauseh-5 voteh-3.5 tableh-4 stop

Loading

Spinners for async UI — inline or centered.

Loading spinner
xssmmdlg
Loading state — default

Loading lyrics…

Loading state — inline

Searching…

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]