Adobe· Designadobe.com

Design

Adobe

Adobe Spectrum — clean utility design system anchored by Adobe Clean typeface, a precise neutral gray scale, Adobe Red for alerts, accent blue for interactive elements, and measured 8px-base spacing with medium rounding.

Color Palette38 tokens

background#ffffff

surface#f8f8f8

surface-elevated#ffffff

surface-pasteboard#e9e9e9

ink#131313

ink-body#292929

ink-secondary#505050

ink-tertiary#717171

on-primary#ffffff

on-dark#ffffff

adobe-red#eb1000

primary#3b63fb

primary-hover#274dea

primary-container#e5f0fe

on-primary-container#3b63fb

error#d73220

error-hover#b72818

error-subtle#ffebe8

success#05834e

warning#fc7d00

info#3b63fb

gray-50#f8f8f8

gray-75#f3f3f3

gray-100#e9e9e9

gray-200#e1e1e1

gray-300#dadada

gray-400#c6c6c6

gray-500#8f8f8f

gray-600#717171

gray-700#505050

gray-800#292929

gray-900#131313

border#dadada

border-strong#c6c6c6

focus-ring#4b75ff

disabled-bg#e9e9e9

disabled-text#c6c6c6

shadow-soft#000000

Buttons

TypographyGoogle Font

Source Sans 3brand uses Adobe Clean

display-hero

The quick brown fox

60px · 700 · -0.5px

display

The quick brown fox

45px · 700 · -0.3px

heading-xl

The quick brown fox

36px · 700 · 0px

heading-section

The quick brown fox

28px · 700 · 0px

heading-sub

The quick brown fox

22px · 700 · 0px

IconsLucide

Set: Lucide · brand-matched

Formfocus ring

you@company.com

Password

••••••••

Card · Shapes

Adobe

Adobe Spectrum — clean utility design system anchored by Adobe Clean typeface, a precise neutral gray scale, Adobe Red f…

Design

none

Elevation

RING

CARD

ELEVATED

Controls

Off

✓Checked

Unchecked

Selected

Option

Alerts

Heads up — a new version of the design system is available.

Saved. Your changes are live across all surfaces.

Some tokens are missing a contrast-safe pairing.

Couldn’t reach the server. Retry in a moment.

Badges

SolidSoftOutlineNewv2.0

FAQ

Adobe

Adobe Spectrum — clean utility design system anchored by Adobe Clean typeface, a precise neutral gray scale, Adobe Red for alerts, accent blue for interactive elements, a…

How does it integrate with my stack?

Is there a free tier?

Tabs

OverviewActivitySettings

DayWeekMonth

Stats

48.2k

Active users

+12.4%

$12.8k

MRR

+3.1%

99.9%

Uptime

−0.02%

Table

Member	Plan	Status
AQAvery Quinn	Pro	Active
JLJordan Lee	Team	Pending
SRSam Rivera	Free	Active

Avatars

AQJLSR+5

Avery Quinn

Online · Owner

Slider · Progress

Volume62%

Storage used78%

Tooltip · Popover

Brand-styled tooltipHover target

Navigation bar

Banner

Pricing

Pro

$24 /mo

Unlimited projects
Priority support
Custom domains

Stepper

CartDetails3Payment4Review

Breadcrumb

HomeDesignAdobe

Toast

Changes savedUndo

You have 3 new updates

Activity

Avery created a new project

2h ago

Jordan left a comment

5h ago

Sam shipped v2.0

1d ago

Notifications

AQAvery Quinn invited you to Adobe.

2 minutes ago

JLJordan Lee approved your design tokens.

1 hour ago

SRSam Rivera mentioned you in a thread.

Yesterday

Code

theme.ts

// Adobe tokens
export const theme = {
  primary: "#3b63fb",
  radius: "8px",
}

Calendar

March 2026

SMTWTFS28291234567891011121314151617181920212223242526272829303112

No resultsTry adjusting your filters or search for something else.

Pagination

‹123…12›

Brand moment

Adobe's design system, Spectrum, is the quiet infrastructure of one of the world's largest creative software ecosystems. Unlike the expressive, idiosyncratic systems of consumer br…

Adobe · Design

Similar systems

Generated from shared tags, visual DNA, category, color, type, and radius.

Filter by this ↗

Dribbble81%

shared styles: Minimal, Light, Cool · same category: Design

Studio Herrström80%

shared styles: Minimal, Light, Bold · same category: Design

Readymag79%

shared styles: Minimal, Light, Bold · same category: Design

Juan Mora77%

shared styles: Minimal, Bold · same category: Design

Salesforce77%

shared styles: Minimal, Light, Cool · visual DNA: Light, Cool, High contrast

LottieFiles75%

shared styles: Minimal, Cool · same category: Design