✨ magic.mov Design System

Welcome to the magic.mov design system - a playground of cinematic-inspired styles, components, and patterns for building experimental filmmaking tools. This documentation showcases our flexoki-inspired color system with teal and orange accents reminiscent of cinematic color grading.

🎨 Color System

Our color system uses HSL variables for maximum flexibility, allowing for subtle adjustments across light and dark modes while maintaining visual harmony. The system is built around two primary accent colors:

Warm Accent (Orange)

Cinematic warmth inspired by sunset lighting

bg-accent or bg-accent-warm

Cool Accent (Teal)

Balanced complement for technical elements

bg-accent-cool

Core Color Palette

These colors form the foundation of our interface:

primary

Primary interactive elements

bg-primary text-primary-foreground

secondary

Softer interface elements

bg-secondary text-secondary-foreground

muted

Subtle backgrounds & disabled states

bg-muted text-muted-foreground

accent

Highlights & focus states

bg-accent text-accent-foreground

destructive

Error states & warnings

bg-destructive text-destructive-foreground

background

Main app background

bg-background text-foreground

card

Content containers

bg-card text-card-foreground

popover

Floating UI elements

bg-popover text-popover-foreground

Border & Decoration Colors

border

Standard borders

border border-border

border-weak

Subtle borders

border-[hsl(var(--border-weak-h)_var(--border-weak-s)_var(--border-weak-l))]

ring

Focus rings & outlines

ring-2 ring-[hsl(var(--ring-h)_var(--ring-s)_var(--ring-l))]

🔥 Cinematic Design Patterns

These style combinations are tailored for filmmaking tools and interfaces:

Card & Panel Patterns

Film Project Card

Feature

My Experimental Documentary

Last edited 2 days ago

bg-card text-card-foreground rounded-lg border shadow-sm

Scene Control Panel

Recording

Duration

00:02:45

Format

ProRes 422

bg-background border-l-4 border-l-accent

Visual Effects Preset

Cinematic LUT with Warm Highlights

<div class="grid grid-cols-2 gap-3">
  <div class="bg-background/20 backdrop-blur-sm p-3 rounded text-sm">
    <div class="text-xs opacity-80 mb-1">Highlights</div>
    <div class="h-1.5 rounded-full bg-background/30 overflow-hidden">
      <div class="h-full w-3/4 bg-accent"></div>
    </div>
  </div>
  <div class="bg-background/20 backdrop-blur-sm p-3 rounded text-sm">
    <div class="text-xs opacity-80 mb-1">Shadows</div>
    <div class="h-1.5 rounded-full bg-background/30 overflow-hidden">
      <div class="h-full w-1/2 bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l))]"></div>
    </div>
  </div>
</div>

<div class="mt-1 text-xs font-mono bg-background/30 backdrop-blur-sm p-2 rounded">
  <code>bg-gradient-to-br from-[accent+40%] to-[accent-cool+40%]</code>
</div>

New

Audio Waveform

Soundtrack visualization

  <div class="my-4 h-16 bg-muted/40 rounded-md flex items-center justify-center overflow-hidden">
    <div class="flex h-full items-end justify-around w-full px-2">
      <div class="w-1 bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l))] h-[20%] mx-px rounded-t"></div>
      <div class="w-1 bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l))] h-[40%] mx-px rounded-t"></div>
      <div class="w-1 bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l))] h-[30%] mx-px rounded-t"></div>
      <div class="w-1 bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l))] h-[70%] mx-px rounded-t"></div>
      <div class="w-1 bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l))] h-[55%] mx-px rounded-t"></div>
      <div class="w-1 bg-accent h-[90%] mx-px rounded-t"></div>
      <div class="w-1 bg-accent h-[80%] mx-px rounded-t"></div>
      <div class="w-1 bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l))] h-[60%] mx-px rounded-t"></div>
      <div class="w-1 bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l))] h-[40%] mx-px rounded-t"></div>
      <div class="w-1 bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l))] h-[20%] mx-px rounded-t"></div>
    </div>
  </div>
  
  <div class="flex mt-3 justify-between">
    <span class="text-xs text-muted-foreground">00:00</span>
    <span class="text-xs text-muted-foreground">01:30</span>
  </div>
  
  <div class="mt-4 text-xs font-mono bg-muted p-2 rounded">
    <code>Card with waveform visualization using accent colors</code>
  </div>
</div>

