Design system — studio chrome + engine surface

Carousel

The component gallery for the E4e Carousel Studio. Two surfaces share one screen: the studio chrome (pink shadcn — the slide rail + active-slide pane) and the embedded media engine (gua-* / #7c3aed — the per-slide GeneratePanel hosted inside a slide). A carousel is an ordered set of single-image slides — each slide is a flat image, so there is no per-resource checklist; the engine simply replaces the old per-slide prompt + whole-carousel model picker. This page shows both surfaces, side by side, so the seam reads as deliberate.

Saved
The two-surface seam
Studio Engine
Pink shadcn chrome vs #7c3aed engine card — a deliberate, contained seam (the engine card boundary), identical to image-studio-e4c. The Carousel Studio stays pink (--acc #ff2d78) for its slide rail, active-slide pane, stepper, the 3-up candidate grid, the Upload tile and Deliver-to-ad. 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. The engine remounts per slide — each slide owns its own provider/model and its own refine history.

Carried over — studio chrome (pink shadcn)

The Carousel master/detail atoms, unchanged. The 3-up candidate grid, Upload tile and Deliver-to-ad below the engine still use these.

Buttons
Primary advancing CTA (.btn.accent), neutral, outline, ghost, subtle, danger, the AI / generate button, and the Deliver-to-ad CTA.
Badges, chips, stepper & segmented toggle
Status & type badges.
Neutral Accent Carousel Image selected Drafting Ready Pick one image
Selectable chips — aspect ratios & variations
4:5 1:1 9:16 2 variations 16:9
Stepper — the carousel flow
Brief Storyboard 3 Per-slide work 4 Deliver to ad
Segmented toggle — slide type (image active, video coming soon)
Image Video · soon
Every carousel slide is a single flat image — there is no per-slide resource checklist (that is a video concept). The toggle only previews future video slides.
Slide-rail items, cards, section headings & info-notes
The left slide rail — a ready slide is marked with #i-check; a pending slide uses a small CSS dot (no circle glyph in the sprite).
Slide 1 · Hook
Image selected
Slide 2 · Benefit active
Image selected
Slide 3 · Proof
Generated · pick one
Slide 4 · CTA
No image yet
Section heading
Calm, low-noise studio guidance lives in info-notes — e.g. "Card headline & link live on the ad", not in this studio. The slide rail, active-slide pane and candidate grid are built from .card + .section-h on the pink surface.
Candidate grid (3-up) + Upload tile — unchanged below the engine
After Generate, the slide's candidates render 3-up in pink chrome; the dashed Upload tile skips generation. A picked candidate flips the slide to Image selected.

Added in E4e — engine surface (#7c3aed)

The shared media engine atoms, ported from image-studio-e4c. In Per-slide work they mount inside each slide: one per-slide GeneratePanel — a Higgsfield-only ProviderModelPicker + editable composed prompt + guide + refine row + revertible history + a slide-scope badge. It replaces the old per-slide prompt Textarea and the old single whole-carousel model Select; each slide owns its own provider/model override and its own refine history. 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. The panel remounts per slide — what you see here is slide #2's instance.
Shared media engine · slide-scoped
Media provider
higgsfield google-flow · DIY only
Per-slide on-platform image gen is Higgsfield-only. The .pchip.on is this slide's picked provider — a per-slide override that replaces the old single whole-carousel model Select.
resolveMediaProviderKey · slide #2
Higgsfield model — this slide's override
Nano Banana Pro
Composed prompt — slide #2 (image)
Prompt guide
  1. 1.Describe this one slide — its scene, mood, light, palette and the exact product — as if briefing a photographer. Each slide is a single flat image.
  2. 2.Keep ample negative space for the card headline (that copy lives on the ad, not here) and note where the logo should sit.
Composed by your AI provider (free text path); the slide image is rendered by your Higgsfield connector. The composed/refined prompt pins to a per-slide snapshot so Generate-slide runs exactly this.
Refine the prompt
1warmer coral tones
2more negative space top-left for the headline

Compose & refine use the free text path — they never spend a media credit. The scope: slide badge marks where this slide's snapshot is pinned; the next slide carries its own history.

Engine atom legend

.pchip / .pchip.on — per-slide provider

higgsfieldgoogle-flow

.pselect — per-slide Higgsfield model

Nano Banana Pro

.ebadge.scope — per-slide pin

scope: slide #2

.rbtn — refine action

.refinerow + .rhist + .revert — per-slide refine history (remounts per slide)

1warmer coral tones

.ptextarea + .guide — editable composed prompt (mono) + numbered guide

  1. 1.Describe this one slide as a single flat image.
  2. 2.Leave negative space for the card headline (which lives on the ad).
Icons — the set used in E4e
Both surfaces share one icon sprite (currentColor, inherits text color — so the same glyph reads pink in the chrome, violet in the engine). A ready slide uses #i-check; pending uses a small CSS dot (no circle glyph in the sprite).
image check upload folder zap sparkles link x chevron chevron-right info save model layout back continue deliver palette
This page is the visual reference for E4e — studio chrome + the embedded per-slide media engine. Open Per-slide work