UI Lingo
Shortlist 0

Adobe Spectrum

Also called: Spectrum (classic), Spectrum 1, Creative Cloud UI

The classic Creative Cloud workspace: dark charcoal panels, compact 32px controls, 4px corners, outlined pill buttons, blue focus and a canvas you work on.

“Pro tool dark”Platform Design SystemsEra: 2017 → 2023 (Creative Cloud desktop apps)SeriousTechyCalm
Prompt builder
Open full screen ↗
adobe-spectrum / landingEN
adobe-spectrum / landingTH

Design keywords

Say these words to ask for this style.

dark charcoal workspacecompact 32px controlsoutlined pill buttons4px panel cornersuppercase panel headersstatus-light dotstransparency checkerboardblue focus ring

Classic Spectrum is the interface of a professional creative tool. Neutral greys from #1D1D1D to #323232 frame the work so colour judgement is never polluted; panels have small uppercase headers, controls are compact (32px) with 4px corners, buttons are fully rounded with 2px outlines, and blue appears only for the call to action, selection and keyboard focus. Status is a tiny coloured dot beside text, big numbers are set light, and artwork sits on a transparency checkerboard with dashed selection marquees.

Best for

  • Creative and media editing tools (photo, video, audio, 3D)
  • Pro desktop or web apps with many panels and inspectors
  • Asset managers and review/approval tools for designers
  • Dense settings and property inspectors

Avoid for

  • Consumer marketing sites that need warmth
  • First-time or casual users who need big friendly targets
  • Brands built on vivid colour

✓ Do

  • Keep the chrome neutral grey (#1D1D1D canvas, #323232 panels) so the artwork owns the colour
  • Use 32px controls, 4px corners and 11px uppercase bold panel headers
  • Reserve blue #1473E6 for the call to action, selection and the 2px focus ring
  • Headings 700, big numbers 300 — nothing heavier than 700

✕ Don't

  • Don’t tint the UI greys with brand colour
  • Don’t use large radii or filled grey secondary buttons — classic Spectrum outlines them
  • Don’t use heavy display type; big numbers are set light (300)

Not to be confused with

Spectrum 2 →Spectrum 2 is light by default with 8–16px corners, filled grey buttons, heavy 800 headlines and pastel colour; classic Spectrum is a dark compact workspace with outlined pills and light numbers.Dark Mode (OLED) →OLED dark mode is pure #000 with glowing accents; Spectrum uses layered mid-greys (#1D1D1D–#323232) and almost no glow.Linear-style Dark SaaS →Linear-style dark SaaS adds indigo glows, gradient borders and marketing polish; Spectrum is a utilitarian pro-tool shell with panel headers and outlined buttons.

On mobile

Treat the phone as a companion to the desktop tool: dark charcoal screens, compact list rows with plain grey icons and status-light dots, a #323232 bottom bar with a white active item, and outlined pill buttons. Keep the checkerboard only behind artwork previews.

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

✓ Audited by agent review (2×)
Copied!