Interactive Card Elements

Hover Card

Card with hover effect

hover:border-accent hover:shadow-md transition-all

→ Group Hover Effects

Elements reveal on hover

group group-hover:[class] transition-all

Text Styles

Heading 1

text-4xl font-extrabold tracking-tight lg:text-5xl

Heading 2

text-3xl font-semibold tracking-tight border-b pb-2

Heading 3

text-2xl font-semibold tracking-tight

Heading 4

text-xl font-semibold tracking-tight

This is a paragraph with standard text styling. It uses the app's default text color and size.

leading-7

This is smaller text often used for secondary information or captions.

text-sm text-muted-foreground

This is monospaced text used for code snippets or technical content.

font-mono text-sm

🎬 Filmmaking Control Buttons

Video Transport Controls

<button class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 bg-accent text-accent-foreground hover:bg-accent/80 h-9 w-9">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <circle cx="12" cy="12" r="10"></circle>
    <circle cx="12" cy="12" r="3"></circle>
  </svg>
</button>

<button class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l))] text-[hsl(var(--accent-cool-foreground-h)_var(--accent-cool-foreground-s)_var(--accent-cool-foreground-l))] hover:bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l)_/_0.8)] h-9 w-9">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <polygon points="5 4 15 12 5 20 5 4"></polygon>
    <line x1="19" y1="5" x2="19" y2="19"></line>
  </svg>
</button>

Control buttons with appropriate icons using teal & orange accents

🕹️ Button Styles & Variants

Standard Button Styles

bg-primary text-primary-foreground

  <div class="space-y-2">
    <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 py-2 w-full">
      Secondary Action
    </button>
    <div class="text-xs font-mono bg-muted p-2 rounded">
      <code>bg-secondary text-secondary-foreground</code>
    </div>
  </div>
  
  <div class="space-y-2">
    <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-muted text-muted-foreground hover:bg-muted/80 h-10 px-4 py-2 w-full">
      Tertiary Action
    </button>
    <div class="text-xs font-mono bg-muted p-2 rounded">
      <code>bg-muted text-muted-foreground</code>
    </div>
  </div>
</div>

Accent & Purpose Buttons

bg-accent text-accent-foreground

  <div class="space-y-2">
    <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l))] text-[hsl(var(--accent-cool-foreground-h)_var(--accent-cool-foreground-s)_var(--accent-cool-foreground-l))] hover:bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l)_/_0.8)] h-10 px-4 py-2 w-full">
      <div class="flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
          <polyline points="14 2 14 8 20 8"></polyline>
        </svg>
        <span>Save Project</span>
      </div>
    </button>
    <div class="text-xs font-mono bg-muted p-2 rounded">
      <code>bg-[hsl(var(--accent-cool-h)...)]</code>
    </div>
  </div>
  
  <div class="space-y-2">
    <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground hover:bg-destructive/90 h-10 px-4 py-2 w-full">
      <div class="flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M3 6h18"></path>
          <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
          <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
        </svg>
        <span>Delete Scene</span>
      </div>
    </button>
    <div class="text-xs font-mono bg-muted p-2 rounded">
      <code>bg-destructive text-destructive-foreground</code>
    </div>
  </div>
</div>

Button Variants

border bg-background hover:bg-accent

  <div class="space-y-2">
    <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-background text-foreground hover:bg-muted h-10 px-4 py-2 shadow-sm border w-full">
      Subtle Button
    </button>
    <div class="text-xs font-mono bg-muted p-2 rounded">
      <code>bg-background text-foreground hover:bg-muted</code>
    </div>
  </div>
  
  <div class="space-y-2">
    <button class="inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-accent text-accent-foreground hover:bg-accent/80 h-10 px-5 py-2 w-full">
      Rounded Button
    </button>
    <div class="text-xs font-mono bg-muted p-2 rounded">
      <code>rounded-full bg-accent text-accent-foreground</code>
    </div>
  </div>
</div>

🎞️ Filmmaking Layout Patterns

Video Editor Timeline

