Video Style Guide - Canvas Design System

Video Formats & Dimensions

Standard formats for different platforms and use cases.

play_arrow

Landscape (16:9)

1920 × 1080px (1080p)

YouTube, Webinars, Tutorials

play_arrow

Vertical (9:16)

1080 × 1920px

TikTok, Reels, Shorts, Stories

play_arrow

Square (1:1)

1080 × 1080px

LinkedIn, Instagram Feed

Technical Specifications

Specification	Standard	High Quality
Frame Rate	30fps	60fps (motion graphics)
Codec	H.264	H.265/HEVC, ProRes
Bitrate (1080p)	8-12 Mbps	20-50 Mbps
Audio	AAC, 128kbps stereo	AAC, 320kbps stereo
Sample Rate	44.1kHz	48kHz

Video Color Palette

Consistent colors for backgrounds, text, and graphics.

Background Colors

Navy Gradient

Primary background

White

Clean, minimal

Warm Cream

Soft, approachable

Red Gradient

Accent sections

Text & Graphics

White Text

On dark backgrounds

Ink Text

On light backgrounds

Workshopr Red

Highlights, CTAs

Muted Gray

Subtitles, captions

Accent Colors (for graphics, highlights)

Sky Blue

#0284C7

Purple

#7C4DFF

Emerald

#10B981

Amber

#F59E0B

Video Typography

Font usage for titles, lower thirds, and captions.

Element	Font	Size (1080p)	Weight	Notes
Main Title	Fraunces	72-120px	Bold (700)	Opening/closing screens
Section Title	Fraunces	48-64px	Bold (700)	Chapter/topic intros
Lower Third - Name	Inter	36-42px	Semibold (600)	Speaker identification
Lower Third - Title	Inter	24-28px	Regular (400)	Role/company
On-Screen Text	Inter	32-48px	Medium (500)	Key points, callouts
Captions/Subtitles	Inter	42-48px	Medium (500)	White with dark outline/bg
Animated Text	Inter	28-36px	Semibold (600)	Pop-up keywords

tips_and_updates

Safe zones: Keep text within 90% of frame (54px margins on 1080p) to avoid cropping on different devices and platforms.

Lower Thirds & Graphics

Standard overlays for speaker identification and callouts.

Sarah Mitchell

Senior Facilitator, Workshopr

Lower Third - Standard

White card with red accent bar, bottom-left

Sarah Mitchell

Senior Facilitator

Lower Third - Minimal

Text only with red subtitle, for light backgrounds

Chapter 2

Setting Clear Objectives

Chapter/Topic Card

Red label above Fraunces title, centered

lightbulb

Pro Tip: Always check your tech before going live

Callout Box

Highlighted tips with icon, red border

"The best facilitators know when to step back and let the group work."

— Bill, Workshopr

Quote Overlay

Full-screen red with italic Fraunces quote

73%

of teams report better outcomes
with structured facilitation

Statistic Overlay

Large red number with supporting text

Intro & Outro Sequences

Standard opening and closing animations for brand consistency.

play_circle Intro Sequence (3-5 seconds)

0.0s - Logo appears (fade/scale)

1.0s - Logo settles + brand sound

2.0s - Title text animates in

3.5s - Transition to content

Keep intros short. For social content (Reels, TikTok), skip intro entirely or use 1-second logo flash.

stop_circle Outro Sequence (5-8 seconds)

0.0s - Content fades to navy

1.0s - Logo + CTA appears

3.0s - Social handles animate in

5.0s - Subscribe/follow prompt

Include clear CTA (Subscribe, Visit site, Follow). For YouTube, add end screen elements in final 20 seconds.

Motion & Animation

Consistent motion language across all video content.

Recommended

Ease curves: Use ease-out for entrances, ease-in-out for transitions
Duration: 200-400ms for UI elements, 500-800ms for larger animations
Fade transitions: Simple fades between scenes (300-500ms)
Slide-in text: Horizontal or vertical slides with opacity
Scale: Subtle scale (95% → 100%) for pop-in effects
Consistency: Same animation style throughout a video

Avoid

Bouncy spring animations (too playful)
3D rotations or flips
Excessive particle effects
Fast strobing or flashing
Motion that distracts from content
Mismatched animation styles within a video

Animation Timing Reference

Element	Animation	Duration	Easing
Lower third appear	Slide up + fade	300ms	ease-out
Text pop-in	Scale (95%→100%) + fade	250ms	ease-out
Scene transition	Cross-fade	400-600ms	ease-in-out
Icon/graphic appear	Fade + slight scale	300ms	ease-out
Logo animation	Custom (brand motion)	800-1000ms	custom bezier

Audio Guidelines

Standards for voice, music, and sound design.

mic

Voice & Narration

