Master the art of building cohesive visual themes with coordinated color palettes, typography systems, gradients, and effects. Learn to save and reuse themes across all your video projects for consistent brand identity.
Understand how themes are organized and learn the design token system that powers consistent styling across templates.
A theme is a coordinated set of visual styles—colors, typography, spacing, and effects—that creates a consistent look across your videos. Themes use design tokens to ensure every element follows the same visual language.
A complete theme includes several key components that work together to create visual harmony.
Design tokens are named values that represent visual properties. Instead of using raw values like #6366f1, use semantic names like primary or brandColor. This makes themes easier to maintain and swap.
Start with a simple theme structure that organizes your visual properties into logical groups. This object becomes the foundation for all your customizations.
Name tokens by their purpose, not their value. Use textPrimary instead of darkGray, and surfaceElevated instead of lightBlue. This makes themes more flexible and easier to update.
Organize tokens in layers: primitive tokens (raw values), semantic tokens (purpose-based), and component tokens (specific to UI elements). This hierarchy enables systematic theme changes.
Build harmonious color palettes with primary, secondary, accent, and neutral colors that work together beautifully.
Your primary color is the dominant brand color used for key elements like buttons, links, and highlights. Include light and dark variants for flexibility.
Using just one color value limits your design options and makes it hard to create visual hierarchy or indicate different states.
A complete color scale with light, base, and dark variants enables hover states, backgrounds, and text on colored surfaces while maintaining brand consistency.
Add supporting colors for variety and emphasis. Secondary colors complement your primary, while accent colors draw attention to specific elements like success states or calls-to-action.
Neutrals provide backgrounds, text colors, and borders. Build a scale from near-white to near-black with 8-10 steps for maximum flexibility in both light and dark themes.
For dark themes, use cool-tinted neutrals (slight blue undertone) for backgrounds. This creates depth and feels more natural than pure grays. Example: #0f172a instead of #1a1a1a.
A production-ready palette includes primary (3 shades), secondary, accent, and neutrals (background, surface, text, textMuted, border). This covers all common UI needs.
Ensure sufficient contrast for readability. Large text needs minimum 3:1 contrast ratio, body text needs 4.5:1. Use tools like WebAIM Contrast Checker to verify.
Define a consistent type system with font families, size scales, and weights that create clear visual hierarchy.
Choose fonts that reflect your brand personality. Most themes need two families: one for headings (often bolder, more distinctive) and one for body text (optimized for readability).
Pair fonts with contrasting characteristics. A geometric sans-serif heading with a humanist body font creates visual interest while maintaining readability.
Using random font sizes like 17px, 23px, 41px creates visual chaos. There's no clear hierarchy, and the design feels inconsistent.
A harmonious scale like 14, 16, 18, 24, 30, 36, 48, 60, 72 creates clear hierarchy. Each size has a purpose, from captions to hero headlines.
Build your scale using a consistent ratio. Common ratios include 1.25 (Major Third), 1.333 (Perfect Fourth), and 1.5 (Perfect Fifth). Multiply your base size by the ratio for each step.
Limit weights to 3-4 options: regular (400) for body, medium (500) for emphasis, semibold (600) for subheadings, and bold (700) for headings. Too many weights dilute hierarchy.
Set line height based on context. Headings use tight line height (1.1-1.2), body text uses comfortable spacing (1.5-1.6), and small text may need more (1.6-1.8).
For video, increase font sizes 20-30% compared to web. Viewers watch from a distance, and text appears on screen briefly. Prioritize legibility over density.
A production typography config includes heading and body font families, a size scale (xs through 6xl), weight options, and line height values for different contexts.
Add depth and visual interest with gradients, shadows, and other effects that enhance your theme without overwhelming it.
Linear gradients transition colors along a straight line. Use them for backgrounds, buttons, and overlays. Specify direction (180deg = top to bottom) and color stops.
Choose direction based on content flow. Vertical gradients (180deg) work for full-screen backgrounds. Diagonal gradients (135deg) add energy. Horizontal gradients (90deg) suit wide banners.
A solid color background can feel static and uninteresting, especially for video content that benefits from visual depth and movement.
A subtle gradient from #6366f1 to #4f46e5 adds depth while maintaining brand color. The transition creates visual interest without distraction.
Radial gradients emanate from a center point. Use them for spotlight effects, glows, and vignettes. Control shape (circle/ellipse) and position (center, top right, etc.).
Use gradient overlays to improve text readability over images. A dark gradient from transparent to 80% black ensures text remains legible regardless of the underlying image.
Create complex gradients with multiple color stops. A sunset gradient might transition through orange, pink, and purple. Keep stops harmonious—use adjacent colors on the color wheel.
Shadows add depth and hierarchy. Use subtle shadows for cards and elevated surfaces. For video, increase shadow opacity slightly as screens vary in contrast.
Create glows using radial gradients or box shadows with your brand color. A subtle glow around key elements draws attention without harsh edges. Example: 0 0 40px rgba(99,102,241,0.4).
Define consistent easing curves for animations. Use ease-out for entrances, ease-in for exits, and ease-in-out for state changes. Store these as theme tokens for consistency.
Learn to save your themes as reusable presets and apply them consistently across all your video projects.
Save themes as separate files that can be imported into any project. Use a consistent structure with colors, typography, gradients, and effects sections.
Create preset themes for different contexts: corporate (professional blues), creative (vibrant gradients), minimal (clean neutrals). Switch between them by changing a single import.
A corporate preset uses trustworthy blues, clean typography, and subtle effects. Colors: primary #1e40af, background #ffffff, text #1e293b. Font: Inter for both headings and body.
A creative preset uses bold colors and dynamic gradients. Colors: primary #f97316, secondary #8b5cf6, dark background #18181b. Font: Space Grotesk for headings.
Create both dark and light versions of your theme. Store them in a themes object with dark and light keys. Switch based on context or user preference.
Apply themes through props or a theme provider. Pass individual values for simple templates, or pass the entire theme object for templates with full theme support.
Export your theme as CSS custom properties for maximum flexibility. This enables theming of any CSS-based styling and works across different component libraries.
Implement theme switching by storing the current theme in state. Change the entire look of your video by updating a single variable. Great for A/B testing different brand treatments.
Track theme changes in version control. Document what changed and why. This creates a history of your brand evolution and makes it easy to revert if needed.
Continue exploring with these related guides and tutorials.
Start with our template library and apply your custom theme to create videos that perfectly match your brand identity.