---
version: alpha
name: Spectrum Creative Workbench Interface
description: "A creative-production workbench interface inspired by Adobe Spectrum, Spectrum 2, React Spectrum, and Spectrum Web Components. It uses adaptive neutral layers, quiet gray controls, a restrained indigo action accent, asset thumbnails, side panels, sliders, toolbars, status feedback, accessible focus, dark/light parity, touch-aware scaling, and reduced-motion-safe transitions for editors, media managers, design tools, asset libraries, and content operations products."

colors:
  primary: "#5e5ce6"
  primary-hover: "#4644c8"
  on-primary: "#ffffff"
  canvas: "#f8f8f8"
  surface: "#ffffff"
  surface-card: "#ffffff"
  surface-soft: "#f1f1f1"
  surface-inset: "#e9e9e9"
  surface-selected: "#ecebff"
  ink: "#222222"
  body: "#464646"
  muted: "#6e6e6e"
  subtle: "#8a8a8a"
  hairline: "#d6d6d6"
  hairline-strong: "#b8b8b8"
  focus: "#5e5ce6"
  accent-warm: "#f5b400"
  accent-cool: "#00a9f4"
  success: "#268e6c"
  success-surface: "#e6f6f0"
  warning: "#a85d00"
  warning-surface: "#fff5df"
  danger: "#d7373f"
  danger-surface: "#fff0f1"
  inverse-canvas: "#151515"
  inverse-surface: "#1f1f1f"
  inverse-card: "#252525"
  inverse-ink: "#f5f5f5"
  inverse-body: "#d1d1d1"
  inverse-hairline: "#3a3a3a"

typography:
  display-xl:
    fontFamily: "Adobe Clean, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 46px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: 0
  heading-lg:
    fontFamily: "Adobe Clean, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.18
    letterSpacing: 0
  heading-md:
    fontFamily: "Adobe Clean, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0
  body:
    fontFamily: "Adobe Clean, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "Adobe Clean, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0
  detail:
    fontFamily: "Adobe Clean, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.35
    letterSpacing: 0
  code:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: 0px
  xs: 3px
  sm: 5px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

spacing:
  base: 8px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  xxl: 32px
  section: 72px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 8px 18px
  action-button:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 7px 10px
    borderColor: "{colors.hairline}"
  panel:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.body}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 18px
    borderColor: "{colors.hairline}"
  asset-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.body}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: 10px
    borderColor: "{colors.hairline}"
  field:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 10px
    borderColor: "{colors.hairline-strong}"
  status:
    backgroundColor: "{colors.success-surface}"
    textColor: "{colors.success}"
    typography: "{typography.detail}"
    rounded: "{rounded.pill}"
    padding: 3px 8px

layout:
  shell: "Creative app layout with top command rail, left tool navigation, central asset or canvas area, right inspector panel, contextual action bar, and non-blocking status feedback."
  grid: "Use a flexible workbench: 64px tool rail, 240px library or layer panel, fluid center canvas, and 280-340px inspector on wide screens. Collapse to top tabs and bottom toolbars on mobile."
  density: "Medium density with breathable panels. Controls can be compact, but target size, focus ring, labels, slider values, and destructive actions stay visible."
  interaction: "Use visible hover/focus/pressed/selected states, reduced-motion fallbacks, keyboard navigation, touch-friendly scaling, localized text expansion, high contrast support, and adaptive light/dark tokens."

guidance:
  do:
    - "Show a creative work object first: document, asset grid, layer stack, timeline, export queue, or editing controls."
    - "Use neutral surfaces for chrome and let content thumbnails carry color."
    - "Expose sliders, pickers, status lights, toolbars, side navigation, and inspector details as visible product mechanics."
    - "Provide accessible focus, reduced motion, high contrast, touch scaling, and locale-ready text behavior."
    - "Keep action accent limited to selected controls, primary action, focus, and active modes."
  dont:
    - "Do not copy Adobe product chrome, Creative Cloud branding, application icons, or proprietary product layouts."
    - "Do not use saturated rainbow gradients as a shortcut for creativity."
    - "Do not hide essential tool state inside hover-only affordances."
    - "Do not treat the system as a marketing page when the brief asks for an editor or workbench."

