Your complete guide to incorporating brand identity into video templates. Learn to place logos correctly, apply brand colors consistently, integrate custom fonts, manage assets efficiently, and maintain style guide compliance across all your video content.
Master the art of positioning and sizing logos to maintain brand integrity while ensuring visual balance in your videos.
Always maintain minimum clear space around your logo—typically equal to the height of a letter in your wordmark. This breathing room ensures your logo remains legible and impactful.
Position logos in consistent locations across your videos. The most common placements are top-left for persistent branding, bottom-right for subtle presence, and centered for intro/outro sequences.
A logo that's too large dominates the frame and distracts from the content.
A well-sized logo complements the content without overwhelming it.
Never shrink logos below their minimum readable size—typically 80-100px width for horizontal logos. Smaller sizes compromise legibility and brand recognition.
Prepare multiple logo versions: full color for light backgrounds, white/reversed for dark backgrounds, and a simplified mark for small spaces or watermarks.
Apply your brand palette strategically to create videos that are instantly recognizable while maintaining visual hierarchy.
Use your primary brand color for key elements (CTAs, headlines, accents), secondary colors for supporting elements, and neutral colors for backgrounds and body text. This creates visual hierarchy and brand consistency.
Default template colors don't reflect your brand identity.
Your brand palette creates instant recognition and consistency.
Ensure text has sufficient contrast against backgrounds. Light text on dark backgrounds (or vice versa) should have a contrast ratio of at least 4.5:1 for readability.
Always use exact hex codes from your brand guidelines. Approximations like "blue" or "green" can vary across systems. Precise values ensure consistency: #6366f1 not "indigo".
Create light and dark background variants using your brand colors. A dark mode might use your primary color at 10% opacity, while light mode uses white with colored accents.
Integrate your brand typography to maintain consistent voice and visual identity across all video content.
Load brand fonts using Google Fonts integration for common typefaces, or import custom font files (TTF, OTF, WOFF2) directly into your project's public folder for proprietary fonts.
For fonts available on Google Fonts, use Remotion's built-in loader for optimal performance.
For proprietary brand fonts, load them from your project's static files.
Match your brand's typography specifications exactly. If your brand uses Inter at 600 weight for headlines and 400 for body, configure these values in your template props.
Stick to your brand's designated font families—typically one for headlines and one for body text. Using too many fonts creates visual chaos and dilutes brand identity.
Always specify fallback fonts in case your primary font fails to load. Use system fonts that closely match your brand font's characteristics: fontFamily: "Inter, system-ui, sans-serif"
Organize and manage brand assets efficiently to streamline video production and ensure consistency across projects.
Structure your brand assets in a dedicated folder hierarchy: /public/brand/logos/, /public/brand/images/, /public/brand/fonts/. This makes assets easy to find and update.
Use descriptive, consistent file names: logo-primary-white.png, logo-mark-dark.svg, brand-pattern-01.png. Clear names prevent confusion and speed up production.
Disorganized assets slow down production and cause inconsistencies.
A clear folder structure makes assets easy to find and maintain.
Compress images appropriately for video use. Logos should be under 100KB, background images under 500KB, and full-screen assets under 2MB. Large files slow down preview rendering.
Keep brand assets in version control alongside your code. When logos or colors update, commit the changes so all team members have access to the latest approved assets.
Create a centralized brand configuration to ensure every video adheres to your style guide automatically.
Create a centralized brand-config.ts file that defines all brand values: colors, fonts, logo paths, spacing, and any other brand-specific settings. Import this config into every template.
A comprehensive brand config ensures consistency across all videos.
| Category | Properties |
|---|---|
| Colors | primary, secondary, accent, background, text |
| Typography | fontFamily, headingWeight, bodyWeight |
| Logos | primary, white, dark, mark |
| Spacing | logoMargin, contentPadding, cardGap |
Create a brand-props.json file with your brand settings for CLI rendering. Use --props=./brand-props.json to apply brand values consistently across batch renders.
Without a brand config, each video may have slight variations.
A centralized config ensures every video matches your style guide.
Periodically review your video output against your brand style guide. Check logo usage, color accuracy, typography, and overall brand feel. Update your brand config when guidelines change.
Continue exploring with these related guides and tutorials.
Now that you understand brand integration, explore our template library to find templates designed for easy brand customization. Each template supports comprehensive branding through props.