Screening Room Theme

BlendEye Design System

Every installed shadcn component rendered in the actual product theme. This page is the reference for visual consistency during the build — if a component looks wrong here, fix it here first.

Foundations

Color, type, and the one rule that matters: amber is reserved for the timeline/playhead/live state and nowhere else.

Surfaces

--background

Background

--card

Card

--secondary

Secondary

--muted

Muted

Text & Border

--foreground

Foreground

--muted-foreground

Muted foreground

--border

Border

--ring

Ring

Accent & Semantic — accent is reserved for timeline/playhead only

--accent

Accent (amber)

--success

Success

--warning

Warning

--destructive

Destructive

Typography

Heading / 3xl semibold

Heading / xl semibold

Body / base regular

Body small / muted — used for metadata, timestamps, descriptions

00:34:12 — timecode / mono / accent

Cinema Motifs

The structural vocabulary that makes this read as a film tool, not generic dark-mode SaaS. Referenced from real film stock — sprocket perforations, 2.39:1 scope letterboxing, slate burn-ins — used as structure, not decoration.

FilmCard — sprocket-edge + grain, the signature surface for scene/character/script nodes

Scene 04 / Take 2

The Vault

Master script node

Generated 2 minutes ago. 3 characters sharded into ClickHouse.

Letterbox — true 2.39:1 scope framing for storyboards and scene previews

Imagen frame · scene 04 · wide master

Slate label — corner burn-in tag for generated / production media

Frame 0142Scene 04 / Take 2Live — 00:34:12

Sprocket strip — standalone perforation rhythm for section dividers

Filmstrip loader — generating state, replaces generic spinners

Sharding character perspectives…

Actions

Button variants

Button sizes & icon

Button group

Toggle & toggle group

Forms

Text inputs

Input group (with icon / affix)

Checkbox, switch, radio

Include off-screen actions

Live ClickHouse grounding

Wide

OTS

Select & native select

Combobox

Input OTP (repurposable for short codes)

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Data Display

Card

Scene 04 — The Vault

Master script node

Generated 2 minutes ago. 3 characters sharded.

Avatar & avatar group

MKEL

MKELTR

Badges

DefaultSecondaryOutlineGeneratedStaleError

Table

Per-character story events (ClickHouse)
Character	Timestamp	Type	Content
Marcus	00:28:00	known_fact	Lost the keys near the tunnel
Elena	00:34:00	unaware_of	Marcus lost the keys

Item list

Marcus

Getaway driver · knows 4 facts at 00:34

Kbd

⌘K

Chart (tension curve)

Feedback

Alert

Downstream nodes are stale

Character "Marcus" was edited. 3 dependent scenes need regeneration.

Progress, skeleton, spinner

Tooltip & hover card

Empty state

No scenes yet

Drop in a premise to generate your first master script.

Overlays

Dialog

Alert dialog

Sheet & drawer

Popover

Dropdown & context menu

Right-click this node

Command palette

Layout

Slider (timeline scrubber base)

Story timeline00:34:12

Separator

Above

Below

Aspect ratio (storyboard frame)

16:9 Imagen frame

Scroll area

INT. SERVICE TUNNEL — NIGHT Marcus checks his pocket. Empty. He freezes. MARCUS (whisper) They were right here.

Collapsible

Carousel