Spectrum 2
Also called: Adobe Spectrum 2, S2
Adobe’s friendlier system: light canvas, rounder 8–24px corners, filled pill buttons, heavy 800 headlines and confident pastel-plus-saturated colour.
Design keywords
Say these words to ask for this style.
Spectrum 2 takes the professional Spectrum foundation and makes it approachable for a much wider audience. The default is light, corners grow (8px fields, 16px cards, 24px feature blocks), buttons become filled pills — primary blue #3B63FB for the main action, near-black #292929 secondary and soft grey #E9E9E9 for tertiary actions — and headlines go heavy and large. Colour is more expressive: fuchsia, indigo, seafoam and orange tints fill feature cards and icon tiles, and a fuchsia-to-blue gradient marks the hero moments, while the interface chrome stays clean white and grey.
Best for
- Creative apps aimed at beginners and casual makers
- Template, social-content and quick-design tools
- Education and learning platforms for creatives
- Marketing sites for creative SaaS
Avoid for
- Dense pro tools that need maximum canvas space
- Serious finance or legal products
- Brands that need strict monochrome restraint
✓ Do
- Use filled pills: primary blue #3B63FB for the main action, near-black #292929 secondary, grey #E9E9E9 for tertiary
- Give feature cards 16–24px corners and a pastel tint with a saturated icon tile
- Set headlines heavy (800) and large; keep body at a comfortable 16px
✕ Don't
- Don’t default to dark charcoal panels or outlined buttons — that is classic Spectrum
- Don’t use the gradient on more than one or two hero elements per view
- Don’t mix more than four tint families on one screen (the gradient is not a tint family)
Not to be confused with
On mobile
Spectrum 2 is mobile-friendly by design: 44–48px filled pill buttons, 16px cards, pastel icon tiles in lists, a gradient featured card and a floating white pill tab bar whose active item is a near-black circle. Keep body text at 16px and corners consistent.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.