00:01:20

  <!-- Timeline Ruler -->
  <div class="flex h-6 border-y border-border-weak mb-1 relative">
    <div class="absolute inset-0 flex">
      <div class="w-1/4 border-r border-border-weak"></div>
      <div class="w-1/4 border-r border-border-weak"></div>
      <div class="w-1/4 border-r border-border-weak"></div>
      <div class="w-1/4"></div>
    </div>
    <div class="absolute inset-y-0 left-1/2 w-px bg-accent"></div>
  </div>
  
  <!-- Timeline Tracks -->
  <div class="space-y-2">
    <div class="flex h-12">
      <div class="w-24 bg-muted flex items-center px-2 text-xs font-medium rounded-l">Video</div>
      <div class="grow h-full relative rounded-r overflow-hidden bg-muted/30">
        <div class="absolute left-[10%] w-[30%] h-full bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l)_/_0.6)] rounded-sm"></div>
        <div class="absolute left-[45%] w-[40%] h-full bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l)_/_0.6)] rounded-sm"></div>
      </div>
    </div>
    <div class="flex h-12">
      <div class="w-24 bg-muted flex items-center px-2 text-xs font-medium rounded-l">Audio</div>
      <div class="grow h-full relative rounded-r overflow-hidden bg-muted/30">
        <div class="absolute left-[5%] w-[90%] h-full bg-[hsl(var(--accent-h)_var(--accent-s)_var(--accent-l)_/_0.5)] rounded-sm"></div>
      </div>
    </div>
    <div class="flex h-12">
      <div class="w-24 bg-muted flex items-center px-2 text-xs font-medium rounded-l">Effects</div>
      <div class="grow h-full relative rounded-r overflow-hidden bg-muted/30">
        <div class="absolute left-[50%] w-[25%] h-full bg-accent/50 rounded-sm"></div>
      </div>
    </div>
  </div>
</div>
<div class="mt-2 text-xs font-mono bg-muted p-2 rounded">
  <code>Timeline with tracks using flex for the horizontal layout</code>
</div>

Preview & Controls Layout

00:25 / 03:42

  <!-- Controls Area -->
  <div class="p-4 border-t border-border-weak">
    <div class="flex justify-between items-center mb-2">
      <div class="text-sm font-medium">Scene 01 - Intro</div>
      <div class="flex items-center gap-2">
        <button class="size-8 rounded-full bg-muted flex items-center justify-center hover:bg-muted/80">
          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="1"></circle>
            <circle cx="19" cy="12" r="1"></circle>
            <circle cx="5" cy="12" r="1"></circle>
          </svg>
        </button>
        <button class="size-8 rounded-full bg-accent text-accent-foreground flex items-center justify-center hover:bg-accent/80">
          <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M5 4h14a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-14a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1z"></path>
            <path d="M12 15v5"></path>
            <path d="M8 20h8"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="flex gap-2">
      <button class="grow py-1.5 rounded bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l))] text-[hsl(var(--accent-cool-foreground-h)_var(--accent-cool-foreground-s)_var(--accent-cool-foreground-l))] text-sm hover:bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l)_/_0.9)]">Trim</button>
      <button class="grow py-1.5 rounded bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l))] text-[hsl(var(--accent-cool-foreground-h)_var(--accent-cool-foreground-s)_var(--accent-cool-foreground-l))] text-sm hover:bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l)_/_0.9)]">Effects</button>
      <button class="grow py-1.5 rounded bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l))] text-[hsl(var(--accent-cool-foreground-h)_var(--accent-cool-foreground-s)_var(--accent-cool-foreground-l))] text-sm hover:bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l)_/_0.9)]">Color</button>
    </div>
  </div>
</div>
<div class="mt-2 text-xs font-mono bg-muted p-2 rounded">
  <code>Video preview with controls layout</code>
</div>

