01 · Foundations

The values every screen is built from.

Colour, type, space, depth, material, motion and icons, read straight from the app’s stylesheet. Colours are OKLCH, so lightness steps stay even across hues and both themes come from one set of numbers.

Colour

A neutral, faintly violet grey palette in the spirit of iOS system colours, one blue accent and one orange brand colour. Dark mode swaps the surfaces to true black and greys; tokens marked “same as light” aren’t overridden in dark. Text tokens are the ink colour at lower alpha, so they sit right on any surface.

Brand

TokenLightDark
--brand

Mootionblue orange: the Ask Claude key and brand moments

oklch(0.683 0.211 37.698)
oklch(0.683 0.211 37.698) same as light
--brand-2

Lighter orange for brand gradients

oklch(0.726 0.178 43.189)
oklch(0.726 0.178 43.189) same as light

Surfaces

TokenLightDark
--bg

The window behind every panel

oklch(0.963 0.007 286.274)
oklch(0 0 0)
--surface

Cards, panels, the inspector and timeline shells

oklch(1 0 0)
oklch(0.227 0.004 286.092)
--surface-2

Raised fills inside a surface, hovered rows

oklch(0.945 0.007 286.271)
oklch(0.294 0.004 286.177)
--surface-3

Deeper fills and pressed rows

oklch(0.917 0.007 286.266)
oklch(0.349 0.003 286.221)
--board

The stage board behind the video

oklch(0.935 0.007 286.27)
oklch(0.227 0.004 286.092)
--menu

Menus, popovers and the toast

oklch(1 0 0)
oklch(0.294 0.004 286.177)
--glass

Translucent floating bars, with blur

oklch(1 0 0 / 0.722)
oklch(0.227 0.004 286.092 / 0.761)
--glass-edge

The 1px inner edge of glass

oklch(1 0 0 / 0.902)
oklch(1 0 0 / 0.071)

Ink and lines

TokenLightDark
--ink

Primary text and icons

oklch(0.227 0.004 286.092)
oklch(0.965 0.003 286.35)
--ink-2

Secondary text and labels

oklch(0.227 0.004 286.092 / 0.62)
oklch(0.965 0.003 286.35 / 0.639)
--ink-3

Hints, placeholders and units

oklch(0.227 0.004 286.092 / 0.42)
oklch(0.965 0.003 286.35 / 0.42)
--ink-4

Disabled text and faint marks

oklch(0.227 0.004 286.092 / 0.22)
oklch(0.965 0.003 286.35 / 0.2)
--line

Hairline dividers

oklch(0 0 0 / 0.059)
oklch(1 0 0 / 0.071)
--line-2

Stronger borders and slider tracks

oklch(0 0 0 / 0.102)
oklch(1 0 0 / 0.122)
--dot

The dot grid on the stage board

oklch(0 0 0 / 0.11)
oklch(1 0 0 / 0.102)

Accent and status

TokenLightDark
--accent

System blue: selection, focus rings, primary actions

oklch(0.603 0.218 257.424)
oklch(0.625 0.206 255.486)
--accent-2

Lighter blue for gradients

oklch(0.685 0.17 252.993)
oklch(0.685 0.17 252.993) same as light
--accent-soft

Tint behind selected rows and chips

oklch(0.603 0.218 257.424 / 0.122)
oklch(0.625 0.206 255.486 / 0.2)
--on-accent

Text and icons on the accent

oklch(1 0 0)
oklch(1 0 0) same as light
--danger

Delete and errors

oklch(0.654 0.232 28.659)
oklch(0.663 0.224 28.292)
--good

Success and keys that are on

oklch(0.611 0.162 148.827)
oklch(0.755 0.208 146.984)
--warn

Warnings

oklch(0.57 0.138 57.053)
oklch(0.825 0.149 73.346)

Controls

TokenLightDark
--field-bg

Wells for fields, selects and segmented controls

oklch(0.569 0.015 285.906 / 0.102)
oklch(0.569 0.015 285.906 / 0.22)
--key-face

The face of a key

oklch(0.945 0.007 286.271)
oklch(0.294 0.004 286.177)
--key-face-hover

The face of a key on hover

oklch(0.923 0.007 286.267)
oklch(0.322 0.005 286.101)
--key-edge

The 3D edge under a key

oklch(0.862 0.007 286.255)
oklch(0.197 0.004 286.029)

Contrast

WCAG 2 ratios for the pairs the app relies on, with alpha composited over the real surface. Body text needs 4.5:1; large or bold text and icons need 3:1.

