Design Tokens

Design tokens provide consistent visual styling across your compositions.

Color palettes

5 built-in palettes, each with 7 color slots:

import { palettes } from '@oanim/core';

const colors = palettes.dark;
// colors.primary, colors.secondary, colors.accent,
// colors.bg, colors.bgAlt, colors.text, colors.textMuted

dark

Token	Value	Usage
`primary`	`#6366f1`	Primary accent (indigo)
`secondary`	`#8b5cf6`	Secondary accent (violet)
`accent`	`#06b6d4`	Highlight (cyan)
`bg`	`#0a0a0a`	Main background
`bgAlt`	`#141414`	Alternate background
`text`	`#f1f5f9`	Primary text
`textMuted`	`#94a3b8`	Secondary text

light

Token	Value	Usage
`primary`	`#4f46e5`	Primary accent (indigo)
`secondary`	`#7c3aed`	Secondary accent (violet)
`accent`	`#0891b2`	Highlight (cyan)
`bg`	`#ffffff`	Main background
`bgAlt`	`#f8fafc`	Alternate background
`text`	`#0f172a`	Primary text
`textMuted`	`#64748b`	Secondary text

midnight

Token	Value	Usage
`primary`	`#818cf8`	Primary accent (light indigo)
`secondary`	`#a78bfa`	Secondary accent (light violet)
`accent`	`#22d3ee`	Highlight (light cyan)
`bg`	`#020617`	Deep dark background
`bgAlt`	`#0f172a`	Alternate background
`text`	`#e2e8f0`	Primary text
`textMuted`	`#64748b`	Secondary text

sunset

Token	Value	Usage
`primary`	`#f97316`	Primary accent (orange)
`secondary`	`#f59e0b`	Secondary accent (amber)
`accent`	`#ef4444`	Highlight (red)
`bg`	`#0c0a09`	Warm dark background
`bgAlt`	`#1c1917`	Alternate background
`text`	`#fafaf9`	Primary text
`textMuted`	`#a8a29e`	Secondary text

ocean

Token	Value	Usage
`primary`	`#0ea5e9`	Primary accent (sky blue)
`secondary`	`#06b6d4`	Secondary accent (cyan)
`accent`	`#14b8a6`	Highlight (teal)
`bg`	`#0c1222`	Deep blue background
`bgAlt`	`#162032`	Alternate background
`text`	`#e0f2fe`	Primary text
`textMuted`	`#7dd3fc`	Secondary text

Font stacks

Pre-configured font family strings for common pairings:

import { fonts } from '@oanim/core';

Heading fonts

Key	Value
`fonts.heading.inter`	`Inter, sans-serif`
`fonts.heading.instrumentSerif`	`"Instrument Serif", serif`
`fonts.heading.spaceGrotesk`	`"Space Grotesk", sans-serif`
`fonts.heading.dmSans`	`"DM Sans", sans-serif`

Body fonts

Key	Value
`fonts.body.inter`	`Inter, sans-serif`
`fonts.body.dmSans`	`"DM Sans", sans-serif`
`fonts.body.sourceCodePro`	`"Source Code Pro", monospace`

Monospace fonts

Key	Value
`fonts.mono.jetbrainsMono`	`"JetBrains Mono", monospace`
`fonts.mono.firaCode`	`"Fira Code", monospace`
`fonts.mono.geistMono`	`"Geist Mono", monospace`

Load fonts via @remotion/google-fonts or staticFile() for local fonts. The token values are CSS font-family strings — they don’t load the font files.

Spacing scale

Consistent spacing values in pixels, based on a 4px unit scaled for 1920x1080:

import { spacing } from '@oanim/core';

Key	Value	Typical use
`xs`	`4px`	Tight spacing, icon gaps
`sm`	`8px`	Small padding
`md`	`16px`	Default padding
`lg`	`24px`	Section padding
`xl`	`32px`	Large gaps
`2xl`	`48px`	Major section spacing
`3xl`	`64px`	Hero spacing
`4xl`	`96px`	Large layout margins
`5xl`	`128px`	Full-width margins

Getting Started

CLI

Reference

Guides

Color palettes

dark

light

midnight

sunset

ocean

Font stacks

Heading fonts

Body fonts

Monospace fonts

Spacing scale

​Color palettes

​dark

​light

​midnight

​sunset

​ocean

​Font stacks

​Heading fonts

​Body fonts

​Monospace fonts

​Spacing scale

Color palettes

dark

light

midnight

sunset

ocean

Font stacks

Heading fonts

Body fonts

Monospace fonts

Spacing scale