Media Browser Layout

  <!-- Media Grid -->
  
        
          
      <div class="absolute bottom-2 left-2 right-2 flex justify-between items-center opacity-0 group-hover:opacity-100 transition-opacity">
        <span class="text-white text-xs">Clip_001.mp4</span>
        <div class="size-5 bg-white/20 rounded-full flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="size-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polygon points="5 3 19 12 5 21 5 3"></polygon>
          </svg>
        </div>
      </div>
    </div>
    
    <div class="group aspect-video bg-muted rounded overflow-hidden relative cursor-pointer hover:ring-2 hover:ring-accent transition-all duration-200">
      <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50 opacity-0 group-hover:opacity-100 transition-opacity"></div>
      <div class="absolute bottom-2 left-2 right-2 flex justify-between items-center opacity-0 group-hover:opacity-100 transition-opacity">
        <span class="text-white text-xs">Clip_002.mp4</span>
        <div class="size-5 bg-white/20 rounded-full flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="size-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polygon points="5 3 19 12 5 21 5 3"></polygon>
          </svg>
        </div>
      </div>
    </div>
    
    <div class="group aspect-video bg-muted rounded overflow-hidden relative cursor-pointer hover:ring-2 hover:ring-accent transition-all duration-200">
      <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50 opacity-0 group-hover:opacity-100 transition-opacity"></div>
      <div class="absolute bottom-2 left-2 right-2 flex justify-between items-center opacity-0 group-hover:opacity-100 transition-opacity">
        <span class="text-white text-xs">Clip_003.mp4</span>
        <div class="size-5 bg-white/20 rounded-full flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="size-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polygon points="5 3 19 12 5 21 5 3"></polygon>
          </svg>
        </div>
      </div>
    </div>
    
    <div class="group aspect-video bg-muted rounded overflow-hidden relative cursor-pointer hover:ring-2 hover:ring-accent transition-all duration-200">
      <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50 opacity-0 group-hover:opacity-100 transition-opacity"></div>
      <div class="absolute bottom-2 left-2 right-2 flex justify-between items-center opacity-0 group-hover:opacity-100 transition-opacity">
        <span class="text-white text-xs">Clip_004.mp4</span>
        <div class="size-5 bg-white/20 rounded-full flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="size-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polygon points="5 3 19 12 5 21 5 3"></polygon>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="mt-2 text-xs font-mono bg-muted p-2 rounded">
  <code>Media browser with grid layout and hover effects</code>
</div>

🎬 Filmmaking Form Elements

Project Settings

Project Title

<!-- Resolution Select -->
<div class="space-y-2">
  <label for="resolution" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex items-center gap-2">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
      <line x1="8" y1="21" x2="16" y2="21"></line>
      <line x1="12" y1="17" x2="12" y2="21"></line>
    </svg>
    <span>Resolution</span>
  </label>
  <select id="resolution" 
    class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
    <option value="4k">4K UHD (3840 × 2160)</option>
    <option value="1080p">Full HD (1920 × 1080)</option>
    <option value="720p">HD (1280 × 720)</option>
    <option value="vertical">Vertical (1080 × 1920)</option>
    <option value="square">Square (1080 × 1080)</option>
    <option value="custom">Custom Resolution</option>
  </select>
  <div class="text-xs text-muted-foreground">Select the output resolution for your project</div>
</div>

<!-- Two-column layout for frame rate and aspect ratio -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <!-- Frame Rate Input -->
  <div class="space-y-2">
    <label for="frame-rate" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Frame Rate (fps)</label>
    <div class="relative">
      <input id="frame-rate" type="number" value="24" min="1" max="120" 
        class="flex h-10 w-full rounded-md border border-input bg-background pl-3 pr-12 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" />
      <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-muted-foreground text-sm">fps</div>
    </div>
  </div>
  
  <!-- Aspect Ratio Select -->
  <div class="space-y-2">
    <label for="aspect-ratio" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Aspect Ratio</label>
    <select id="aspect-ratio" 
      class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
      <option value="16:9">16:9 (Widescreen)</option>
      <option value="2.35:1">2.35:1 (Cinemascope)</option>
      <option value="1.85:1">1.85:1 (Academy)</option>
      <option value="1:1">1:1 (Square)</option>
      <option value="9:16">9:16 (Vertical)</option>
    </select>
  </div>
</div>

<!-- Color Grading Preset Radio Buttons -->
<div class="space-y-3">
  <label class="text-sm font-medium leading-none">Color Grading Preset</label>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
    <div class="flex items-center space-x-2 p-2 rounded-md border border-input hover:bg-accent/10 cursor-pointer transition-colors">
      <input id="color-preset-1" type="radio" name="color-preset" checked 
        class="h-4 w-4 rounded-full border-border bg-background text-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" />
      <label for="color-preset-1" class="text-sm font-medium leading-none cursor-pointer grow">
        <div>Teal & Orange</div>
        <div class="text-xs text-muted-foreground">Hollywood style contrast</div>
      </label>
      <div class="flex space-x-1">
        <div class="h-4 w-4 rounded-full bg-[hsl(var(--accent-cool-h)_var(--accent-cool-s)_var(--accent-cool-l))]" title="Teal"></div>
        <div class="h-4 w-4 rounded-full bg-[hsl(var(--accent-h)_var(--accent-s)_var(--accent-l))]" title="Orange"></div>
      </div>
    </div>

    <div class="flex items-center space-x-2 p-2 rounded-md border border-input hover:bg-accent/10 cursor-pointer transition-colors">
      <input id="color-preset-2" type="radio" name="color-preset" 
        class="h-4 w-4 rounded-full border-border bg-background text-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" />
      <label for="color-preset-2" class="text-sm font-medium leading-none cursor-pointer grow">
        <div>Monochrome</div>
        <div class="text-xs text-muted-foreground">Black & white cinematic look</div>
      </label>
      <div class="flex space-x-1">
        <div class="h-4 w-4 rounded-full bg-black" title="Black"></div>
        <div class="h-4 w-4 rounded-full bg-white border" title="White"></div>
      </div>
    </div>
  </div>