PairLightDark
--ink on --bg
Body text on the window		Aa 15.3:1 AAAAa 19.0:1 AAA
--ink on --surface
Text on cards and panels		Aa 17.0:1 AAAAa 15.4:1 AAA
--ink-2 on --surface
Labels on panels		Aa 4.8:1 AAAa 7.0:1 AA
--ink-3 on --surface
Hints and units		Aa 2.6:1 Below 3:1Aa 3.8:1 AA large
--on-accent on --accent
Text on accent keys		Aa 4.0:1 AA largeAa 3.6:1 AA large
--accent on --surface
Links and the accent on panels		Aa 4.0:1 AA largeAa 4.7:1 AA
--danger on --surface
Delete labels		Aa 3.5:1 AA largeAa 5.0:1 AA
--good on --surface
On-state keys		Aa 3.5:1 AA largeAa 8.4:1 AAA

Watch these pairs. --ink-3 is under 3:1 on light surfaces: keep it for units, placeholders and icons next to a label, never for a sentence. White on --accent is about 4:1 in light and 3.6:1 in dark, so accent keys keep to short semibold labels; a step darker accent would clear 4.5:1. --good and --danger on light surfaces work as icons and short words, not as body text.

Timeline colours

Clips are two-stop gradients by layer type, with a soft wave on top. Section pills take the colour the section was given, at 12–14% for the fill.

Textoklch(0.695 0.191 300.788)oklch(0.561 0.239 295.146)
Rectangle and ellipseoklch(0.764 0.126 249.168)oklch(0.624 0.161 256.028)
Imageoklch(0.719 0.148 255.812)oklch(0.579 0.19 260.532)
Videooklch(0.823 0.136 67.559)oklch(0.722 0.162 55.816)
3D shapeoklch(0.735 0.16 355.121)oklch(0.626 0.196 1.838)
Musicoklch(0.813 0.117 158.841)oklch(0.684 0.127 158.76)
Narratoroklch(0.766 0.136 308.698)oklch(0.604 0.198 303.315)
Section pills

Each section carries a dark-theme and a light-theme value (--sc-d, --sc-l), nudged so the label reads on the timeline. These are the sections of the “Product launch” template.

Typography

Inter carries the interface at a 13px base with character variants cv11 and ss01 (the single-storey a and the open digits), antialiased. Numbers that change use tabular figures so they don’t jitter.

Inter Aa 0123

Every label, field, menu and heading. Weights 400 to 700.

Sunghyun Sans mootionblue

The wordmark at 900, −0.03em. Also the default face for text layers in videos.

Geist Get started

Only inside the “One shape” template tile, where it matches the demo video’s own type.

Mono · var(--mono) 0:00.0

The system mono stack (SF Mono, Menlo) for timecodes, code layers and inline code.

Type scale

The sizes the app actually uses, largest first. Most of the interface lives between 11 and 15px; 13px is the base.

40px · 700Rendering 64%Export progress percentage
30px · 700Welcome backSign-in title
22px · 700Profile detailsAccount pane headings
21px · 900mootionblueWordmark, Sunghyun Sans
20px · 700New projectHome headings
19px · 600Keyboard shortcutsModal headings
17px · 600ExportSheet titles on phones
16px · 400Search commands or ask ClaudePalette input, empty stage
15px · 600mootionblue · LaunchProject title, panel headings, transport time
14px · 600NarratorCard titles, tile names
13px · 500Sync sound effects to motionThe base: labels, fields, menus
12.5px · 500Your productSection pills, notes
12px · 500Edited just nowSmall keys, captions, hints
11.5px · 500Plays 0.50–0.59 sSecondary hints
11px · 600SECTIONSTrack labels, units, section headers
10.5px · 5000:04Ruler ticks, key caps
10px · 500pxSlider units
9px · 600INKeyframe diamonds, tiny flags

Weights

Aa
400Body copy, long hints
Aa
500Labels, menu items, the default for UI
Aa
600Keys, titles, selected tabs
Aa
700Headings, numbers that matter
Aa
800Display type in templates
Aa
900The wordmark

Numbers

Transport time, mono0:04.2 / 0:15.0 Slider value, tabular100 % Duration, tabular0.35 s

Spacing

An even rhythm with a few odd steps for optical fixes. Gaps of 6, 8 and 10px cover most of the app; rows are 36px tall, keys 40px (32px small), the top bar 64px and the inspector 400px wide.

2pxSegmented padding, icon nudges
4pxTight clusters, track gaps
6pxMenu padding, chip gaps
8pxThe default gap between controls
10pxRow gaps, field padding
12pxCard margins, toolbar groups
14pxCard padding, key padding
16pxPanel insets
18pxSection breathing room
24pxPage edges and big groups

Radii