caseStudy:
  source: "Adobe Spectrum, Spectrum 2, React Spectrum, and Spectrum Web Components"
  urls:
    - "https://spectrum.adobe.com/"
    - "https://s2.spectrum.adobe.com/"
    - "https://react-spectrum.adobe.com/index.html"
    - "https://opensource.adobe.com/spectrum-web-components/"
    - "https://github.com/adobe/spectrum-web-components"
  analysis: "Spectrum presents components and tools for cohesive Adobe product experiences. React Spectrum emphasizes accessible, flexible, maintainable apps with dark mode, touch support, internationalization, reduced motion, high contrast, adaptive font sizes, icons, illustrations, responsive breakpoints, and token-driven styling. Spectrum Web Components implement Spectrum as standards-based, framework-agnostic web components under Apache 2.0. The reusable lesson is a content-first workbench: neutral chrome, adaptive layers, explicit control states, and inclusive interaction behavior support creative production without copying Adobe brand assets."
---

# Spectrum Creative Workbench Interface

Use this system for creative editors, design tools, media managers, content operations dashboards, asset libraries, document workflows, annotation products, export queues, and cross-platform creator tools where users need to inspect visual material and adjust properties precisely.

The posture is polished, quiet, adaptive, and tool-like. The interface should feel capable before it feels expressive. Let the user's content supply color and emotion; the product shell supplies structure, accessibility, and predictable control behavior.

## Overview

Spectrum Creative Workbench abstracts the durable system traits of Adobe Spectrum and React Spectrum into an Interface resource. It is not a replica of Photoshop, Illustrator, Acrobat, Creative Cloud, or any Adobe product. It captures the reusable design logic: neutral adaptive surfaces, carefully bounded accents, panels, toolbars, asset thumbnails, sliders, pickers, status lights, accessible focus, light/dark parity, and responsive interaction modes.

Use it when users manipulate documents, assets, images, timelines, templates, or export settings. Avoid it for sales pages, brand campaigns, or dashboards where no creative object is present.

## Colors

### Brand & Accent

Use `primary` #5e5ce6 as the action and focus accent. It is allowed for selected tools, primary actions, active tabs, focus-visible rings, and current mode. It is not a decorative background wash.

### Surface

Use `canvas` #f8f8f8 for the workbench background, `surface-card` #ffffff for panels and cards, `surface-soft` #f1f1f1 for quiet controls, and `surface-inset` #e9e9e9 for nested wells, thumbnail trays, and preview backplates. Workbench chrome should be calm enough for user media to remain dominant.

### Text

Use `ink` #222222 for titles and active labels, `body` #464646 for readable UI copy, `muted` #6e6e6e for secondary details, and `subtle` #8a8a8a for timestamps, file metadata, and disabled context. Keep small control labels legible.

### Hairlines & Borders

Use `hairline` #d6d6d6 for normal panel boundaries and dividers. Use `hairline-strong` #b8b8b8 for inputs, active splitters, and selected asset outlines. Depth should feel like stacked application layers, not floating marketing cards.

### Semantic

Use success, warning, and danger only for real workflow state: synced, queued, needs review, export failed, destructive change, or missing permission. Pair every semantic color with a label and recovery path.

## Typography

### Font Family

Use Adobe Clean only when legally available in the project. Otherwise use Inter or system UI. The design logic depends on clear metrics, not on ownership of an Adobe font.

### Hierarchy

Most workbench content should live at 12-14px. Use 20px for panel or section titles, 30px for compact page headings, and 46px only for overview/specimen previews. Tool UIs should not waste space on oversized hero type.

### Principles

Use short labels, visible values, and sentence case. Pair sliders and numeric controls with current values. Use code typography only for file extensions, automation IDs, variables, scripts, or export presets.

