Mootionblue design system

Motion you can edit, in an interface that stays out of the way.

The tokens, components and screens of Mootionblue, the browser editor for motion videos you make with Claude. Everything here is rebuilt in HTML and CSS on the app’s own stylesheet, so it matches the product to the pixel, in light and dark.

Sections

Start with the proposals if you are choosing a direction; the rest documents the system as it ships.

05ProposalsDirections for the editor, Home and sign-in, side by side, each in light and dark. 01FoundationsOKLCH colour tokens, type, spacing, radii, shadows, glass, motion and icons. 02ComponentsLive keys, fields, menus, the timeline parts and the inspector, with every state. 03ScreensThe editor, Home, sign-in, account, export and shortcuts as full mockups. 04FlowsStep-by-step storyboards from sign-up to export, sounds, loops and shaders. 06Principles & referencesVoice, motion, density and accessibility, plus what inspired each proposal. 07BlinksLittle 3D charms with eyes, built on the charm kit. Spin them, poke them, swap them. 08GleamFoil-stamped photobooth invitations that arrive sealed. Break the seal and tilt to catch the light.