Adobe Spectrum
Adobe Spectrum / 2013– / Style / Platform Screen Languages
Adobe's cross-application design system. Under the principles Rational, Human and Focused, it changes density between desktop and mobile while keeping tool-heavy interfaces from pulling attention away from the work itself.
At a glance
Visual cues
- Neutral surfaces with vivid color reserved for selection
- Icons, type and borders scaling together
- Toolbars and property panels joined by fine divisions
- The creative work stays stronger than the interface
Best used for
- Creative tools for image, video or documents where controls should recede
- Moving one product between desktop and mobile with a systematic density change
Use this style
Take the compact brief into a project or hand the structured version to an AI tool.
Detailed guidance and sourcesProduction rules, reference works, comparisons, research and citation formats
Dictionary entry
- Type
- Use a sans that survives small labels; optimize for identifying actions, not dramatic headings.
- Composition
- Keep the canvas central and tools at the edges; change every element through the same density scale.
- Material
- Build with steps of neutral color and assign vivid color only to selection, focus and warning.
- Caution
- A dark panel does not make a creative tool. Mixed density scales blur the line between an action and a readout.
- Further study
- Rational, Human and Focused / Desktop and mobile scales / Spectrum 2 color and icon revisions
Related entries
- Fluent 2 (フルーエント2)Shared effects: Trust / Technique / Calm.Compare Adobe Spectrum and Fluent 2
- GitHub Primer (GitHub Primer)Same Platform Screen Languages lineage.Compare Adobe Spectrum and GitHub Primer
More from Platform Screen Languages
Continue through styles in the same Platform Screen Languages family, prioritised by shared effects.
- Adwaita (アドワイタ)Shared effects: Technique / Calm / Trust.
- GOV.UK Design System (GOV.UK デザインシステム)Shared effects: Trust / Calm / Technique.
- Breeze (ブリーズ)Shared effects: Technique / Calm / Trust.
Browse all Platform Screen Languages entries
Cite this entry
The dictionary is meant to be linked to. Take whichever form fits where you are writing.
- Link
- https://indexstyle.org/styles/adobe-spectrum
- Markdown
- [Adobe Spectrum — IndexStyle](https://indexstyle.org/styles/adobe-spectrum)
- HTML
- <a href="https://indexstyle.org/styles/adobe-spectrum">Adobe Spectrum — IndexStyle</a>