---
name: AlterCall
description: A private realtime character-transformation studio for OBS.
colors:
  graphite: "oklch(12% 0.009 30)"
  carbon: "oklch(17% 0.01 30)"
  signal: "oklch(66% 0.22 34)"
  soft-white: "oklch(96% 0.006 45)"
  cool-gray: "oklch(73% 0.012 25)"
  stage-black: "oklch(0% 0 0)"
  danger-text: "oklch(82% 0.1 28)"
  alert-surface: "oklch(18% 0.04 28)"
typography:
  family: "-apple-system, BlinkMacSystemFont, Segoe UI, system-ui, sans-serif"
rounded:
  small: "0.375rem"
  medium: "0.75rem"
  brand: "0.45rem"
  switch: "1rem"
---

# Design System: AlterCall

## Overview

**Creative North Star: "The Guided Night Studio"**

AlterCall combines the immediacy of Apple FaceTime with the confidence of a professional video studio. The product is dark and cinematic, but its permanent controls are clearly labeled and visually separated so a first-time session never feels like operating specialist equipment.

The transformed video remains the dominant object. A visible reference rail and restrained control column provide orientation without turning the screen into a dashboard. Motion is responsive and functional: controls acknowledge input quickly, panels transition gently, and media never waits for choreography.

**Key Characteristics:**

- Dominant 16:9 live stage
- Permanent, labeled controls
- Tonal depth instead of decorative glass
- Signal color reserved for active or destructive moments
- Familiar desktop video-call behavior

## Colors

The palette is restrained: graphite and carbon surfaces, soft-white text, cool-gray supporting information, and one signal red-orange accent. All implementation colors use OKLCH tokens in `app/globals.css`.

**The Signal Rule.** Red-orange appears on no more than ten percent of a screen and communicates live, active transformation, or a deliberate ending action.

**The No-Neon Rule.** Purple-blue gradients, acid green, and cyberpunk glow are prohibited.

## Typography

Use the native system sans stack to preserve FaceTime-like clarity, fast loading, and familiar desktop control shapes.

Headings should be concise and balanced. Body copy remains under 70 characters per line. Labels use sentence case rather than repeated tracked uppercase styling.

**The Plain-Language Rule.** Control labels describe the result—“Clean output” and “End session”—rather than exposing internal API terminology.

## Elevation

The system is flat by default. Depth comes from tonal surface changes, dividers, media contrast, and a small contextual shadow only for popovers or menus that overlap the live stage.

**The Stage-First Rule.** No decorative shadow may compete with the live video frame.

## Components

The studio uses a permanent reference rail, a dominant video stage, a labeled control column, a compact session status bar, and one decisive transformation action. Buttons are moderately compact, with a consistent small radius; only status chips may use a pill shape. Inputs and selectors use carbon surfaces with clear borders and visible focus rings.

The clean output action removes the application chrome without opening a second transformation session. Empty, loading, live, interrupted, and insufficient-credit states retain the same layout so recovery never causes visual disorientation.

## Do's and Don'ts

### Do:

- **Do** keep reference, camera, output, and session controls visible and labeled.
- **Do** pair every color status with text or an icon.
- **Do** keep the transformed video larger than all surrounding control regions combined.
- **Do** use restrained feedback and honor reduced-motion settings.

### Don't:

- **Don't** resemble a dense analytics dashboard.
- **Don't** use neon cyberpunk styling, purple gradients, or decorative glassmorphism.
- **Don't** use icon-only controls when the action is not universally understood.
- **Don't** hide session cost, connection failures, camera denial, or output mode behind transient notifications.