Brand Tokens

Define the visual identity for generated videos — colors, typography, surfaces, and chart styles — as a JSON token file that flows through the entire pipeline. Every generated scene inherits the brand automatically.

What are brand tokens?

Brand tokens separate visual identity from motion choreography. Animatic owns the motion — timing, easing, camera, transitions. Brand tokens own the look — colors, fonts, border radii, shadows.

This means you can apply the same cinematic-dark choreography to completely different brands. A Mercury fintech dashboard and a healthcare analytics platform can share the same animation pipeline but look entirely distinct.

Brand token files live in catalog/brands/ as JSON. Two ship with Animatic:

_default — Dark neutral palette (Animatic's built-in)
mercury — Mercury-inspired fintech (dark navy, warm off-white text, purple accent)

Token schema

Four categories of tokens, each controlling a different layer of visual identity.

Category	What it controls	Example tokens
`colors`	All color values — backgrounds, text, accents, semantic	`bg_primary`, `text_primary`, `accent`, `trend_up`
`typography`	Font families + type scale with 6 tiers	`font_family`, `hero.size`, `body.line_height`
`surfaces`	Card, panel, input component styles	`card.border_radius`, `panel.shadow`
`chart`	Data visualization colors	`bar_color`, `axis_color`, `bar_active`

Full token example

{
  "brand_id": "mercury",
  "name": "Mercury",
  "personality": "cinematic-dark",
  "style": "prestige",
  "colors": {
    "bg_primary": "#1a1a2e",
    "bg_surface": "rgba(255,255,255,0.04)",
    "bg_elevated": "#1c1c2e",
    "text_primary": "#e8e0d4",
    "text_secondary": "rgba(232,224,212,0.6)",
    "accent": "#6366f1",
    "trend_up": "#4ade80",
    "trend_down": "#94a3b8",
    "border": "rgba(255,255,255,0.06)",
    "shadow": "rgba(0,0,0,0.6)"
  },
  "typography": {
    "font_family": "'Inter', -apple-system, sans-serif",
    "font_mono": "'JetBrains Mono', monospace",
    "hero": { "size": "48px", "weight": "400", "line_height": "1.1", "letter_spacing": "-0.02em" },
    "tagline": { "size": "36px", "weight": "400", "line_height": "1.2" },
    "heading": { "size": "20px", "weight": "600", "line_height": "1.3" },
    "body": { "size": "16px", "weight": "400", "line_height": "1.5" },
    "caption": { "size": "13px", "weight": "400", "line_height": "1.4" },
    "label": { "size": "14px", "weight": "500", "line_height": "1.3" }
  },
  "surfaces": {
    "card": {
      "background": "rgba(255,255,255,0.04)",
      "border": "1px solid rgba(255,255,255,0.06)",
      "border_radius": "12px",
      "padding": "20px 24px"
    },
    "panel": {
      "background": "#1c1c2e",
      "border_radius": "16px",
      "shadow": "0 24px 80px rgba(0,0,0,0.6)"
    },
    "input": {
      "background": "rgba(255,255,255,0.06)",
      "border_radius": "24px",
      "padding": "16px 20px"
    }
  },
  "chart": {
    "bar_color": "rgba(255,255,255,0.3)",
    "bar_active": "#6366f1",
    "axis_color": "rgba(255,255,255,0.2)"
  }
}

Typography tiers

Six tiers from largest to smallest. Each tier defines size, weight, line height, and optional letter spacing.

Tier	Typical use	Mercury example
`hero`	Full-screen headlines	48px, weight 400, tight leading
`tagline`	Subtitle or subheading	36px, weight 400
`heading`	Section titles	20px, weight 600
`body`	Paragraph text	16px, weight 400
`caption`	Small annotations	13px, weight 400
`label`	UI labels, badges	14px, weight 500

Using brand tokens

Three ways to apply a brand to your brief:

Reference by ID

Point to a pre-defined brand file in catalog/brands/:

{
  "brand_id": "mercury",
  "project": { "title": "Mercury Insights Dashboard" },
  "tone": { "mood": "confident", "energy": "medium" }
}

Inline tokens

Pass brand tokens directly in the brief — no file needed:

{
  "brand": {
    "colors": {
      "bg_primary": "#1a1a2e",
      "text_primary": "#e8e0d4",
      "accent": "#6366f1"
    },
    "typography": {
      "font_family": "'Inter', sans-serif"
    }
  },
  "project": { "title": "Custom Brand Video" }
}

Inline tokens are merged with defaults — you only need to specify what differs.

No brand specified

Falls back to _default.json — a dark neutral palette suitable for most cinematic-dark and editorial content.

The personality and style fields in the brand file suggest defaults but don't override explicit brief settings. If your brief says "style": "energy" but the brand says "style": "prestige", the brief wins.

CSS custom properties

Brand tokens are automatically injected as CSS custom properties into every generated scene:

:root {
  --brand-bg-primary: #1a1a2e;
  --brand-bg-surface: rgba(255,255,255,0.04);
  --brand-text-primary: #e8e0d4;
  --brand-text-secondary: rgba(232,224,212,0.6);
  --brand-accent: #6366f1;
  --brand-font: 'Inter', -apple-system, sans-serif;
  --brand-hero-size: 48px;
  --brand-card-bg: rgba(255,255,255,0.04);
  --brand-card-radius: 12px;
  /* ... all tokens */
}

Scene HTML templates reference these variables with var(--brand-*). This means:

Standalone rendering (Remotion) uses the CSS custom properties directly
Preset's component renderer can resolve the same tokens through its design system

Architecture

Brand tokens are the contract between Animatic (motion engine) and Preset (design system platform).

brief.json→generateScenes→scenes/*.json→analyzeScene→planSequence→evaluate→render

At each stage:

Brief references a brand_id or provides inline tokens
Animatic resolves the brand, injects CSS variables, generates the scene graph and motion timelines
Standalone render (Remotion) uses CSS custom properties as-is
Preset render resolves tokens through the full design system for higher fidelity components

Animatic owns motion and structure. Preset owns design system and rendering fidelity. Brand tokens are the bridge.

This architecture means Animatic videos can render standalone (via Remotion with CSS vars) or through Preset's platform (with full component rendering). The brand token JSON is the shared contract.

Available brands

Brand	Personality	Style	Description
`_default`	cinematic-dark	prestige	Dark neutral — Animatic's built-in palette
`mercury`	cinematic-dark	prestige	Mercury fintech — dark navy, warm off-white, purple accent

To create a custom brand, add a JSON file to catalog/brands/ following the schema above. The pipeline picks it up automatically via brand_id.

Try it

Try asking your AI:

"Generate a video using the mercury brand: 30-second fintech dashboard promo"

"Create a video with custom brand colors: dark green background, white text, orange accent. Product launch style."

"Show me the mercury brand token definition"

"Generate the same video twice — once with mercury brand and once with default. Compare the visual output."