Studio

Every component of the studio system in its states, light and dark. Built for creative tools and media review; the examples come from Cutroom, the review product in the blocks.

Foundations

Black, white and a neutral ramp. One red-orange for selection and the primary action. Status colors only beside a word.

Type

--type-titleOverview
--type-stat8,424
--type-headingPlays per day
--type-bodyGrade on the pour shot is still a touch warm next to v3.
--type-labelHalden_Spring_30s_v4.mov
--type-smallTheo Brandt · 2h ago
--type-mono00:00:12:08

Color

Page--bg
Surface 2--surface-2
Hover--hover
Line--line
Line strong--line-strong
Text 3--text-3
Text 2--text-2
Text--text
Accent--accent
Accent subtle--accent-subtle
OK--ok
Warn--warn
Bad--bad
Info--info
Tile 1--tile-1
Tile 2--tile-2
Tile 3--tile-3
Tile 4--tile-4

Radius and depth

Chip, 6px--r-sm
Control, card, tile, 8px--r-md
Dialog, 12px--r-xl, float shadow

Buttons

One filled primary per view. Upload and Approve are never both filled. Icons are mini solid 16px inside buttons.

Secondary

Default
Hover
Focus
Disabled
Loading

Primary

Default
Hover
Focus
Disabled
Loading

Ghost

Default
Hover
Focus
Disabled
Loading

Delete

Default
Hover
Focus
Disabled
Loading

Sizes and icons

Small
Default
Large
Icon
Icon, ghost

Fields

Labels above, sentence case, help below. Errors say what to type, in red text beside a red border.

Text input.ui-field .ui-input

Default
Hover
Focus
Error
Disabled
With prefix

Select and combobox.ui-select · .ui-combobox

Select
Select, focus
Combobox

Textarea

Textarea

Choices

Checked and on are the accent, because they are selections. Switches act at once; checkboxes wait for Save.

Checkbox.ui-choice

Unchecked
Checked
Focus
Disabled

Radio group.ui-radio-group

Who can comment

Switch.ui-switch

Off
On
Focus
Disabled

Slider.ui-slider

Default
Disabled

Selection

Segmented for views, chips for filters, tabs for panels at one level, steps for a sequence.

Segmented control.ui-segmented

Selected, default, disabled

Chips.ui-chip

Default
Hover
Selected
Focus
Disabled

Tabs.ui-tabs

Four open comments on v4.

Steps.ui-steps

Horizontal: done, current, next
  1. Workspace
  2. Your role
  3. First project
  4. Invite reviewers
Vertical, with dates
  1. Picture lockOct 24
  2. Client reviewv4 due Oct 31
  3. Broadcast masterNov 4

Feedback

Alerts carry an icon, one sentence and at most one action. Status is a word with a mark, never color alone.

Alert.ui-alert

v4 replaces v3 on the Halden review link. Clients see it from now.

View link

Proxies for 6 uploads are ready to review.

Your Visa ending 6411 expires in December.

Update it before the November 14 renewal.

Upload of Halden_Spring_30s_v5.mov failed at 62%. The connection dropped.

Status and badge.ui-status

okApproved
infoIn review
warnChanges requested
badOverdue
idleNot started
BadgeProRes 422 HQ
Badge, accentNew

Progress, meter, skeletonprogress.ui-progress · meter.ui-meter

62%
62%2.6 of 4.2 GB · about 1 minute left
Waiting
BuildingIndeterminate until the transcoder reports
1.82 of 3 TB
1.82 TBUnder the limit
14 of 15
14 seatsNear the limit
50 of 50
50 linksAt the limit

ToastSeenryUI.toast()

v4 approved

Halden Coffee can now download the original.

Empty state and drop zone.ui-empty · .ui-dropzone

No saved views yet

Save a filter to come back to these assets.

No footage yet

Drop cuts, stills or audio here.

Data

Figures in tabular numerals, the stat face for the number that matters, hairlines instead of boxes inside boxes.

Stat strip.ui-stat-strip

Awaiting your review
18
4 due this week
Open comments
146
Across 6 projects
Approved this week
23
Up from 15

Chart.ui-chart

Plays per day

Review links and share pages, Sep 29 to Oct 28