Level: -12dB to -6dB (peaks at -3dB max)
Tone: Warm, conversational, confident
Pacing: Natural, not rushed (150-160 WPM)
Room tone: Minimal reverb, treated space
Processing: Light compression, de-essing, EQ

music_note

Background Music

Level: -24dB to -18dB under voice
Style: Upbeat but not distracting, modern
Avoid: Lyrics, heavy bass, jarring changes
Fade: 1-2 second fades at cuts
Licensing: Always use licensed/royalty-free tracks

Audio Levels Reference

Voice

-12 to -6dB

Music

-24 to -18dB

SFX

-18 to -12dB

Sound Effects

Use

Subtle whooshes for transitions
Soft clicks for UI interactions
Gentle chimes for notifications
Pop sounds for text appearing

Avoid

Loud, jarring sound effects
Cartoonish or comedic sounds
Overused stock sounds
Sound effects on every element

Thumbnails

Eye-catching thumbnails that maintain brand consistency.

5 Workshop
Mistakes

5

Listicle Style

Bold number, short title, navy background

person

Interview Title

Guest Name

Interview/Podcast

Face photo, name, cream background

Tutorial Title

Step-by-step guide

Tutorial/How-To

Red background, centered text

Thumbnail Best Practices

Dimensions: 1280 × 720px minimum
Text: 3-5 words maximum, legible at small sizes
Faces: Include faces when possible (higher CTR)
Contrast: Ensure text is readable over background

Branding: Include logo or consistent element
Avoid: Clickbait arrows, excessive text, cluttered designs
Test: View at 50px height to check readability
Consistency: Maintain series look across related videos

Captions & Subtitles

Accessible, on-brand caption styling.

Standard Style (Recommended)

This is an example caption with good contrast.

White text on semi-transparent black box
Inter Medium, 42-48px at 1080p
Centered at bottom of frame

Animated Style (Social)

This is ANIMATED text

Keywords highlighted in red
Word-by-word or phrase animation
For TikTok, Reels, Shorts

accessibility_new

Accessibility: Always include captions. 85% of social media videos are watched without sound. Use SRT/VTT files for platform-native captions.

Video Types

Format guidelines for different content categories.

play_lesson

Tutorial / How-To

Step-by-step educational content.

5-15 minutes typical length
Clear chapter markers
Screen recordings with face overlay
Numbered steps on screen
Summary/recap at end

videocam

Webinar / Live

Live or recorded educational sessions.

30-60 minutes typical
Speaker + slides layout
Lower thirds for speakers
Q&A section at end
Branded waiting room screen

bolt

Short-Form Social

TikTok, Reels, YouTube Shorts.

15-60 seconds max
Vertical (9:16) format
Hook in first 2 seconds
Animated captions required
No intro, minimal branding

record_voice_over

Interview / Podcast

Conversations and guest content.

20-45 minutes typical
Two-camera or remote setup
Lower thirds for each speaker
B-roll inserts welcome
Clip highlights for social

campaign

Promo / Ad

Marketing and promotional content.

15-30 seconds for ads
60-90 seconds for promos
Strong hook, clear CTA
High production value
Multiple aspect ratios needed

format_quote

Testimonial

Customer stories and reviews.

60-120 seconds typical
Authentic, unscripted feel
Name/company lower third
Pull quotes on screen
Logo at end only

Screen Recording Guidelines

Standards for software demos and tutorials.

Recording Setup

Resolution: 1920×1080 or 2560×1440 (scale down)
Frame rate: 30fps minimum, 60fps for smooth scrolling
Cursor: Highlight or enlarge for visibility
Clicks: Add visual click indicators
Zoom: Zoom in on small UI elements (150-200%)
Clean desktop: Hide notifications, use neutral wallpaper

Face Overlay (Picture-in-Picture)

Size: 200-300px circle or rounded rectangle
Position: Bottom-right corner (default)
Border: 3px white or red border
Background: Blurred or solid (not distracting)
Lighting: Face well-lit, no harsh shadows
Hide when: Full-screen demos or complex UI

Production Checklists

Pre-Production

Script or outline complete
Aspect ratio determined for platform
Graphics/lower thirds prepared
Music selected and licensed
Equipment tested (camera, mic, lighting)
Quiet recording environment secured

Post-Production

Color graded (consistent across videos)
Audio levels normalized
Captions/subtitles added
Intro and outro included
Thumbnail created
Export in correct format/codec

Quality Check Before Publishing

Visual

Brand colors correct
Fonts are Fraunces/Inter
Logo appears correctly
No visual glitches

Audio

Voice is clear
Music not too loud
No pops/clicks/hum
Levels consistent

Content

Spelling checked
Links/CTAs correct
Captions accurate
End screen working