Design system

Premium refined

The component gallery for the Video Studio — every shared default, restyled. Lucide line icons, soft layered shadows, real focus rings, calm teal accent.

Saved
Buttons
Variants — every emphasis level, each with a Lucide icon. Primary CTA, neutral, outline, ghost, subtle, danger, and the AI / generate button.
Sizes
Small · default · large — the primary CTA across the scale.
Icon-only & disabled
Icon-only buttons carry a title tooltip. Disabled state dims and removes the shadow.
Form fields
Shown in the Media Hub request list.
Leading icon variant for search & lookup inputs.
Multi-line, vertically resizable.
Duration must be between 4s and 60s.
Optional — leave empty for music-only.
Selects — icons in the options
The headline of this redesign — every select becomes a styled trigger plus an open menu whose option rows each carry a leading icon, a label, an optional description, and a check on the selected row.
Seedance 2.0 — multi-shot
Seedance 2.0 Multi-shot · reference-driven identity · up to 12 refs
Frames model Start / end frame to motion
Ingredients model Compose from reference ingredients
Voiceover-driven
Voiceover-driven Brand VO narrates the script
Music-only Track, no narration
Ambient & natural Diegetic scene sound
Silent + captions On-screen text only
Mixed VO + music bed
9:16 — Vertical (Reels)
Collapsed trigger — chevron rotates when open.
15s — Seedance max
Leading icon reflects the field meaning.
Segmented toggle — production approach
Frames-to-video Ingredients-to-video
Badges & chips
Status & type badges.
Neutral Accent Video Done Needs work Reel Locked
Selectable chips — aspect ratios
9:16 16:9 1:1 4:5 2.39:1
Voice chip
Aanya — Brand Voice (ElevenLabs)
Stepper
The 5-stage flow — completed, active, and upcoming steps. Sticky to the top of the content scroll on the real stages.
Brief & Script Configuration 3 Clip planning 4 Per-clip work 5 Export
Radio-cards — audio plan
Voiceover-driven
Brand VO narrates the script.
Music-only
Track, no narration.
Ambient & natural
Diegetic scene sound.
Silent + captions
On-screen text only.
Mixed
VO + music bed.
Cards & sections
A .section-h carries an accent tick and uppercase label. Below it: an info-note and the derivation callout.
Section heading
Defaults are already set from the planner — adjust only what this video needs. Calm, low-noise guidance lives in info-notes.
1 clip 15s ÷ 15s (Seedance max) = 1 — short video fits one clip.
States
Empty state
No takes generated yet
Generate a take from your references, or pick an existing clip from the brand library.
Skeleton (loading)
Spinner & clip-generation progress
Generating… Rendering take 2 of 4
64% — about 40s remaining.
Icons — the Lucide set in use
Every emoji in the studio is replaced by a Lucide line icon (currentColor, inherits text). The full sprite used across the flow:
home search social ads media brief config clips work export back continue palette sparkles generate wand save deliver plus trash x edit download upload folder eye refresh scissors merge drag image video film frames ingredients model mic music audio type layout clock sliders settings play lock check circle-check dot info alert loader star chevron chevron-right
This page is the visual reference for the restyled Video Studio. Open the flow → Brief & Script