The pressable 3D key for primary actions in bars and panels. It presses down 2 px on the edge.

.key

Small for bars, accent for the one action that moves the work forward, on for a toggled setting, wide for panel actions.

.key.small · .key.accent · .key.on · .key.wide

Square 40 px icon buttons in the toolbars. The selected tool gets the accent key; toggles get a soft fill.

.tool · .tool.active.primary-tool

Quiet buttons for secondary actions inside tiles, cards and dialogs.

.icon-button · .text-button · .danger-button

A dashed drop target that turns accent on hover and dims while a file uploads.

.upload · .upload.busy

Floats under the stage. Reads “Ask Claude” with nothing selected and “Edit this” when a layer is.

.ask-key

Time readout, beat stepping, the round play button and the video length picker.

.transport · .play · .duration-pick

One line of text. The placeholder is an example, never the label.

.field

Layer text and prompts. Grows with a vertical resize handle.

textarea

Paired numbers with a draggable prefix: drag the X, Y, W or H to scrub the value.

.num · .num-prefix · .row.pair

Start, duration and end in seconds, with the frame count under each.

.time-fields · .time-input

A chip that opens the system picker, a hex field and twelve swatches; the chosen swatch gets a ring.

.color-field · .hex-field · .chip · .swatches

A native select dressed as a field, with the app’s chevron. The second one shows focus.

.select

A 4 px track filled to --p and a 22 px white thumb that grows on press. Drag them; the last row shows typing a value.

.slider · .slider-value

Searches inside a library popover.

.fx-search

Two to five options. The thumb slides on --i with the spring; click to try it.

.segmented · .seg-thumb

The Sound library’s “Keep length” or “Natural length” choice, a segmented control with a hint under it.

.segmented

The inspector’s tabs. The pill moves by --i on the spring; the set changes with the selection.

.tabs · .tab-pill

Mootionblue has no switch: a setting that turns on is a wide key that gains a check and the good colour.

.key.wide.on

Diamonds add keyframes from a card head; track toggles lock, hide or mute a row and turn amber or red when on.

.key-toggle · .row-toggle.lock/.hide/.mute

A plain checkbox for settings; the round pick selects tiles on Home.

.check · .pick

Filters on Home. One is always on.

.lib-chips · .lib-chip.on

Tops the inspector for a selection: a type badge, the name you can edit, then duplicate, export, delete and deselect.

.layer-heading · .badge · .sound-heading

Open and closed cards. Click a head to fold it. A diamond in the head adds a keyframe for that group.

.card · .card-head · .card-fold · .fold

A popover list under its anchor, with an optional note and a check on the current choice.

.menu · .menu-item · .menu-note

Right-click on a clip. Shortcuts sit in key caps on the right; Delete is the danger row.

.context-menu · .menu-item.danger · kbd

Choosing Delete turns the row into Cancel and a red Delete in place, so the menu never jumps.

.menu-confirm · .menu-confirm-cancel · .menu-confirm-go

Format cards with a radio, a one-line summary and the accent key.

.export-sheet · .export-format.on

Search, grouped tiles and a star to favourite. Previews here are CSS stand-ins for the live shader thumbnails.

.fx-menu · .fx-tile-wrap · .fx-star

Confirms an edit and says how to undo it. Leaves after five seconds.

.toast

A 22 px sheet for short tasks. Verb-first buttons that repeat the action.

.modal-shade · .modal · .modal-heading

⌘K. Grouped commands with their shortcuts as key caps; the first row asks Claude.

.cmdk · .cmdk-item · .keycap

Saving dot that blinks amber, Claude at work with a braille spinner and shimmer, and export progress.

.save-state.busy · .agent-status · .export-progress

Who’s signed in, a link to account settings and Sign out.

.account-menu · .account-pop

36 px circle with the first initial, or the profile picture.

.avatar · .avatar.has-image

The toolbar, ruler, section pills, the fx lane with a Fade out effect, the score, sound-effect cues with the Pop cue selected, and packed layer rows. The red flag is the playhead.

.timeline-shell · .ruler-row · .sections-row · .fx-row · .audio-group · .layer-row · .playhead

A layer on the timeline: trim handles at each end, fade dots, the name and its entrance. Selected clips get the white ring.

.layer-clip · .trim-handle · .clip-selected

Coloured pills name each section; cuts between them can be rolled. Double-click a pill to set marks.

.section-pill · .cut.scene

A mark per cue with a bar for its length. The selected cue shows its name and time.

.sfx-hit · .sfx-mark · .sfx-len · .sfx-tag

The red flag scrubs; hold ⇧ to snap to beats.

.playhead-rail · .playhead

Text, colour, outline, shadow and timing for the selected text layer.

aside.inspector · .layer-heading · .card

Entrance, exit and keyframes for the selected layer.

aside.inspector

Volume, pitch and length for a cue, then the library: Keep length or Natural length, and tiles with an envelope, a name and a preview button.

.sound-heading · .sound-grid · .sound-tile.on

Connect Claude Code, or ask the built-in assistant.

aside.inspector

Hover lifts the tile and reveals the star; a favourite keeps a filled star.

.fx-tile · .fx-star.on

Open and close effects first, then basics. Hover previews on the stage; a click adds at the playhead.

.fx-menu

An envelope drawn from the sound, its name and length, and a preview button.

.sound-tile · .sound-pick · .sound-play

Blank formats, templates with their own art, and Import.

.start-row · .start-tile · .start-tile.template

A thumbnail you can scrub, the duration and size on hover, the name and when it was edited. The third tile is selected.

.project-tile · .project-tile.selected · .folder-tile

The list view: thumbnail, name, format, length, folder and date.

.project-row · .folder-row

Filters, search, sort and the grid or list switch.

.lib-tools

Appears while selecting: count, Select all, Move to folder, Pin, Download and Delete. Delete asks in place, naming how many.

.bulk-bar · .bulk-btn.danger · .bulk-confirm

Shown while projects load, at the size of a real tile.

.project-tile.skeleton

Email first, then a code. The primary button is a taller cousin of the key.

.mb-clerk-title · .mb-clerk-input · .mb-clerk-primary

Six boxes for the emailed code; the caret sits in the next empty box.

.mb-clerk-otp

Focus draws the accent border with a soft halo; the button presses 2 px like a key.

.mb-clerk-input:focus · .mb-clerk-primary:active