8,42418% more than the 30 days before
Sep 29: 212 playsSep 30: 236 playsOct 1: 248 playsOct 2: 231 playsOct 3: 262 playsOct 4: 98 playsOct 5: 84 playsOct 6: 244 playsOct 7: 271 playsOct 8: 289 playsOct 9: 266 playsOct 10: 301 playsOct 11: 112 playsOct 12: 96 playsOct 13: 318 playsOct 14: 352 playsOct 15: 486 playsOct 16: 532 playsOct 17: 441 playsOct 18: 168 playsOct 19: 142 playsOct 20: 356 playsOct 21: 372 playsOct 22: 394 playsOct 23: 381 playsOct 24: 402 playsOct 25: 151 playsOct 26: 137 playsOct 27: 409 playsOct 28: 433 plays
PlaysToday, 433

Table.ui-table-wrap

ProjectClientAssetsStatus
Halden spring spotHalden Coffee Roasters24In review
Ridgeline launch filmVessel Outdoor18Changes requested
Studio portraitsOstra Ceramics112Approved

List.ui-list

Plain
  • Halden_Spring_30s_v4.movv4 · 6 new comments
  • Ines DuarteHalden Coffee, brand lead
    Changes requested
Selectable: default, hover, selected
  • Ridgeline_Cutdown_15s_v3.mp4v3 · 0:15
  • LowTide_Chorus_Grade_v2.movv2 · 3:48
  • Halden_Spring_30s_v4.movv4 · 0:30

Data list.ui-data-list

Duration
00:00:30:00
Frame rate
23.976 fps
Codec
Apple ProRes 422 HQ
Resolution
3840 × 2160
Size
4.21 GB
Color
Rec. 709

Timeline.ui-timeline

  1. Maya Okafor commented at 0:27

    Legal line needs the 2026 date before broadcast.

  2. Ines Duarte requested changes on v4

  3. Daniel Roy approved the v3 audio mix

Media

The work is the loudest thing on screen: real aspect ratios, flat grey placeholder art, timecode in mono on a scrim.

Thumbnails.ui-thumb

16:9 video0:30
Square still
4:5 portrait41 stills
Audio waveform1:12

Tiles.ui-tiles

0:30Halden_Spring_30s_v4.movDefault3:48LowTide_Chorus_Grade_v2.movHover0:15Ridgeline_Cutdown_15s_v3.mp4Focus

Player and comments.ui-player · .ui-comment

0:30
00:00:12:0800:00:30:00
Ines DuarteHalden Coffee · 1h ago

0:04 Can the logo hold for another half second before the cut to the pour?

Theo BrandtEditor · 52m ago

0:11 Pulling the pour grade back in the next export.

Overlays

Only floating layers get a shadow. Tooltips and toasts invert, the way creative tools float messages over a canvas.

Menu, tooltip, dialog, sheet, command.ui-menu · .ui-dialog · .ui-sheet · .ui-command

Menu
Tooltip, invertedDownload the original, 4.21 GBCommand menu
↑ ↓ to move · Enter to select
Dialog
Open them live
Command menu: ⌘K

Share Spring 30s v4

Version details

Version
v4 of 4
Uploaded
Theo Brandt, Oct 28
Size
4.21 GB
↑ ↓ to move · Enter to select

Content

Cards hold a group, not a page. Code sits in mono on the second surface with a copy action.

Card, accordion, avatar.ui-card · .ui-accordion · .ui-avatar

Halden spring spot

Halden Coffee Roasters · 24 assets · due Nov 4

Review inbox

18 versions wait for you. Open the oldest first.

Who can see a review link?
Anyone with the link and password. Guests never see other projects.
What happens to comments on old versions?
They stay on that version and appear dimmed in the compare view.
AvatarMO
SmallTB
LargeSP
Group

Code.ui-code

Inline: set data-status="warn" on the row.

Embed a review player
<iframe src="https://cutroom.app/r/hld-30s-v4"
  title="Spring 30s v4" allow="fullscreen"></iframe>

Sign in

Providers first, then email. One error message for email and password together, so accounts are not enumerated.

Auth frame, error state.ui-auth

Cutroom

Welcome back

or with email

By continuing you agree to the Terms.