Corners grow with the size of the surface: 10px for controls, 12px for keys, 14px for menus, 18px for cards and 22px for the big panes. Nested corners shrink by the padding between them.

4pxRuler marks, tiny tags
6pxCode, key caps
8pxSegment buttons
9pxMenu items
10pxFields, segmented controls, small keys, fx tiles
11pxTool buttons and timeline clips
12pxKeys
13pxSection pills (half the 26px height)
14pxMenus, popovers, toasts
16pxInspector and project thumbnails
18pxCards, the palette, project tiles
22pxStage, timeline shell, modals
999pxPills, chips, avatars

Elevation

Two shadows only. Cards sit on --card-shadow; anything that floats above the work, such as menus, popovers, the palette and toasts, uses --pop-shadow. Dark mode deepens both, since shadows read less on black.

--card-shadow · light0 1px 2px oklch(0 0 0 / 0.031), 0 8px 26px -14px oklch(0 0 0 / 0.122)
--pop-shadow · light0 1px 2px oklch(0 0 0 / 0.059), 0 24px 60px -20px oklch(0 0 0 / 0.322)
--card-shadow · dark0 1px 2px oklch(0 0 0 / 0.302), 0 12px 32px -14px oklch(0 0 0 / 0.6)
--pop-shadow · dark0 1px 2px oklch(0 0 0 / 0.4), 0 24px 60px -20px oklch(0 0 0 / 0.8)

Materials

Two materials give the app its feel: glass for things that float over the video, and keys you can press.

28%
Glass · .glass

--glass fill, blur(24px) saturate(1.6) behind it, a 1px inner edge in --glass-edge and --pop-shadow. Used for the zoom pill and bars that float on the stage.

Rest
Hover · lifts 1px
Pressed · sinks 2px
Accent
Key · .key

A face in --key-face over an edge in --key-edge; the edge (--t) grows to 4px on hover and drops to 1px when pressed, on the spring. Press one to feel it.

Motion

Two curves. Spring for things that appear or respond to a press: it overshoots a touch and settles. Ease for things that move or change colour: fast out, soft landing. Nothing uses linear except loaders.

--easecubic-bezier(0.2, 0.8, 0.2, 1)

Hover fills, tabs, sliders, focus rings, fades.

--springcubic-bezier(0.34, 1.4, 0.64, 1)

Menus, cards, the toast, keys lifting. It overshoots by about 10% before it settles.

Linear
Ease
Spring

Keyframes

Entrances are short and start close to where they land: 6–8px of travel and 96–98.5% scale, never a slide across the screen.

panel-in
panel-in

0.42s var(--spring)

Cards and panels: rise 8px and settle from 98.5%

pop-in
pop-in

0.28s var(--spring)

Menus that open upward from a key

pop-up
pop-up

0.24s var(--spring)

Popovers that drop from the top bar

fade-in
fade-in

0.4s var(--ease)

Scrims and quiet surfaces

toast-in
toast-in

0.3s var(--spring)

The toast, from 8px above and 96%

Durations

DurationCurveUsed for
0.12seaseA key landing when pressed
0.15seaseHover fills, focus rings, field wells
0.18seaseSmall fades and colour changes
0.2sease / springThe workhorse: tabs, thumbs, menus closing
0.28sspringMenus and popovers popping in
0.3sspringThe toast dropping in
0.34sspringA key rising on hover
0.42sspringPanels and cards entering, staggered 35ms
0.6sspringThe sign-in form arriving

Reduced motion. Under prefers-reduced-motion: reduce the app drops travel and scale and keeps short fades, so state still changes visibly without movement.

Icons

Mootionblue’s own stroke set: 89 icons on a 24px grid, 1.8px stroke, round caps and joins, drawn from the real paths in src/components/icons.tsx. Filled: play, diamond, bolt. Solid with a stroke: speakerOn, speakerOff. 19px is the default; tool rows use 19px, menus 15–16px.

14px
16px
19px
24px
Filled
Solid
select
split
text
rect
ellipse
shape3d
image
video
code
play filled
pause
prev
next
undo
redo
layers
plus
minus
fit
down
up
left
right
close
theme
moon
crop
export
style
motion
project
claude
section
trash
copy
music
mic
speaker
speakerOff solid
speakerOn solid
unlock
sidebar
cut
paste
forward
backward
expand
collapse
curve
add
markIn
markOut
magnet
bolt filled
upload
folder
clock
eye
eyeOff
lock
outline
fill
timing
enter
exitIcon
loop
paperclip
send
minimize
rotate
alignLeft
alignCenter
alignRight
arrowDown
arrowUp
arrowLeft
arrowRight
diamond filled
check
transition
component
sparkle
font
share
more
grip
keyboard