Studio / Tokens
Design tokens
Read from studio/src/lib/tokens.ts: 48 values. Change them there, never inline in a scene. Rules for using them are in the design system.
On this page
Palette
One accent. Everything else is neutral. The accent marks the focal point only: one word, one bar, one number.
#0D0E10Frame background#16181CCards, plates#1E2126Neutral bars, raised panelsrgba(242, 241, 236, 0.10)Hairlines, grid, bordersrgba(242, 241, 236, 0.22)Hairlines, grid, borders#F2F1ECPrimary text#9A9CA1Supporting text, labels#5E6168Metadata, timecodes#5B8CFFThe focal point only#0D0E10Text that sits on the accent colour.Type scale
Sizes are for the 1080 px short side, so the same scale works in 16:9, 9:16 and 1:1. Samples are drawn at about a third of video size. Fonts in the films: Inter Tight for reading, JetBrains Mono for labels.
Video-native type ramp
For hero moments. Sizes are a percent of the composition width, so a keyword can be as large as the frame allows.
Spacing and radii
An 8 px base grid for gaps and padding.
Safe margins per format
Key text and logos stay inside the inner box. 9:16 reserves extra room at the top and bottom for platform interface. Re-compose for each format instead of scaling.
top 96, right 128, bottom 96, left 128
top 220, right 80, bottom 380, left 80
top 96, right 96, bottom 96, left 96
Spring presets
Plotted over two seconds with the same step the Remotion spring() function takes each frame. The dashed line is the target.
springs.smooth
No overshoot. Default for text, masks, panels.
springs.snappy
Quicker, no visible overshoot. Small UI elements, bars.
springs.settle
Tiny overshoot, then settle. One element per scene at most.
Easing curves
Bezier curves for interpolate(). Never animate linearly unless it is a counter or a constant drift.
ease.out
Default for entrances: fast start, long soft landing.
ease.in
For exits: gentle start, quick finish.
ease.inOut
For moves between two resting states and wipes.
buoyant()
"Buoyant" ease: a cubic ease-out plus a half-sine bob over the WHOLE lifetime, so a rising element keeps drifting through its peak instead of freezing. Returns 0 at t=0 and exactly 1 at t=1; in between it overshoots by about bob and settles back.
Timing defaults
In frames at 30 fps.
| Token | Frames | Seconds | Meaning |
|---|---|---|---|
timing.enter | 20 | 0.67 s | Length of a typical entrance. |
timing.exit | 12 | 0.40 s | Length of a typical exit (exits are faster than entrances). |
timing.wordStagger | 3 | 0.10 s | Delay between words in a stagger. |
timing.charStagger | 1.5 | 0.05 s | Delay between characters in a stagger. |
timing.lineStagger | 5 | 0.17 s | Delay between lines or list items. |
timing.hold | 45 | 1.50 s | Minimum time a finished state is held before anything else moves. |
timing.transitionFrames | 15 | 0.50 s | Scene transition length. |
timing.count | 40 | 1.33 s | Number counters and chart growth. |