Dance Party

Design System Reference

Apple TV dashboard app that lets businesses display customer dashboards on office TVs. The design system uses a dark-first theme with purple-to-pink gradient accents, pill-shaped buttons, and generous spacing that reads well on large screens.

danceparty.ai · Platform: Static HTML/CSS · Theme: dark-first

Design Principles

Bold gradients on deep black backgrounds. High contrast for TV-distance readability. Generous whitespace with a 120px section rhythm. Pill-shaped interactive elements. Widget-first component philosophy built for ambient display contexts.

Key Tokens

Colors

Dance Party uses a deep black foundation with vibrant purple-to-pink gradient accents. The palette is designed for high contrast on TV displays and dark office environments.

Brand Gradient

Brand Colors

Backgrounds

Borders

Text

Semantic

Typography

Dance Party uses Inter across all weights from 400 to 800. The type scale is designed for readability at TV distance, with large display headings and comfortable body text.

Font Family

Font Weights

Heading Scale

Body Scale

Spacing

Dance Party uses generous spacing optimized for TV-distance readability. Sections use 120px vertical padding, with a 24px card gap and 1280px container max-width.

Spacing Scale

Layout Measurements

Borders & Shadows

Border Radii

Shadows

Shadow Specs

Buttons

Dance Party buttons are pill-shaped (9999px radius) with generous padding. The primary button uses the signature purple-to-pink gradient with a purple glow shadow.

Button Variants

Small Buttons

Button Specs

Navigation

The site header is a translucent glassmorphism bar with backdrop blur. Links are medium-weight secondary text that brightens to white on hover.

Website Header

Nav Specs

Hero

The hero section features a centered layout with a gradient glow backdrop, pill badge, large display heading with gradient text, and dual CTA buttons.

Hero Specs

Feature Cards

Feature cards use the card background with a subtle border that shifts to a purple tint on hover. Each card lifts with a -4px translateY on hover.

Card Specs

Widget Mockups

Widgets are the core display units on the Apple TV app. They use 20px border radius, heavier shadow, and structured internal layouts for leaderboards, announcements, and metrics.

Widget Specs

How It Works

The "How It Works" section uses three numbered steps with large semi-transparent step numbers as a visual anchor.

Step Specs

CTA Section

The call-to-action section uses a centered layout with a radial purple glow behind the content, creating depth and drawing focus to the action buttons.

CTA Specs

Footer

A multi-column footer on the panel background with categorized links and muted text colors.

Footer Specs

CSS Variables

Copy this block into your project to consume the full Dance Party token set via custom properties.

:root {
  /* Backgrounds */
  --dp-bg: #0A0A0A;
  --dp-card: #1A1A1A;
  --dp-card-hover: #222222;
  --dp-elevated: #252525;
  --dp-panel: #111111;

  /* Brand */
  --dp-purple: #A855F7;
  --dp-pink: #EC4899;
  --dp-pink-light: #F472B6;
  --dp-blue: #3B82F6;
  --dp-gradient: linear-gradient(135deg, #A855F7, #EC4899);

  /* Text */
  --dp-text-primary: #FFFFFF;
  --dp-text-secondary: #9CA3AF;
  --dp-text-muted: #6B7280;

  /* Borders */
  --dp-border: #2A2A2A;
  --dp-border-subtle: rgba(255,255,255,0.05);

  /* Shadows */
  --dp-shadow-card: 0 2px 8px rgba(0,0,0,0.2);
  --dp-shadow-button: 0 4px 14px rgba(168,85,247,0.3);
  --dp-shadow-widget: 0 8px 32px rgba(0,0,0,0.4);

  /* Radii */
  --dp-radius-button: 9999px;
  --dp-radius-card: 16px;
  --dp-radius-icon: 12px;
  --dp-radius-widget: 20px;

  /* Spacing */
  --dp-section-y: 120px;
  --dp-card-gap: 24px;
  --dp-container: 1280px;

  /* Motion */
  --dp-transition-fast: all 0.15s ease;
  --dp-transition-normal: all 0.2s ease;
  --dp-transition-medium: all 0.3s ease;
}

Tailwind Mapping

The paired JSON export includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.theme.extend,
  },
};

// Component recipes are available at
// designSystem.tailwind.componentRecipes

Component Recipes