Design system — studio chrome + engine surface

Video

The component gallery for the E4d Video Studio. Two surfaces share one screen: the studio chrome (pink shadcn — the master/detail clip work) and the embedded media engine (gua-* / #7c3aed — the GeneratePanel + ResourceChecklist hosted inside a ClipCard). This page shows both, side by side, so the seam reads as deliberate.

Saved
The two-surface seam
Studio Engine
Studio chrome = pink shadcn; embedded engine = gua-*/#7c3aed — a deliberate, contained visual seam (the engine card boundary), identical to image-studio-e4c. The Video Studio stays pink (--acc #ff2d78) for its clip rail, ClipCard, stepper, takes grid and Generate-clip row. The shared media engine renders on its own violet surface (#7c3aed) and is always wrapped in .engine-wrap so the boundary is unmistakable — never a blended hybrid.
Studio chrome
--acc  #ff2d78
shell.css · shadcn semantic
Media engine
--gua-primary  #7c3aed
engine.css · gua-* atoms
Rule of thumb: if it lives inside an .engine-wrap, it is violet; everything else is pink.

Carried over — studio chrome (pink shadcn)

The Stage-4 master/detail atoms, unchanged from the Video Studio. The takes grid and Generate-clip row below the engine still use these.

Buttons
Primary advancing CTA (.btn.accent), neutral, outline, ghost, subtle, danger, and the AI / generate button.
Badges, chips, stepper & segmented toggle
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
Stepper — the 5-stage flow
Brief & Script Configuration Clip planning 4 Per-clip work 5 Export
Segmented toggle — frames vs ingredients (drives the per-clip checklist roles)
Frames-to-video Ingredients-to-video
Cards, section headings & info-notes
Section heading
Calm, low-noise studio guidance lives in info-notes. The ClipCard, clip rail and takes grid are built from .card + .section-h on the pink surface.

Added in E4d — engine surface (#7c3aed)

The shared media engine atoms, ported from image-studio-e4c. In Stage-4 these mount inside each ClipCard: a per-clip Composed prompt GeneratePanel and a per-clip ResourceChecklist. Always framed by .engine-wrap + .engine-tag so the seam is visible.

The engine frame — .engine-wrap / .engine-tag
Everything the engine owns sits in this violet-tinted wrapper. The tag names it "the shared media engine" so it never reads as part of the pink chrome.
Shared media engine
Media provider
higgsfield google-flow · DIY only
Per-clip on-platform video gen is Higgsfield-only. The .pchip.on is the picked provider; the composed prompt below stays disabled until a model is picked for the clip.
resolveMediaProviderKey · clip #2
Higgsfield model
Seedance 2.0 — multi-shot
Composed prompt — clip #2 (video)
Prompt guide
  1. 1.Describe the one beat this clip covers — subject, motion, light and framing — as a single directed shot.
  2. 2.Pin reference roles (start frame / image / audio) in the checklist below; the engine matches them in so identity and palette stay on-brand.
Composed by your AI provider (free text path); the clip is rendered by your Higgsfield connector. The composed/refined prompt pins to a per-clip snapshot so Generate-clip runs exactly this.
Refine the prompt
1warmer grade, more steam
2tighter hold on the cup

Compose & refine use the free text path — they never spend a media credit. scope: clip badge marks where the snapshot is pinned.

Per-clip ResourceChecklist — .reschecklist / .resrow
Replaces the old "Reference ingredients" block. Video roles (start frame / end frame / image / video / audio) are driven by the frames-vs-ingredients mode. Each row = a GenerationResource node: role · .rstatus (have / needed / generating) · per-row .rmode (⚡ on-platform / ✦ DIY) · .rr-btn actions. A generated resource fills its node — flat, never a nested checklist.
Shared media engine · resources
Clip #2 resources · ingredients mode 1 have · 1 needed · 1 generating
Start frame
first-frame reference · pinned to this clip
Have
On-platform DIY
start-frame.png is pinned as a reference — Seedance starts motion from this exact frame.
Image — product hero
on-platform generation · resolves your Higgsfield connection
Generating
On-platform DIY
Generate this image resource on-platform, then "Use this" to fill the node — one asset for one node, flat.
Candidates (3)
Audio — VO line
prompt / DIY · BYO-voice (ElevenLabs) or upload back
Needed
On-platform DIY
DIY mode hands you the composed prompt + guide with no Generate button — the arm for manual-external generation and BYOK-voice. Bring the result back via Upload or Pick from library.
Engine atom legend

.pchip / .pchip.on

higgsfieldgoogle-flow

.ebadge.scope — per-clip pin

scope: clip #2

.rstatus — have / needed / generating

Have Needed Generating

.rmode — ⚡ on-platform / ✦ DIY

On-platform DIY

.rr-btn — row actions

.rhist + .revert

1warmer grade

.ptextarea — editable composed prompt (mono)

Icons — the set used in E4d
Both surfaces share one icon sprite (currentColor, inherits text color — so the same glyph reads pink in the chrome, violet in the engine).
zap sparkles film video image frames ingredients audio model layout check upload folder link x info back continue save chevron chevron-right palette
This page is the visual reference for E4d — studio chrome + the embedded media engine. Open Stage 4 → Per-clip work