### Note on Font Substitutes

If Adobe Clean is unavailable, Inter, Arial, or the platform system font can preserve the compact neutral tone. Keep letter spacing at 0 and avoid decorative type.

## Layout

### Spacing System

Use an 8px base with 4px for micro gaps, 8px for control interiors, 12px for grouped controls, 16px for panel padding, 24px for section separation, and 72px for specimen sections.

### Grid & Container

Workbench layouts should privilege the object under work. A common desktop shell is 64px tool rail + 240px library/layers panel + fluid canvas + 280-340px inspector. Keep the central canvas or asset grid dominant.

### Whitespace Philosophy

Whitespace is functional. It separates tool groups, protects content thumbnails, and makes selected states readable. Do not create empty editorial space that displaces controls in a production tool.

## Elevation & Depth

Use low shadows and clear layer boundaries. Panels, popovers, trays, and overlays should read as application layers. Use borders first, then restrained shadow for popovers and menus that overlap content.

## Shapes

Use 5-8px radii for controls and inputs, 12px for cards and panels, and pill radii for compact status labels or primary rounded buttons. Keep icon buttons square or circular depending on local density, but maintain stable touch targets.

## Components

### Buttons

Primary buttons are pill-shaped and reserved for finalizing actions such as Export, Apply, Save, or Share. Action buttons handle tools, menus, and inspector commands. Every icon-only button needs a visible selected state and accessible label.

### Cards & Containers

Asset cards use thumbnails, metadata, status, and selection outlines. Panels contain controls in clear groups. Avoid nested decorative cards; inspectors should feel like structured controls.

### Inputs & Forms

Fields use soft neutral backgrounds and strong focus rings. Sliders must expose values. Search should support assets, document names, tags, file types, and commands.

### Navigation

Use a left tool rail for modes, side navigation for libraries/layers, tabs for property groups, and top command bars for document-level actions. Navigation state must be visible without relying on hover.

### Signature Components

The signature module is a workbench triad: asset grid or canvas, contextual toolbar, and inspector panel. This makes the system useful for creative workflows rather than generic SaaS.

## Do's and Don'ts

Do show the creative object and its controls in the first viewport. Do let thumbnails and previews carry most of the color. Do support keyboard, touch, high contrast, localization, and reduced motion. Do show selected, focused, disabled, loading, and destructive states.

Do not copy Adobe product icons, Creative Cloud branding, exact application chrome, or proprietary layouts. Do not use decorative rainbow gradients as a creativity substitute. Do not hide tool state in hover-only menus. Do not make a marketing hero when the user asked for a production tool.

## Responsive Behavior

### Breakpoints

At 1200px and wider, use the full four-zone workbench. Around 900px, collapse the secondary side panel behind tabs. Below 720px, move tools to a bottom rail, turn the inspector into a sheet, and keep the object viewport first.

### Touch Targets

Use 40-44px touch targets for mobile controls and keep dense desktop controls at least 32px high. Touch mode may increase spacing without changing the information hierarchy.

### Collapsing Strategy

Collapse secondary panels before the content canvas. Do not hide primary mode switching or destructive-action confirmation.

### Image Behavior

Thumbnails should maintain aspect ratio and use checkerboard or neutral wells for transparent assets. Avoid cropped previews that prevent users from identifying the object.

## Iteration Guide

First define the creative object and editing task. Then choose the shell: asset library, canvas editor, timeline, inspector, or export queue. Map tokens to controls, not decoration. Add visible selected and focus states. Test dark mode, reduced motion, text expansion, keyboard navigation, and touch density before shipping.

## Known Gaps

This resource abstracts public Spectrum, React Spectrum, Spectrum 2, and Spectrum Web Components guidance. It does not include Adobe proprietary app layouts, private brand assets, product icons, or Adobe font licensing. When using real Spectrum code, verify the current package version, Apache 2.0 license obligations, and any product-specific brand restrictions.