Creative workbench system

Neutral chrome, expressive content.

A production interface for creative tools, asset libraries, and document workflows. The shell stays quiet; thumbnails, canvases, controls, focus states, and status feedback do the work.

Review controls Inspect tokens
V
T
S
M
E
Design Prototype Export
Synced
Document / Campaign

Create with control.

Preview, adjust, export.
Zoom 92%Reduced motion ready

Color Palette

Neutral application layers protect the user's content. Indigo marks active modes, focus, and primary actions; semantic colors are reserved for workflow status.

primary #5e5ce6
Action, focus, selected mode.
canvas #f8f8f8
Workbench background.
surface-inset #e9e9e9
Preview wells and trays.
success #268e6c
Synced and completed states.

Typography

display-xl / 46 / 700 / 1.08
Precise tools, calm labels.

Use compact 12-14px text for controls, values, and metadata. Reserve large type for system specimens, not dense workbench screens.

Components

Primary action

Export

Only for finalizing actions.

Inspector field

Radius: 12px

Value visible, focus obvious.

Status light

Synced

Color paired with text.

Tool states

SelectMask

Selected state persists without hover.

Responsive Behavior

Desktop

Tool rail, library panel, central canvas, and inspector all visible.

Tablet

Hide secondary library behind tabs before shrinking the canvas.

Mobile

Move tools to a bottom rail and expose the inspector as a sheet.

Accessibility

Support high contrast, reduced motion, touch scaling, and localization.