# Adobe Spectrum (Adobe Spectrum)

> 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.

- IndexStyle No.544 — https://indexstyle.org/styles/adobe-spectrum
- Kind: Style · Family: Platform Screen Languages · Era: 2013–
- Mood: Technique, Trust, Calm
- What this family collects: Design languages written down for a platform and published, from the vendors that shipped an operating system to the governments that had no reason to hide rules paid for with public money, every one of them recognisable at a glance.

## Defining characteristics

- 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

## Composition recipe

- Typography & lettering: Use a sans that survives small labels; optimize for identifying actions, not dramatic headings.
- Layout & structure: Keep the canvas central and tools at the edges; change every element through the same density scale.
- Material & texture: Build with steps of neutral color and assign vivid color only to selection, focus and warning.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #F8F8F8
- The colour it is remembered by: #1473E6
- Text and outlines: #323232

## What to avoid

A dark panel does not make a creative tool. Mixed density scales blur the line between an action and a readout.

## Application checklist

Work through this before calling a piece an application of this style.

- [ ] Visible in the piece: Neutral surfaces with vivid color reserved for selection
- [ ] Visible in the piece: Icons, type and borders scaling together
- [ ] Visible in the piece: Toolbars and property panels joined by fine divisions
- [ ] Visible in the piece: The creative work stays stronger than the interface
- [ ] The layout follows: Keep the canvas central and tools at the edges; change every element through the same density scale.
- [ ] The lettering follows: Use a sans that survives small labels; optimize for identifying actions, not dramatic headings.
- [ ] The material and surface follow: Build with steps of neutral color and assign vivid color only to selection, focus and warning.
- [ ] The colour relation holds: #F8F8F8 as ground, #1473E6 carrying the style, #323232 for text and outlines
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Fluent 2 (フルーエント2)** — Tokenizes color, type, spacing, radius and depth, deploying Solid, Acrylic, Mica and Smoke materials by role across Microsoft products. → https://indexstyle.org/styles/fluent-design
- **GitHub Primer (GitHub Primer)** — GitHub's design system for turning dense development workflows into shared rules for color, type, icons, spacing and components. It favors flow over decoration, keeping many states and actions in a small area without giving up accessibility or responsive behavior. → https://indexstyle.org/styles/github-primer

## Compose it with something else

The dictionary can put this entry in a structural role and another in an accent role, and report where the two fight: https://indexstyle.org/compose?ids=adobe-spectrum+fluent-design

## Further study

- Rational, Human and Focused
- Desktop and mobile scales
- Spectrum 2 color and icon revisions

## Reference works

- Adobe Spectrum — Principles — https://spectrum.adobe.com/page/principles/

## Source of record

- Adobe Spectrum — Principles — https://spectrum.adobe.com/page/principles/

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/adobe-spectrum
- Image-generation prompt (legally clean): https://indexstyle.org/styles/adobe-spectrum/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compare_styles, compose_styles, find_related_styles; prompts: image-prompt, apply-style)