storyboard design system v2.1

storyboard ui

Film industry design language for storytelling workflows.
High contrast • Technical precision • Professional typography

storyboard color system

base structural colors (--sb-*)

black
#000000
Text, borders, most UI
dark gray
#2a2a2a
Secondary text, shadows
light gray
#e5e7eb
Image placeholders
off white
#fafafa
Backgrounds, cards
usage
Use for 90% of interface elements, headers, and structure

accent colors (--sb-navy, slate, etc.)

navy
#1B3C53
Primary buttons only
slate
#456882
Secondary buttons only
sand
#D2C1B6
Success states only
usage
Action elements that need to draw attention

Color applications

Standard UI
Off-white background, black text - most elements
Primary action
Navy background - primary buttons only
Secondary action
Slate background - secondary buttons only
Success state
Sand background - success buttons only

Professional Typography

Technical interface

Shot 001
Scene description
Technical notes
Version history
Metadata info
Font: Courier Prime
Weight: 700 (Bold)
Transform: Uppercase
Letter-spacing: 0.1em

Code & prompts

// AI Generation Prompt
"A mysterious figure emerges from fog,
walking down empty city street at night."
Technical specs: 4K, 24fps, wide shot,
dramatic lighting, fog machine required
Status: GENERATED | Ver: 2.1 | ID: SH001
Font: Roboto Mono
Weight: 400-700
Line-height: 1.4
Used for: Prompts, metadata, code

Storyboard Button System

Primary actions

Secondary actions

Outline actions

On navy background
On slate background
On sand background

Storyboard Cards

Opening scene

v2.1
Shot #001
Visual placeholder
Scene description

A mysterious figure emerges from the fog, walking slowly down an empty city street. The streetlights cast long shadows as rain begins to fall, creating an atmosphere of tension and anticipation.

Technical notes
Wide shot, dramatic lighting, urban noir aesthetic, fog machine, steady cam movement
Shot 002 v1.0
Placeholder
Chase sequence through marketplace...
Shot 003 Done
Rendered successfully • 4K resolution
Shot 004 Error
Generation failed • Insufficient credits

Storyboard Interface Elements

Storyboard form elements

Storyboard icons

Regular style

Film
Video
Camera
Slate
Monitor
Play

Inverted style

Pause
Next
Prev
Audio
Layers
Config

Technical Layouts

Technical grid

20px grid system

Split layout (50/50)

Shot content
Text content

Shot priority (60/40)

Expanded shot area
Compact text

Text priority (40/60)

Compact shot
Expanded text area

Header layout

Project title
Active v2.1
Content area with professional header bar

Typography Hierarchy

Heading scale

Primary heading
sb-h1 • 3rem • Courier Prime Bold
Section heading
sb-h2 • 2rem • Courier Prime Bold
Subsection heading
sb-h3 • 1.5rem • Courier Prime Bold
Content heading
sb-h4 • 1.25rem • Courier Prime Bold
Minor heading
sb-h5 • 1.125rem • Courier Prime Bold
Label heading
sb-h6 • 1rem • Courier Prime Bold

Emphasis styles

bold technical text
sb-bold • 1rem • Courier Prime Bold • For emphasis
large bold text
sb-bold-large • 1.25rem • Courier Prime Bold
bold code text
sb-code-bold • 0.875rem • Roboto Mono Bold

Regular body text for descriptions and longer content blocks.

Regular text • 1rem • Roboto Mono Regular

Badge System

Status badges

Draft Work in progress
Complete Ready for review
Approved Final version

Version badges

v1.0 Initial version
v2.1 Current version
Beta Testing version

Context badges

Interior Scene type
Day Time of day
4K Resolution