</div>

<!-- Range Slider for Quality -->
<div class="space-y-2">
  <div class="flex items-center justify-between">
    <label for="quality-slider" class="text-sm font-medium leading-none">Export Quality</label>
    <span class="text-xs font-medium bg-muted text-muted-foreground px-2 py-1 rounded">85%</span>
  </div>
  <input id="quality-slider" type="range" min="0" max="100" value="85" 
    class="w-full appearance-none h-2 bg-muted rounded-md cursor-pointer outline-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-accent [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer" />
  <div class="flex justify-between text-xs text-muted-foreground">
    <span>Lower Size</span>
    <span>Higher Quality</span>
  </div>
</div>

<!-- Export Settings Checkboxes -->
<div class="space-y-2">
  <label class="text-sm font-medium leading-none">Export Settings</label>
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-1">
    <div class="flex items-center space-x-2 p-1 hover:bg-accent/10 rounded">
      <input id="export-setting-1" type="checkbox" checked 
        class="h-4 w-4 rounded border-border bg-background text-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" />
      <label for="export-setting-1" class="text-sm leading-none cursor-pointer">Include Metadata</label>
    </div>
    
    <div class="flex items-center space-x-2 p-1 hover:bg-accent/10 rounded">
      <input id="export-setting-2" type="checkbox" checked 
        class="h-4 w-4 rounded border-border bg-background text-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" />
      <label for="export-setting-2" class="text-sm leading-none cursor-pointer">High Quality Audio</label>
    </div>
    
    <div class="flex items-center space-x-2 p-1 hover:bg-accent/10 rounded">
      <input id="export-setting-3" type="checkbox" 
        class="h-4 w-4 rounded border-border bg-background text-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" />
      <label for="export-setting-3" class="text-sm leading-none cursor-pointer">Hardware Acceleration</label>
    </div>
    
    <div class="flex items-center space-x-2 p-1 hover:bg-accent/10 rounded">
      <input id="export-setting-4" type="checkbox" 
        class="h-4 w-4 rounded border-border bg-background text-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" />
      <label for="export-setting-4" class="text-sm leading-none cursor-pointer">Export Subtitles</label>
    </div>
  </div>
</div>

Spacing and Containers

We use a consistent spacing scale based on multiples of 4px (0.25rem):

px: 1px
0.5: 0.125rem (2px)
1: 0.25rem (4px)
2: 0.5rem (8px)
3: 0.75rem (12px)
4: 1rem (16px)
6: 1.5rem (24px)
8: 2rem (32px)
12: 3rem (48px)
16: 4rem (64px)

Container classes:

.container {
  @apply mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl;
}

Shadows

Common shadow styles:

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

shadow-2xl

CSS Variables for Custom Components

When creating custom components, you can access design tokens through CSS variables:

.custom-component {
  /* Colors */
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  
  /* Border */
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  
  /* Typography */
  font-family: var(--font-sans);
  
  /* Animation */
  transition: all 150ms var(--ease-out);
}

Theme Toggle

Our app supports both light and dark themes. The theme variables are applied via :root and .dark selectors in the CSS.

Here's how you can create content that adapts to both themes:

<script>
  import { ModeWatcher, toggleMode } from 'mode-watcher';
  import { Button } from '$lib/components/ui/button';
  import { Sun, Moon } from 'lucide-svelte';
</script>

<ModeWatcher />

<Button variant="ghost" size="icon" on:click={toggleMode}>
  <Sun class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
  <Moon class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
  <span class="sr-only">Toggle theme</span>
</Button>