Design System Skill

Purpose: Reference this skill when building UI components, styling elements, or working with visual design in Morperhaus Concerts.

When to use:

• •Creating new components
• •Styling existing components
• •Adding animations or interactions
• •Working with colors or typography
• •Building for specific scenes

Quick Reference

Scene Components

Scene Backgrounds

Typography

Button Patterns

Primary Toggles (sort, filter, view mode):

• •Dark scenes: bg-gray-800 inactive → bg-indigo-600 active
• •Light scenes: bg-white border inactive → bg-violet-600 active

Secondary Actions (reset, close):

• •Dark scenes: bg-white/10 backdrop-blur-sm
• •Light scenes: bg-white/80 backdrop-blur-sm

Inputs (search, text fields):

• •All scenes: bg-white/10 backdrop-blur-sm border-white/20

Genre Colors

Deep jewel tones for concert poster aesthetic:

TypeScript:

import { GENRE_COLORS, getGenreColor } from '@/constants/colors';
const color = getGenreColor('New Wave'); // '#1e40af'

Typography Scale

Usage:

<h1 className="font-serif text-7xl tracking-tight">The Music</h1>
<p className="font-sans text-xl text-gray-500">A diverse journey</p>

Animation Standards

Entry Animation

initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}

Stagger Delays

• •Title: delay: 0
• •Visualization: delay: 0.2
• •Footer: delay: 0.4

Hover Effects

• •Duration: 200ms
• •Cards: scale(1.02) + shadow increase
• •Buttons: Background color transition

Standard Easing

• •General: cubic-bezier(0.4, 0, 0.2, 1) (ease-out)
• •Slide panels: cubic-bezier(0.4, 0, 0.2, 1), 400ms

Component Patterns

Primary Toggle Button (Dark Scene)

<button
  className={`px-6 py-3 rounded-lg text-sm font-medium transition-all duration-200 min-h-[44px] ${
    isActive
      ? 'bg-indigo-600 text-white'
      : 'bg-gray-800 text-gray-400 hover:bg-gray-700'
  }`}
>
  {label}
</button>

Primary Toggle Button (Light Scene)

<button
  className={`px-6 py-3 rounded-lg text-sm font-medium transition-all duration-200 min-h-[44px] ${
    isActive
      ? 'bg-violet-600 text-white'
      : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
  }`}
>
  {label}
</button>

Search Input (All Scenes)

<input
  type="text"
  className="w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/20
    rounded-lg text-white placeholder-white/60
    focus:outline-none focus:border-purple-400 focus:ring-2 focus:ring-purple-500/30
    transition-all duration-200"
  placeholder="Search..."
/>

Secondary Button (Dark Scene)

<button
  className="px-6 py-3 bg-white/10 backdrop-blur-sm border border-white/20
    rounded-lg text-white font-sans text-sm font-medium
    hover:bg-white/20 transition-all duration-200 min-h-[44px]"
>
  Reset View
</button>

Secondary Button (Light Scene)

<button
  className="px-6 py-3 bg-white/80 backdrop-blur-sm border border-gray-300
    rounded-lg text-gray-900 font-sans text-sm font-medium
    hover:bg-white transition-all duration-200 shadow-sm min-h-[44px]"
>
  Reset View
</button>

Spacing Standards

Z-Index Layers

Accessibility Requirements

• •Min touch target: 44×44px (min-h-[44px])
• •Focus visible: Purple ring (focus:ring-2 focus:ring-purple-500/30)
• •Color contrast: WCAG AA minimum
• •Keyboard nav: All interactive elements focusable
• •ARIA labels: On icon-only buttons

Decision Tree: Which Pattern?

Is this a PRIMARY scene control (sort, filter, view)?
├─ YES → Use SOLID background
│   ├─ Dark scene → gray-800/indigo-600
│   └─ Light scene → white/violet-600
│
└─ NO → Is it an input or secondary action?
    ├─ Input → Use GLASSMORPHISM (white/10)
    └─ Secondary → Use GLASSMORPHISM
        ├─ Dark scene → white/10
        └─ Light scene → white/80

Anti-Patterns

❌ Don't add icons to buttons without explicit approval ❌ Don't use glassmorphism for primary controls ❌ Don't mix patterns for same component type across scenes ❌ Don't use genre colors for UI elements (reserved for data viz) ❌ Don't skip min-height on interactive elements

Source Files

For complete specifications, see:

• •docs/design/color-specification.md — Full color palette
• •docs/design/scene-design-guide.md — Scene layouts and typography
• •docs/design/ui-component-patterns.md — Component code examples
• •docs/design/changelog-style-guide.md — Changelog entry writing

Last Updated: 2026-01-06