00 · System
How Cutroom looks, moves and speaks. Every page uses these rules. Inspired by the calm, mechanical style of modern hardware brands, built with free fonts and our own graphics.
01 · Principles
Show the numbers
Costs, lengths and scores are always visible, in mono.
One signal
Red means something is live, recording or wrong. Nothing else is red.
Calm and honest
No hype, no fake urgency, say what it costs.
Mechanical, warm
Dot type and grids, softened by space and plain words.
02 · Logo
Mark · black tile
Mark · on white
CutroomLockup: mark left, wordmark right
- Do: wordmark in Doto with the red dot on the left.
- Do: the mark is the 5×5 dot "C" — white dots, one red signal dot at the top-right — inside a hairline tile.
- Do: keep clear space equal to the height of the "C" on every side.
- Do: black or white only. Minimum 16px tall; below 32px the dots may touch slightly.
- Do: files live at /logo.svg, /favicon.png and /icon-192.png / /icon-512.png.
- Don't: recolour, add gradients, shadows, outlines or stretch it.
03 · Colour
Pure black
#000000 · --background
Every page background.
Pure white
#FFFFFF · --foreground
Text, icons, outlines of main buttons.
Warm grey
#DCD7D2 · --warm
Quiet highlights, caption chips on light video.
Window grey
#B1B3B3 · --window
Secondary text, second half of headlines, labels.
Panel
#141414 · --card
Cards and panels, always with a hairline border.
Hairline
#2E2E2E · --border
1px borders and spec-row dividers.
Signal red
#D71920 · --signal
Only as a signal: record dot, logo dot, main-button LED, live/new, errors.
Text on black is white or window grey only (both pass AA contrast). Never put red text on black for body copy.
04 · Type
Doto
Page headlines and the logo only.
Short statements, sentence case, no full stop at the end (the dot font draws it as a plus). Never numbers or body text.
Space Grotesk
Body text, card titles, form fields.
Sentence case. 14–16px body, 1.5 line height.
Space Mono
Labels, buttons, data rows, timecodes.
Uppercase, 0.12–0.14em tracking, one size per block, left-aligned.
Headlines are sentence case with a grey second half: "One video. Every moment." Never all caps, never all lowercase.
05 · Grid and spacing
06 · Components
Buttons
Main buttons carry the red LED. One per screen.
Inputs and toggles
Spec rows
Badges and status
Empty state
No clips on this device yet. Short, plain, with one next step.
07 · Dots and motion
0
LED counter: numbers count up once when they appear.
Dot field: 9px grid, 1px dots, fades from one corner.
Headlines reveal word by word (0.06s apart), panels fade up in sequence, buttons sweep their dots on press. People who turn motion off see everything still.
08 · Voice
DoFind best moments · 10 credits
Don'tUnlock AI magic now!
DoCouldn't load that video. Try uploading it.
Don'tError 500: fetch failed
DoOne video. Every moment.
Don'tTHE ULTIMATE CLIP TOOL
Short sentences, sentence case, say the price before the click, explain errors with what to do next.
09 · Imagery
- Fictional people only, never real or recognisable faces.
- No logos, brand names or readable text in thumbnails.
- Vertical 9:16, natural light, real-camera feel, dark or neutral backgrounds.
- Scores and labels are added by the interface, never baked into images.