Design System

42 themes. One token layer. Every combination works.

Pass any THEME_* constant to any template and it renders correctly. Override individual colors with a BrandKit without touching theme files. All 1638 compositions share the same system.

Browse all compositions Apply your brand colors

Built-in themes

Each theme is a complete visual identity - backgrounds, text hierarchy, accent gradient, card styles, and font weights. Import from _shared/themes.ts.

Dark

THEME_DARK

View theme Preview

Clean

THEME_CLEAN

View theme Preview

Bold

THEME_BOLD

View theme Preview

Warm

THEME_WARM

View theme Preview

Minimal

THEME_MINIMAL

View theme Preview

Neon

THEME_NEON

View theme Preview

Lindamohamed

THEME_LINDAMOHAMED

View theme Preview

Extended themes

Ocean

THEME_OCEAN

View theme Preview

Sunset

THEME_SUNSET

View theme Preview

Forest

THEME_FOREST

View theme Preview

Rose

THEME_ROSE

View theme Preview

Gold

THEME_GOLD

View theme Preview

Midnight

THEME_MIDNIGHT

View theme Preview

Crimson

THEME_CRIMSON

View theme Preview

Lavender

THEME_LAVENDER

View theme Preview

Arctic

THEME_ARCTIC

View theme Preview

Espresso

THEME_ESPRESSO

View theme Preview

European themes

Corporate

THEME_CORPORATE

View theme Preview

Industrial

THEME_INDUSTRIAL

View theme Preview

Vienna

THEME_VIENNA

View theme Preview

Alpine

THEME_ALPINE

View theme Preview

Finance

THEME_FINANCE

View theme Preview

Flat/Material themes

Material Blue

THEME_MATERIAL_BLUE

View theme Preview

Material Dark

THEME_MATERIAL_DARK

View theme Preview

Flat Red

THEME_FLAT_RED

View theme Preview

Flat Navy

THEME_FLAT_NAVY

View theme Preview

Swiss

THEME_SWISS

View theme Preview

Bauhaus

THEME_BAUHAUS

View theme Preview

Mono

THEME_MONO

View theme Preview

Paper

THEME_PAPER

View theme Preview

Slate

THEME_SLATE

View theme Preview

Blueprint

THEME_BLUEPRINT

View theme Preview

Browse all 42 themes

Theme interface

Every theme implements the same Theme interface. All 15 tokens are used by every template - nothing is template-specific.

Backgrounds

bg bgSecondary bgGlass

Text

textPrimary textSecondary textMuted

Accents

accent accentSecondary accentGradient

Cards

cardBorder cardShadow

Typography

fontFamily headingWeight bodyWeight

src/remotion/templates/_shared/themes.ts

// Use any template with any theme
import { THEME_DARK, THEME_NEON } from "../_shared/themes";

// Pass as an explicit prop
<Testimonial
  spec={mySpec}
  theme={THEME_NEON}
  layout="centered"
/>

// Or use the THEMES registry by string
const theme = THEMES["dark"] ?? THEMES.dark;

// Or create your own theme
export const THEME_MYBRAND: Theme = {
  name: "mybrand",
  bg: "#0d0d0d",
  accent: "#ff6b35",
  // ... all 15 tokens
};

BrandKit - runtime color overrides

Don't want to create a full custom theme? Pass a BrandKit to override specific colors on top of any existing theme. applyBrandKit(theme, brandKit) returns a new theme with your overrides applied - the base theme is unchanged.

primaryColor overrides accent, rebuilds accentGradient and cardBorder

accentColor overrides accentSecondary

bgColor overrides bg

textColor overrides textPrimary

fontFamily overrides fontFamily

logoUrl passed through to compositions that render a logo

Try brand customization

BrandKit usage

import { applyBrandKit, THEME_DARK } from "../_shared/themes";

// Override only what you need
const brandKit = {
  primaryColor: "#ff6b35",
  bgColor:      "#0d0d0d",
};

// Returns a new theme - original unchanged
const themed = applyBrandKit(THEME_DARK, brandKit);

// Pass to any template
<Testimonial spec={spec} theme={themed} />

// Or pass brandKit directly (all showcase components accept it)
<TestimonialDarkCentered brandKit={brandKit} />

Typography scale

All font sizes come from TYPE in _shared/layouts.ts. Edit once, updates every composition. Minimum TYPE.caption (24px) enforces broadcast legibility at 1280x720.

TokenSizeUseExample

TYPE.hero 72px Hero headlines, stat numbers Aa

TYPE.title 52px Section titles, card headers Aa

TYPE.subtitle 38px Sub-headings, labels Aa

TYPE.body 32px Body text, descriptions Aa

TYPE.small 28px Secondary text, meta Aa

TYPE.caption 24px Captions, badges - minimum size Aa