← Brands · [email protected]

Adobe

Adobe Inc. is the creator of Photoshop, Illustrator, InDesign, Acrobat, and the Creative / Document / Experience Cloud product families. Adobe Spectrum is the design system that backs Adobe's product surfaces — a tonally-paired, dual-mode token system (light and dark hex pairs for every chromatic stop) anchored on a primary accent blue (#3B63FB on light, #5681FF on dark). The marketing brand is a separate, more saturated red (the wordmark), but product UIs render in Spectrum's calmer accent blue and neutral grays. The proprietary typeface family is Adobe Clean (sans), Adobe Clean Serif, and Source Code Pro for mono; Adobe Clean is not publicly distributed, so this atom references Inter as the open rendering substitute for sans and Source Sans 3 as a closer Source-family fallback, with Source Code Pro for monospace.

1 palette 4 fonts 0 assets 10 rules adobespectrumdesign-systemcreative-clouddocument-clouddual-mode

Preview prompt

Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/adobe/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.

Downloads

All converter outputs for [email protected]. Served from /dist/brands/adobe/1.0.0/.

W3C Design Tokens

3 files

Cross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.

JSON

1 file

Plain JSON mirror of the resolved brand — palette, fonts, roles, rules.

brand.json json/brand.json

CSS variables

1 file

CSS custom properties on :root with prefers-color-scheme dark.

tokens.css css/tokens.css

SCSS

1 file

SCSS variables + Sass maps for swatches, roles, and fonts.

_tokens.scss scss/_tokens.scss

Tailwind config

1 file

Tailwind v3 theme.extend.colors + fontFamily.

tailwind.config.cjs tailwind/tailwind.config.cjs

Figma Tokens

1 file

Figma Tokens plugin JSON (Tokens Studio compatible).

tokens.json figma/tokens.json

Swift

1 file

Swift enums for SwiftUI / UIKit color + font tokens.

BrandTokens.swift swift/BrandTokens.swift

Kotlin / Compose

1 file

Kotlin objects for Jetpack Compose color + typography tokens.

BrandTokens.kt kotlin/BrandTokens.kt

Markdown guide

1 file

Human-readable brand guide. Same source as the on-page Brand Guide.

brand-guide.md markdown/brand-guide.md

Brand Guide

Inline rendering of the Markdown brand guide. Same source as the markdown/brand-guide.md download.

Adobe

[email protected]

Tags: adobe, spectrum, design-system, creative-cloud, document-cloud, dual-mode

Atoms

Palette

Adobe Spectrum · [email protected] · Apache-2.0

Adobe Spectrum's color system — the design system that powers Adobe's product surfaces (Creative Cloud, Document Cloud, Experience Cloud). Spectrum is built on tonally-paired neutral and chromatic scales (gray, blue, red, orange, yellow, chartreuse, celery, green, seafoam, cyan, indigo, purple, fuchsia, magenta, pink, brown, silver, cinnamon, turquoise), each running 100 → 1600 with a light-mode hex and a dark-mode counterpart. The brand accent on product surfaces is Spectrum Blue 900 (#3B63FB light / #5681FF dark) — the same swatch that backs the accent-background-color-default token. Semantic role tokens (positive, negative, notice, informative) map onto the same scales: positive=green-900, negative=red-900, notice=orange-900, informative=blue-900.

Fonts

Role	Font	License	Classification
`heading`	Inter `([email protected])`	OFL-1.1	sans-serif
`body`	Inter `([email protected])`	OFL-1.1	sans-serif
`serif`	Source Sans 3 `([email protected])`	OFL-1.1	sans-serif
`mono`	Source Code Pro `([email protected])`	OFL-1.1	monospace

Swatches

ID	Name	Value
`gray-25`	Gray 25	`#FFFFFF`
`gray-50`	Gray 50	`#F8F8F8`
`gray-75`	Gray 75	`#F3F3F3`
`gray-100`	Gray 100	`#E9E9E9`
`gray-200`	Gray 200	`#E1E1E1`
`gray-300`	Gray 300	`#DADADA`
`gray-400`	Gray 400	`#C6C6C6`
`gray-500`	Gray 500	`#8F8F8F`
`gray-600`	Gray 600	`#717171`
`gray-700`	Gray 700	`#505050`
`gray-800`	Gray 800	`#292929`
`gray-900`	Gray 900	`#131313`
`gray-1000`	Gray 1000	`#000000`
`gray-25-dark`	Gray 25 Dark	`#111111`
`gray-50-dark`	Gray 50 Dark	`#1B1B1B`
`gray-75-dark`	Gray 75 Dark	`#222222`
`gray-100-dark`	Gray 100 Dark	`#2C2C2C`
`gray-200-dark`	Gray 200 Dark	`#323232`
`gray-300-dark`	Gray 300 Dark	`#393939`
`gray-400-dark`	Gray 400 Dark	`#444444`
`gray-500-dark`	Gray 500 Dark	`#6D6D6D`
`gray-600-dark`	Gray 600 Dark	`#8A8A8A`
`gray-700-dark`	Gray 700 Dark	`#AFAFAF`
`gray-800-dark`	Gray 800 Dark	`#DBDBDB`
`gray-900-dark`	Gray 900 Dark	`#F2F2F2`
`gray-1000-dark`	Gray 1000 Dark	`#FFFFFF`
`blue-100`	Blue 100	`#F5F9FF`
`blue-200`	Blue 200	`#E5F0FE`
`blue-300`	Blue 300	`#CBE2FE`
`blue-400`	Blue 400	`#ACCFFD`
`blue-500`	Blue 500	`#8EB9FC`
`blue-600`	Blue 600	`#729EFD`
`blue-700`	Blue 700	`#5D89FF`
`blue-800`	Blue 800	`#4B75FF`
`blue-900`	Blue 900	`#3B63FB`
`blue-1000`	Blue 1000	`#274DEA`
`blue-1100`	Blue 1100	`#1D3ECF`
`blue-1200`	Blue 1200	`#1532AD`
`blue-1300`	Blue 1300	`#10288C`
`blue-1400`	Blue 1400	`#0C1F69`
`blue-1500`	Blue 1500	`#0E1843`
`blue-1600`	Blue 1600	`#070B1E`
`blue-100-dark`	Blue 100 Dark	`#0E173F`
`blue-200-dark`	Blue 200 Dark	`#0F1C52`
`blue-300-dark`	Blue 300 Dark	`#0C2175`
`blue-400-dark`	Blue 400 Dark	`#122D9A`
`blue-500-dark`	Blue 500 Dark	`#1A3AC3`
`blue-600-dark`	Blue 600 Dark	`#2549E5`
`blue-700-dark`	Blue 700 Dark	`#345BF8`
`blue-800-dark`	Blue 800 Dark	`#4069FD`
`blue-900-dark`	Blue 900 Dark	`#5681FF`
`blue-1000-dark`	Blue 1000 Dark	`#6995FE`
`blue-1100-dark`	Blue 1100 Dark	`#7CA9FC`
`blue-1200-dark`	Blue 1200 Dark	`#98C0FC`
`blue-1300-dark`	Blue 1300 Dark	`#B5D5FD`
`blue-1400-dark`	Blue 1400 Dark	`#D5E7FE`
`blue-1500-dark`	Blue 1500 Dark	`#EEF5FF`
`blue-1600-dark`	Blue 1600 Dark	`#FFFFFF`
`red-100`	Red 100	`#FFF6F5`
`red-200`	Red 200	`#FFEBE8`
`red-300`	Red 300	`#FFD6D1`
`red-400`	Red 400	`#FFBCB4`
`red-500`	Red 500	`#FF9D91`
`red-600`	Red 600	`#FF7665`
`red-700`	Red 700	`#FF513D`
`red-800`	Red 800	`#F03823`
`red-900`	Red 900	`#D73220`
`red-1000`	Red 1000	`#B72818`
`red-1100`	Red 1100	`#9C2113`
`red-1200`	Red 1200	`#811B0E`
`red-1300`	Red 1300	`#68150A`
`red-1400`	Red 1400	`#501006`
`red-1500`	Red 1500	`#3B0B04`
`red-1600`	Red 1600	`#1D0502`
`red-100-dark`	Red 100 Dark	`#360A03`
`red-200-dark`	Red 200 Dark	`#440D05`
`red-300-dark`	Red 300 Dark	`#571107`
`red-400-dark`	Red 400 Dark	`#73180B`
`red-500-dark`	Red 500 Dark	`#931F11`
`red-600-dark`	Red 600 Dark	`#B12617`
`red-700-dark`	Red 700 Dark	`#CD2E1D`
`red-800-dark`	Red 800 Dark	`#DF3422`
`red-900-dark`	Red 900 Dark	`#FC432E`
`red-1000-dark`	Red 1000 Dark	`#FF6756`
`red-1100-dark`	Red 1100 Dark	`#FF8678`
`red-1200-dark`	Red 1200 Dark	`#FFA79D`
`red-1300-dark`	Red 1300 Dark	`#FFC4BD`
`red-1400-dark`	Red 1400 Dark	`#FFDEDB`
`red-1500-dark`	Red 1500 Dark	`#FFF2F0`
`red-1600-dark`	Red 1600 Dark	`#FFFFFF`
`orange-100`	Orange 100	`#FFF6E7`
`orange-200`	Orange 200	`#FFECCF`
`orange-300`	Orange 300	`#FFDA9E`
`orange-400`	Orange 400	`#FFC15E`
`orange-500`	Orange 500	`#FFA213`
`orange-600`	Orange 600	`#FC7D00`
`orange-700`	Orange 700	`#E86A00`
`orange-800`	Orange 800	`#D45B00`
`orange-900`	Orange 900	`#C24E00`
`orange-1000`	Orange 1000	`#A73E00`
`orange-1100`	Orange 1100	`#903300`
`orange-1200`	Orange 1200	`#762900`
`orange-1300`	Orange 1300	`#5F2000`
`orange-1400`	Orange 1400	`#491800`
`orange-1500`	Orange 1500	`#341200`
`orange-1600`	Orange 1600	`#190800`
`orange-100-dark`	Orange 100 Dark	`#311000`
`orange-200-dark`	Orange 200 Dark	`#3D1500`
`orange-300-dark`	Orange 300 Dark	`#501B00`
`orange-400-dark`	Orange 400 Dark	`#6A2400`
`orange-500-dark`	Orange 500 Dark	`#872F00`
`orange-600-dark`	Orange 600 Dark	`#A23B00`
`orange-700-dark`	Orange 700 Dark	`#B94900`
`orange-800-dark`	Orange 800 Dark	`#C75200`
`orange-900-dark`	Orange 900 Dark	`#E06400`
`orange-1000-dark`	Orange 1000 Dark	`#F37500`
`orange-1100-dark`	Orange 1100 Dark	`#FF8900`
`orange-1200-dark`	Orange 1200 Dark	`#FFAD2D`
`orange-1300-dark`	Orange 1300 Dark	`#FFC974`
`orange-1400-dark`	Orange 1400 Dark	`#FFE1B2`
`orange-1500-dark`	Orange 1500 Dark	`#FFF3E1`
`orange-1600-dark`	Orange 1600 Dark	`#FFFFFF`
`yellow-100`	Yellow 100	`#FFF8CC`
`yellow-200`	Yellow 200	`#FFF197`
`yellow-300`	Yellow 300	`#FFDE2C`
`yellow-400`	Yellow 400	`#F5C700`
`yellow-500`	Yellow 500	`#E6AF00`
`yellow-600`	Yellow 600	`#D29500`
`yellow-700`	Yellow 700	`#C18300`
`yellow-800`	Yellow 800	`#AF7400`
`yellow-900`	Yellow 900	`#9E6600`
`yellow-1000`	Yellow 1000	`#865500`
`yellow-1100`	Yellow 1100	`#724800`
`yellow-1200`	Yellow 1200	`#5D3B00`
`yellow-1300`	Yellow 1300	`#4B2F00`
`yellow-1400`	Yellow 1400	`#382300`
`yellow-1500`	Yellow 1500	`#281900`
`yellow-1600`	Yellow 1600	`#120B00`
`yellow-100-dark`	Yellow 100 Dark	`#251700`
`yellow-200-dark`	Yellow 200 Dark	`#2F1D00`
`yellow-300-dark`	Yellow 300 Dark	`#3D2700`
`yellow-400-dark`	Yellow 400 Dark	`#533400`
`yellow-500-dark`	Yellow 500 Dark	`#6B4300`
`yellow-600-dark`	Yellow 600 Dark	`#825200`
`yellow-700-dark`	Yellow 700 Dark	`#976100`
`yellow-800-dark`	Yellow 800 Dark	`#A46A00`
`yellow-900-dark`	Yellow 900 Dark	`#BA7C00`
`yellow-1000-dark`	Yellow 1000 Dark	`#CB8D00`
`yellow-1100-dark`	Yellow 1100 Dark	`#DA9F00`
`yellow-1200-dark`	Yellow 1200 Dark	`#EBB700`
`yellow-1300-dark`	Yellow 1300 Dark	`#F9CE00`
`yellow-1400-dark`	Yellow 1400 Dark	`#FFE656`
`yellow-1500-dark`	Yellow 1500 Dark	`#FFF6C3`
`yellow-1600-dark`	Yellow 1600 Dark	`#FFFFFF`
`chartreuse-100`	Chartreuse 100	`#F6FBDE`
`chartreuse-200`	Chartreuse 200	`#EAF6AD`
`chartreuse-300`	Chartreuse 300	`#D0EC46`
`chartreuse-400`	Chartreuse 400	`#B6DB00`
`chartreuse-500`	Chartreuse 500	`#A3C400`
`chartreuse-600`	Chartreuse 600	`#8FAC00`
`chartreuse-700`	Chartreuse 700	`#809900`
`chartreuse-800`	Chartreuse 800	`#728900`
`chartreuse-900`	Chartreuse 900	`#667A00`
`chartreuse-1000`	Chartreuse 1000	`#566700`
`chartreuse-1100`	Chartreuse 1100	`#495700`
`chartreuse-1200`	Chartreuse 1200	`#3C4700`
`chartreuse-1300`	Chartreuse 1300	`#2F3900`
`chartreuse-1400`	Chartreuse 1400	`#232B00`
`chartreuse-1500`	Chartreuse 1500	`#191E00`
`chartreuse-1600`	Chartreuse 1600	`#0B0E00`
`chartreuse-100-dark`	Chartreuse 100 Dark	`#171C00`
`chartreuse-200-dark`	Chartreuse 200 Dark	`#1E2400`
`chartreuse-300-dark`	Chartreuse 300 Dark	`#272F00`
`chartreuse-400-dark`	Chartreuse 400 Dark	`#353F00`
`chartreuse-500-dark`	Chartreuse 500 Dark	`#445200`
`chartreuse-600-dark`	Chartreuse 600 Dark	`#536400`
`chartreuse-700-dark`	Chartreuse 700 Dark	`#617400`
`chartreuse-800-dark`	Chartreuse 800 Dark	`#6A7F00`
`chartreuse-900-dark`	Chartreuse 900 Dark	`#7A9300`
`chartreuse-1000-dark`	Chartreuse 1000 Dark	`#88A400`
`chartreuse-1100-dark`	Chartreuse 1100 Dark	`#97B500`
`chartreuse-1200-dark`	Chartreuse 1200 Dark	`#A9CB00`
`chartreuse-1300-dark`	Chartreuse 1300 Dark	`#BBE100`
`chartreuse-1400-dark`	Chartreuse 1400 Dark	`#DBF075`
`chartreuse-1500-dark`	Chartreuse 1500 Dark	`#F2F9CE`
`chartreuse-1600-dark`	Chartreuse 1600 Dark	`#FFFFFF`
`celery-100`	Celery 100	`#EBFFDC`
`celery-200`	Celery 200	`#C5FF9C`
`celery-300`	Celery 300	`#9DF75C`
`celery-400`	Celery 400	`#81E43A`
`celery-500`	Celery 500	`#6ECE2A`
`celery-600`	Celery 600	`#5DB41F`
`celery-700`	Celery 700	`#52A119`
`celery-800`	Celery 800	`#489014`
`celery-900`	Celery 900	`#408111`
`celery-1000`	Celery 1000	`#346D0C`
`celery-1100`	Celery 1100	`#2C5C09`
`celery-1200`	Celery 1200	`#234B06`
`celery-1300`	Celery 1300	`#1B3C03`
`celery-1400`	Celery 1400	`#132E00`
`celery-1500`	Celery 1500	`#0C2100`
`celery-1600`	Celery 1600	`#040F00`
`celery-100-dark`	Celery 100 Dark	`#0B1F00`
`celery-200-dark`	Celery 200 Dark	`#0F2600`
`celery-300-dark`	Celery 300 Dark	`#153301`
`celery-400-dark`	Celery 400 Dark	`#1F4304`
`celery-500-dark`	Celery 500 Dark	`#295608`
`celery-600-dark`	Celery 600 Dark	`#32690B`
`celery-700-dark`	Celery 700 Dark	`#3C7A0F`
`celery-800-dark`	Celery 800 Dark	`#428612`
`celery-900-dark`	Celery 900 Dark	`#4E9A17`
`celery-1000-dark`	Celery 1000 Dark	`#58AC1C`
`celery-1100-dark`	Celery 1100 Dark	`#64BE23`
`celery-1200-dark`	Celery 1200 Dark	`#74D52E`
`celery-1300-dark`	Celery 1300 Dark	`#88EA41`
`celery-1400-dark`	Celery 1400 Dark	`#AAFB70`
`celery-1500-dark`	Celery 1500 Dark	`#DEFFC6`
`celery-1600-dark`	Celery 1600 Dark	`#FFFFFF`
`green-100`	Green 100	`#EDFCF1`
`green-200`	Green 200	`#D7F7E1`
`green-300`	Green 300	`#ADEEC5`
`green-400`	Green 400	`#6BE3A2`
`green-500`	Green 500	`#2BD17D`
`green-600`	Green 600	`#12B867`
`green-700`	Green 700	`#0BA45D`
`green-800`	Green 800	`#079355`
`green-900`	Green 900	`#05834E`
`green-1000`	Green 1000	`#036E45`
`green-1100`	Green 1100	`#025D3C`
`green-1200`	Green 1200	`#014C34`
`green-1300`	Green 1300	`#003D2C`
`green-1400`	Green 1400	`#002E22`
`green-1500`	Green 1500	`#002119`
`green-1600`	Green 1600	`#000F0C`
`green-100-dark`	Green 100 Dark	`#001E17`
`green-200-dark`	Green 200 Dark	`#00261D`
`green-300-dark`	Green 300 Dark	`#003326`
`green-400-dark`	Green 400 Dark	`#004430`
`green-500-dark`	Green 500 Dark	`#02573A`
`green-600-dark`	Green 600 Dark	`#036A43`
`green-700-dark`	Green 700 Dark	`#047C4B`
`green-800-dark`	Green 800 Dark	`#068850`
`green-900-dark`	Green 900 Dark	`#099D59`
`green-1000-dark`	Green 1000 Dark	`#0EAF62`
`green-1100-dark`	Green 1100 Dark	`#18C16E`
`green-1200-dark`	Green 1200 Dark	`#39D786`
`green-1300-dark`	Green 1300 Dark	`#7EE7AC`
`green-1400-dark`	Green 1400 Dark	`#BDF1D0`
`green-1500-dark`	Green 1500 Dark	`#E5FAEC`
`green-1600-dark`	Green 1600 Dark	`#FFFFFF`
`seafoam-100`	Seafoam 100	`#EBFBF6`
`seafoam-200`	Seafoam 200	`#D3F6EA`
`seafoam-300`	Seafoam 300	`#A9EDD8`
`seafoam-400`	Seafoam 400	`#5CE1C2`
`seafoam-500`	Seafoam 500	`#10CFA9`
`seafoam-600`	Seafoam 600	`#0DB595`
`seafoam-700`	Seafoam 700	`#0BA286`
`seafoam-800`	Seafoam 800	`#099078`
`seafoam-900`	Seafoam 900	`#07816D`
`seafoam-1000`	Seafoam 1000	`#056C5C`
`seafoam-1100`	Seafoam 1100	`#035C50`
`seafoam-1200`	Seafoam 1200	`#014B43`
`seafoam-1300`	Seafoam 1300	`#003C36`
`seafoam-1400`	Seafoam 1400	`#002E28`
`seafoam-1500`	Seafoam 1500	`#00211D`
`seafoam-1600`	Seafoam 1600	`#000F0E`
`seafoam-100-dark`	Seafoam 100 Dark	`#001E1B`
`seafoam-200-dark`	Seafoam 200 Dark	`#002723`
`seafoam-300-dark`	Seafoam 300 Dark	`#00322C`
`seafoam-400-dark`	Seafoam 400 Dark	`#00433B`
`seafoam-500-dark`	Seafoam 500 Dark	`#02564B`
`seafoam-600-dark`	Seafoam 600 Dark	`#046959`
`seafoam-700-dark`	Seafoam 700 Dark	`#067A67`
`seafoam-800-dark`	Seafoam 800 Dark	`#088670`
`seafoam-900-dark`	Seafoam 900 Dark	`#0A9A80`
`seafoam-1000-dark`	Seafoam 1000 Dark	`#0CAD8E`
`seafoam-1100-dark`	Seafoam 1100 Dark	`#0EBE9C`
`seafoam-1200-dark`	Seafoam 1200 Dark	`#1DD6B0`
`seafoam-1300-dark`	Seafoam 1300 Dark	`#7AE5CB`
`seafoam-1400-dark`	Seafoam 1400 Dark	`#BAF1DE`
`seafoam-1500-dark`	Seafoam 1500 Dark	`#E5F9F3`
`seafoam-1600-dark`	Seafoam 1600 Dark	`#FFFFFF`
`cyan-100`	Cyan 100	`#EEFAFE`
`cyan-200`	Cyan 200	`#D9F4FD`
`cyan-300`	Cyan 300	`#B7E7FC`
`cyan-400`	Cyan 400	`#8AD5FF`
`cyan-500`	Cyan 500	`#5CC0FF`
`cyan-600`	Cyan 600	`#30A7FE`
`cyan-700`	Cyan 700	`#1D95E7`
`cyan-800`	Cyan 800	`#1286CD`
`cyan-900`	Cyan 900	`#0B78B3`
`cyan-1000`	Cyan 1000	`#046691`
`cyan-1100`	Cyan 1100	`#005779`
`cyan-1200`	Cyan 1200	`#004762`
`cyan-1300`	Cyan 1300	`#00394E`
`cyan-1400`	Cyan 1400	`#002B3B`
`cyan-1500`	Cyan 1500	`#001F2B`
`cyan-1600`	Cyan 1600	`#000E14`
`cyan-100-dark`	Cyan 100 Dark	`#001D27`
`cyan-200-dark`	Cyan 200 Dark	`#002431`
`cyan-300-dark`	Cyan 300 Dark	`#003041`
`cyan-400-dark`	Cyan 400 Dark	`#004058`
`cyan-500-dark`	Cyan 500 Dark	`#005271`
`cyan-600-dark`	Cyan 600 Dark	`#03638C`
`cyan-700-dark`	Cyan 700 Dark	`#0873A8`
`cyan-800-dark`	Cyan 800 Dark	`#0D7DBA`
`cyan-900-dark`	Cyan 900 Dark	`#188EDC`
`cyan-1000-dark`	Cyan 1000 Dark	`#269FF4`
`cyan-1100-dark`	Cyan 1100 Dark	`#3FB1FF`
`cyan-1200-dark`	Cyan 1200 Dark	`#6BC7FF`
`cyan-1300-dark`	Cyan 1300 Dark	`#98DBFF`
`cyan-1400-dark`	Cyan 1400 Dark	`#C3ECFC`
`cyan-1500-dark`	Cyan 1500 Dark	`#E6F8FD`
`cyan-1600-dark`	Cyan 1600 Dark	`#FFFFFF`
`indigo-100`	Indigo 100	`#F7F8FF`
`indigo-200`	Indigo 200	`#EBEEFF`
`indigo-300`	Indigo 300	`#D8DEFF`
`indigo-400`	Indigo 400	`#C0C9FF`
`indigo-500`	Indigo 500	`#A7B2FF`
`indigo-600`	Indigo 600	`#9197FE`
`indigo-700`	Indigo 700	`#8480FE`
`indigo-800`	Indigo 800	`#7A6AFD`
`indigo-900`	Indigo 900	`#7155FA`
`indigo-1000`	Indigo 1000	`#6338EE`
`indigo-1100`	Indigo 1100	`#5424DB`
`indigo-1200`	Indigo 1200	`#4513BF`
`indigo-1300`	Indigo 1300	`#3706A0`
`indigo-1400`	Indigo 1400	`#2A0081`
`indigo-1500`	Indigo 1500	`#1F0062`
`indigo-1600`	Indigo 1600	`#110036`
`indigo-100-dark`	Indigo 100 Dark	`#1E005D`
`indigo-200-dark`	Indigo 200 Dark	`#23006E`
`indigo-300-dark`	Indigo 300 Dark	`#2F008C`
`indigo-400-dark`	Indigo 400 Dark	`#3E0CAE`
`indigo-500-dark`	Indigo 500 Dark	`#4F1ED1`
`indigo-600-dark`	Indigo 600 Dark	`#5F34EB`
`indigo-700-dark`	Indigo 700 Dark	`#6D4BF8`
`indigo-800-dark`	Indigo 800 Dark	`#745BFC`
`indigo-900-dark`	Indigo 900 Dark	`#8077FE`
`indigo-1000-dark`	Indigo 1000 Dark	`#8B8DFE`
`indigo-1100-dark`	Indigo 1100 Dark	`#99A1FF`
`indigo-1200-dark`	Indigo 1200 Dark	`#B0BAFF`
`indigo-1300-dark`	Indigo 1300 Dark	`#C7D0FF`
`indigo-1400-dark`	Indigo 1400 Dark	`#DFE4FF`
`indigo-1500-dark`	Indigo 1500 Dark	`#F3F4FF`
`indigo-1600-dark`	Indigo 1600 Dark	`#FFFFFF`
`purple-100`	Purple 100	`#FBF7FE`
`purple-200`	Purple 200	`#F4EBFC`
`purple-300`	Purple 300	`#EBDAF9`
`purple-400`	Purple 400	`#DDC1F6`
`purple-500`	Purple 500	`#D0A7F3`
`purple-600`	Purple 600	`#BF8AEE`
`purple-700`	Purple 700	`#B272EB`
`purple-800`	Purple 800	`#A65CE7`
`purple-900`	Purple 900	`#9A47E2`
`purple-1000`	Purple 1000	`#8628D9`
`purple-1100`	Purple 1100	`#730DCC`
`purple-1200`	Purple 1200	`#5D00B1`
`purple-1300`	Purple 1300	`#4B0090`
`purple-1400`	Purple 1400	`#3B006F`
`purple-1500`	Purple 1500	`#2C0054`
`purple-1600`	Purple 1600	`#17002D`
`purple-100-dark`	Purple 100 Dark	`#29004F`
`purple-200-dark`	Purple 200 Dark	`#320060`
`purple-300-dark`	Purple 300 Dark	`#40007A`
`purple-400-dark`	Purple 400 Dark	`#53009F`
`purple-500-dark`	Purple 500 Dark	`#6B06C3`
`purple-600-dark`	Purple 600 Dark	`#8222D7`
`purple-700-dark`	Purple 700 Dark	`#943EE0`
`purple-800-dark`	Purple 800 Dark	`#9D4EE4`
`purple-900-dark`	Purple 900 Dark	`#AD69E9`
`purple-1000-dark`	Purple 1000 Dark	`#BA7FED`
`purple-1100-dark`	Purple 1100 Dark	`#C595F0`
`purple-1200-dark`	Purple 1200 Dark	`#D4B0F4`
`purple-1300-dark`	Purple 1300 Dark	`#E1C9F7`
`purple-1400-dark`	Purple 1400 Dark	`#EEE0FA`
`purple-1500-dark`	Purple 1500 Dark	`#F8F3FD`
`purple-1600-dark`	Purple 1600 Dark	`#FFFFFF`
`fuchsia-100`	Fuchsia 100	`#FEF6FF`
`fuchsia-200`	Fuchsia 200	`#FDE9FF`
`fuchsia-300`	Fuchsia 300	`#FAD3FF`
`fuchsia-400`	Fuchsia 400	`#F7B5FF`
`fuchsia-500`	Fuchsia 500	`#F393FF`
`fuchsia-600`	Fuchsia 600	`#EC69FF`
`fuchsia-700`	Fuchsia 700	`#DF4DF5`
`fuchsia-800`	Fuchsia 800	`#C844DC`
`fuchsia-900`	Fuchsia 900	`#B539C8`
`fuchsia-1000`	Fuchsia 1000	`#9C28AF`
`fuchsia-1100`	Fuchsia 1100	`#871B9A`
`fuchsia-1200`	Fuchsia 1200	`#710F83`
`fuchsia-1300`	Fuchsia 1300	`#5C046D`
`fuchsia-1400`	Fuchsia 1400	`#480058`
`fuchsia-1500`	Fuchsia 1500	`#360042`
`fuchsia-1600`	Fuchsia 1600	`#1D0023`
`fuchsia-100-dark`	Fuchsia 100 Dark	`#32003D`
`fuchsia-200-dark`	Fuchsia 200 Dark	`#3D004A`
`fuchsia-300-dark`	Fuchsia 300 Dark	`#4F005F`
`fuchsia-400-dark`	Fuchsia 400 Dark	`#660978`
`fuchsia-500-dark`	Fuchsia 500 Dark	`#7F1792`
`fuchsia-600-dark`	Fuchsia 600 Dark	`#9726AA`
`fuchsia-700-dark`	Fuchsia 700 Dark	`#AD33C0`
`fuchsia-800-dark`	Fuchsia 800 Dark	`#BA3CCE`
`fuchsia-900-dark`	Fuchsia 900 Dark	`#D549EB`
`fuchsia-1000-dark`	Fuchsia 1000 Dark	`#E85BFD`
`fuchsia-1100-dark`	Fuchsia 1100 Dark	`#F07AFF`
`fuchsia-1200-dark`	Fuchsia 1200 Dark	`#F59FFF`
`fuchsia-1300-dark`	Fuchsia 1300 Dark	`#F8BFFF`
`fuchsia-1400-dark`	Fuchsia 1400 Dark	`#FBDBFF`
`fuchsia-1500-dark`	Fuchsia 1500 Dark	`#FDF1FF`
`fuchsia-1600-dark`	Fuchsia 1600 Dark	`#FFFFFF`
`magenta-100`	Magenta 100	`#FFF5F8`
`magenta-200`	Magenta 200	`#FFE8F0`
`magenta-300`	Magenta 300	`#FFD5E3`
`magenta-400`	Magenta 400	`#FFB9D0`
`magenta-500`	Magenta 500	`#FF98BB`
`magenta-600`	Magenta 600	`#FF709F`
`magenta-700`	Magenta 700	`#FF4885`
`magenta-800`	Magenta 800	`#F02D6E`
`magenta-900`	Magenta 900	`#D92361`
`magenta-1000`	Magenta 1000	`#BA1650`
`magenta-1100`	Magenta 1100	`#A3053E`
`magenta-1200`	Magenta 1200	`#880033`
`magenta-1300`	Magenta 1300	`#6F0028`
`magenta-1400`	Magenta 1400	`#56001E`
`magenta-1500`	Magenta 1500	`#400016`
`magenta-1600`	Magenta 1600	`#23000C`
`magenta-100-dark`	Magenta 100 Dark	`#3B0016`
`magenta-200-dark`	Magenta 200 Dark	`#4A001B`
`magenta-300-dark`	Magenta 300 Dark	`#5D0022`
`magenta-400-dark`	Magenta 400 Dark	`#7B002D`
`magenta-500-dark`	Magenta 500 Dark	`#98073C`
`magenta-600-dark`	Magenta 600 Dark	`#B5134C`
`magenta-700-dark`	Magenta 700 Dark	`#CF1F5C`
`magenta-800-dark`	Magenta 800 Dark	`#E02665`
`magenta-900-dark`	Magenta 900 Dark	`#FF3377`
`magenta-1000-dark`	Magenta 1000 Dark	`#FF6095`
`magenta-1100-dark`	Magenta 1100 Dark	`#FF80AB`
`magenta-1200-dark`	Magenta 1200 Dark	`#FFA3C2`
`magenta-1300-dark`	Magenta 1300 Dark	`#FFC1D6`
`magenta-1400-dark`	Magenta 1400 Dark	`#FFDCE8`
`magenta-1500-dark`	Magenta 1500 Dark	`#FFF1F6`
`magenta-1600-dark`	Magenta 1600 Dark	`#FFFFFF`
`pink-100`	Pink 100	`#FFF6FC`
`pink-200`	Pink 200	`#FFE8F7`
`pink-300`	Pink 300	`#FFD3F0`
`pink-400`	Pink 400	`#FFB5E6`
`pink-500`	Pink 500	`#FF94DB`
`pink-600`	Pink 600	`#FF67CC`
`pink-700`	Pink 700	`#F24CB8`
`pink-800`	Pink 800	`#E434A3`
`pink-900`	Pink 900	`#CE2A92`
`pink-1000`	Pink 1000	`#B01F7B`
`pink-1100`	Pink 1100	`#981668`
`pink-1200`	Pink 1200	`#800C55`
`pink-1300`	Pink 1300	`#690344`
`pink-1400`	Pink 1400	`#530035`
`pink-1500`	Pink 1500	`#3E0027`
`pink-1600`	Pink 1600	`#210015`
`pink-100-dark`	Pink 100 Dark	`#3A0025`
`pink-200-dark`	Pink 200 Dark	`#47002C`
`pink-300-dark`	Pink 300 Dark	`#5A0039`
`pink-400-dark`	Pink 400 Dark	`#73074B`
`pink-500-dark`	Pink 500 Dark	`#8F1261`
`pink-600-dark`	Pink 600 Dark	`#AB1D77`
`pink-700-dark`	Pink 700 Dark	`#C4278A`
`pink-800-dark`	Pink 800 Dark	`#D52D97`
`pink-900-dark`	Pink 900 Dark	`#EC43AF`
`pink-1000-dark`	Pink 1000 Dark	`#FB5AC4`
`pink-1100-dark`	Pink 1100 Dark	`#FF7AD2`
`pink-1200-dark`	Pink 1200 Dark	`#FF9FDF`
`pink-1300-dark`	Pink 1300 Dark	`#FFBFEA`
`pink-1400-dark`	Pink 1400 Dark	`#FFDBF3`
`pink-1500-dark`	Pink 1500 Dark	`#FFF1FA`
`pink-1600-dark`	Pink 1600 Dark	`#FFFFFF`
`brown-100`	Brown 100	`#FCF7F2`
`brown-200`	Brown 200	`#F7EEE1`
`brown-300`	Brown 300	`#EFDDC3`
`brown-400`	Brown 400	`#E5C89D`
`brown-500`	Brown 500	`#D6B17B`
`brown-600`	Brown 600	`#BE9B68`
`brown-700`	Brown 700	`#AB8A5A`
`brown-800`	Brown 800	`#9A7B4D`
`brown-900`	Brown 900	`#8B6D42`
`brown-1000`	Brown 1000	`#775B32`
`brown-1100`	Brown 1100	`#674C23`
`brown-1200`	Brown 1200	`#583D15`
`brown-1300`	Brown 1300	`#463111`
`brown-1400`	Brown 1400	`#34250D`
`brown-1500`	Brown 1500	`#261A09`
`brown-1600`	Brown 1600	`#100C04`
`brown-100-dark`	Brown 100 Dark	`#231808`
`brown-200-dark`	Brown 200 Dark	`#2C1F0B`
`brown-300-dark`	Brown 300 Dark	`#3A280E`
`brown-400-dark`	Brown 400 Dark	`#4E3713`
`brown-500-dark`	Brown 500 Dark	`#62471E`
`brown-600-dark`	Brown 600 Dark	`#73582F`
`brown-700-dark`	Brown 700 Dark	`#84683D`
`brown-800-dark`	Brown 800 Dark	`#8F7245`
`brown-900-dark`	Brown 900 Dark	`#A38454`
`brown-1000-dark`	Brown 1000 Dark	`#B59362`
`brown-1100-dark`	Brown 1100 Dark	`#C7A370`
`brown-1200-dark`	Brown 1200 Dark	`#DEB982`
`brown-1300-dark`	Brown 1300 Dark	`#E8CFA9`
`brown-1400-dark`	Brown 1400 Dark	`#F2E3CE`
`brown-1500-dark`	Brown 1500 Dark	`#FAF4EC`
`brown-1600-dark`	Brown 1600 Dark	`#FFFFFF`
`silver-100`	Silver 100	`#F7F7F7`
`silver-200`	Silver 200	`#EFEFEF`
`silver-300`	Silver 300	`#DFDFDF`
`silver-400`	Silver 400	`#CCCCCC`
`silver-500`	Silver 500	`#B7B7B7`
`silver-600`	Silver 600	`#A0A0A0`
`silver-700`	Silver 700	`#8F8F8F`
`silver-800`	Silver 800	`#808080`
`silver-900`	Silver 900	`#727272`
`silver-1000`	Silver 1000	`#606060`
`silver-1100`	Silver 1100	`#515151`
`silver-1200`	Silver 1200	`#424242`
`silver-1300`	Silver 1300	`#343434`
`silver-1400`	Silver 1400	`#272727`
`silver-1500`	Silver 1500	`#1C1C1C`
`silver-1600`	Silver 1600	`#0C0C0C`
`silver-100-dark`	Silver 100 Dark	`#1A1A1A`
`silver-200-dark`	Silver 200 Dark	`#212121`
`silver-300-dark`	Silver 300 Dark	`#2C2C2C`
`silver-400-dark`	Silver 400 Dark	`#3B3B3B`
`silver-500-dark`	Silver 500 Dark	`#4C4C4C`
`silver-600-dark`	Silver 600 Dark	`#5C5C5C`
`silver-700-dark`	Silver 700 Dark	`#6C6C6C`
`silver-800-dark`	Silver 800 Dark	`#767676`
`silver-900-dark`	Silver 900 Dark	`#898989`
`silver-1000-dark`	Silver 1000 Dark	`#989898`
`silver-1100-dark`	Silver 1100 Dark	`#A9A9A9`
`silver-1200-dark`	Silver 1200 Dark	`#BEBEBE`
`silver-1300-dark`	Silver 1300 Dark	`#D3D3D3`
`silver-1400-dark`	Silver 1400 Dark	`#E5E5E5`
`silver-1500-dark`	Silver 1500 Dark	`#F4F4F4`
`silver-1600-dark`	Silver 1600 Dark	`#FFFFFF`
`cinnamon-100`	Cinnamon 100	`#FDF7F3`
`cinnamon-200`	Cinnamon 200	`#F9ECE5`
`cinnamon-300`	Cinnamon 300	`#F4DACB`
`cinnamon-400`	Cinnamon 400	`#EDC4AC`
`cinnamon-500`	Cinnamon 500	`#E5AA88`
`cinnamon-600`	Cinnamon 600	`#D4916C`
`cinnamon-700`	Cinnamon 700	`#C67E58`
`cinnamon-800`	Cinnamon 800	`#B86D46`
`cinnamon-900`	Cinnamon 900	`#AA5E38`
`cinnamon-1000`	Cinnamon 1000	`#934D2B`
`cinnamon-1100`	Cinnamon 1100	`#803E20`
`cinnamon-1200`	Cinnamon 1200	`#6E3015`
`cinnamon-1300`	Cinnamon 1300	`#5C230B`
`cinnamon-1400`	Cinnamon 1400	`#481906`
`cinnamon-1500`	Cinnamon 1500	`#341204`
`cinnamon-1600`	Cinnamon 1600	`#180802`
`cinnamon-100-dark`	Cinnamon 100 Dark	`#301104`
`cinnamon-200-dark`	Cinnamon 200 Dark	`#3B1505`
`cinnamon-300-dark`	Cinnamon 300 Dark	`#4F1C07`
`cinnamon-400-dark`	Cinnamon 400 Dark	`#64290F`
`cinnamon-500-dark`	Cinnamon 500 Dark	`#7A391C`
`cinnamon-600-dark`	Cinnamon 600 Dark	`#8F4A28`
`cinnamon-700-dark`	Cinnamon 700 Dark	`#A35834`
`cinnamon-800-dark`	Cinnamon 800 Dark	`#B0623B`
`cinnamon-900-dark`	Cinnamon 900 Dark	`#C07750`
`cinnamon-1000-dark`	Cinnamon 1000 Dark	`#CE8863`
`cinnamon-1100-dark`	Cinnamon 1100 Dark	`#DC9A76`
`cinnamon-1200-dark`	Cinnamon 1200 Dark	`#E8B395`
`cinnamon-1300-dark`	Cinnamon 1300 Dark	`#EFCBB7`
`cinnamon-1400-dark`	Cinnamon 1400 Dark	`#F6E1D6`
`cinnamon-1500-dark`	Cinnamon 1500 Dark	`#FCF4EF`
`cinnamon-1600-dark`	Cinnamon 1600 Dark	`#FFFFFF`
`turquoise-100`	Turquoise 100	`#EEFBFB`
`turquoise-200`	Turquoise 200	`#D1F5F5`
`turquoise-300`	Turquoise 300	`#A9ECED`
`turquoise-400`	Turquoise 400	`#6FDDE4`
`turquoise-500`	Turquoise 500	`#27CAD8`
`turquoise-600`	Turquoise 600	`#0FB1C0`
`turquoise-700`	Turquoise 700	`#0C9EAB`
`turquoise-800`	Turquoise 800	`#0A8D99`
`turquoise-900`	Turquoise 900	`#087E89`
`turquoise-1000`	Turquoise 1000	`#056B74`
`turquoise-1100`	Turquoise 1100	`#035A62`
`turquoise-1200`	Turquoise 1200	`#014A51`
`turquoise-1300`	Turquoise 1300	`#003B41`
`turquoise-1400`	Turquoise 1400	`#002C31`
`turquoise-1500`	Turquoise 1500	`#002023`
`turquoise-1600`	Turquoise 1600	`#000F11`
`turquoise-100-dark`	Turquoise 100 Dark	`#001E21`
`turquoise-200-dark`	Turquoise 200 Dark	`#002529`
`turquoise-300-dark`	Turquoise 300 Dark	`#003136`
`turquoise-400-dark`	Turquoise 400 Dark	`#004248`
`turquoise-500-dark`	Turquoise 500 Dark	`#03545C`
`turquoise-600-dark`	Turquoise 600 Dark	`#056770`
`turquoise-700-dark`	Turquoise 700 Dark	`#077883`
`turquoise-800-dark`	Turquoise 800 Dark	`#09838E`
`turquoise-900-dark`	Turquoise 900 Dark	`#0B97A4`
`turquoise-1000-dark`	Turquoise 1000 Dark	`#0DA8B6`
`turquoise-1100-dark`	Turquoise 1100 Dark	`#10BACA`
`turquoise-1200-dark`	Turquoise 1200 Dark	`#40D0DC`
`turquoise-1300-dark`	Turquoise 1300 Dark	`#80E1E7`
`turquoise-1400-dark`	Turquoise 1400 Dark	`#B7F0F0`
`turquoise-1500-dark`	Turquoise 1500 Dark	`#E4F9F9`
`turquoise-1600-dark`	Turquoise 1600 Dark	`#FFFFFF`

Mode role mappings

Light mode

Role	Swatch	Hex
`background`	`gray-25`	`#FFFFFF`
`surface`	`gray-100`	`#E9E9E9`
`surface-elevated`	`gray-25`	`#FFFFFF`
`text-primary`	`gray-900`	`#131313`
`text-secondary`	`gray-700`	`#505050`
`text-tertiary`	`gray-600`	`#717171`
`primary`	`blue-900`	`#3B63FB`
`primary-hover`	`blue-1000`	`#274DEA`
`accent`	`blue-900`	`#3B63FB`
`accent-hover`	`blue-1000`	`#274DEA`
`warning`	`orange-900`	`#C24E00`
`warning-hover`	`orange-700`	`#E86A00`
`error`	`red-900`	`#D73220`
`success`	`green-900`	`#05834E`
`border`	`gray-300`	`#DADADA`

Dark mode

Role	Swatch	Hex
`background`	`gray-25-dark`	`#111111`
`surface`	`gray-100-dark`	`#2C2C2C`
`surface-elevated`	`gray-50-dark`	`#1B1B1B`
`text-primary`	`gray-900-dark`	`#F2F2F2`
`text-secondary`	`gray-700-dark`	`#AFAFAF`
`text-tertiary`	`gray-800-dark`	`#DBDBDB`
`primary`	`blue-900-dark`	`#5681FF`
`primary-hover`	`blue-1000-dark`	`#6995FE`
`accent`	`blue-900-dark`	`#5681FF`
`accent-hover`	`blue-1000-dark`	`#6995FE`
`warning`	`orange-900-dark`	`#E06400`
`warning-hover`	`orange-900`	`#C24E00`
`error`	`red-900-dark`	`#FC432E`
`success`	`green-900-dark`	`#099D59`
`border`	`gray-300-dark`	`#393939`

Brand semantic roles

Colors

Role	Swatch	Hex
`identity`	`gray-25`	`#FFFFFF`
`on-identity`	`gray-900`	`#131313`
`primary`	`blue-900`	`#3B63FB`
`primary-hover`	`blue-1000`	`#274DEA`
`accent`	`blue-900`	`#3B63FB`
`accent-hover`	`blue-1000`	`#274DEA`
`mark`	`blue-900`	`#3B63FB`
`success`	`green-900`	`#05834E`
`warning`	`orange-900`	`#C24E00`
`error`	`red-900`	`#D73220`
`text-primary-light`	`gray-900`	`#131313`
`text-primary-dark`	`gray-900-dark`	`#F2F2F2`
`background-light`	`gray-25`	`#FFFFFF`
`background-dark`	`gray-25-dark`	`#111111`
`surface-light`	`gray-100`	`#E9E9E9`
`surface-dark`	`gray-100-dark`	`#2C2C2C`
`text-secondary-light`	`gray-700`	`#505050`
`text-tertiary-light`	`gray-600`	`#717171`
`border-light`	`gray-300`	`#DADADA`

Typography

Role	Font role key
`display`	`heading`
`prose`	`body`
`code`	`mono`

Rules

🛑 error (8)

`contrastRatio` → `text-primary`

against: background
minRatio: 4.5
standard: WCAG-AA

Spectrum is positioned as a production design system for Adobe's shipped product surfaces; the documented contrast floor is WCAG 2.1 AA. Gray 900 (#131313) on Gray 25 (#FFFFFF) clears AA at ~20:1, and Gray 900 Dark (#F2F2F2) on Gray 25 Dark (#111111) clears AA at ~18:1.

`colorChoice` → `roles.colors.primary`

allowed: blue-900, blue-1000
forbidden: red-900, orange-900, green-900, purple-900, magenta-900

Spectrum's accent-background-color-default resolves to blue-900 on light and the paired blue-900-dark on dark. Other chromatic anchors (red, orange, green, purple, magenta) are reserved for semantic and illustrative roles and must not stand in for the primary interactive color.

`forbiddenTreatment` → `logo`

treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo

Adobe's brand-guidelines treatment of the red Adobe wordmark and the corporate "A" mark prohibits stretching, rotating, recoloring, adding effects, or placing the mark on visually busy backgrounds. Spectrum surfaces inherit the same constraints.

`contextRestriction` → `roles.colors.error`

forbiddenContexts: confirmation, data-viz-positive
allowedContexts: error-state, destructive-action, validation-failure

Spectrum's negative semantic token (negative-color-900 = red-900) maps to error, destructive, and validation-failure states. Using it for confirmation or positive data-viz inverts the established meaning and breaks user expectations across Adobe products.

`contextRestriction` → `roles.colors.success`

forbiddenContexts: error-state, destructive-action
allowedContexts: confirmation, completion, data-viz-positive

Spectrum's positive semantic token (positive-color-900 = green-900) is reserved for confirmation, completion, and positive data-viz. Using it for error or destructive states inverts the documented semantic meaning.

`fontPairing` → `typography.display`

requires: prose
minSizeRatio: 1.5

Spectrum's type ramp pairs a display weight of Adobe Clean with body weight at a documented minimum ratio of 1.5× to preserve the hierarchy that Spectrum's components depend on.

`accessibilityRequirement` → `*`

standard: WCAG-AA
criterion: 1.4.3

WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Spectrum's published accessibility commitment treats AA as the floor across product surfaces; AAA is encouraged where contrast permits but is not the system-wide minimum.

`variantSelection` → `logo`

use: logo-light
when: backgroundColorScheme="dark"

On dark surfaces, use the documented light-fill variant of the Adobe mark. Inverting the red wordmark on the fly produces an off-brand pink that does not match Adobe's published assets.

⚠️ warning (1)

`enumMembership` → `typography.heading.fontWeight`

allowed: 400, 500, 700, 800, 900

Adobe Clean ships in Regular (400), Medium (500), Bold (700), Black (800), and Extra Bold (900) — the weights Spectrum's typography scale references. Lighter weights are not part of the licensed cut and read off-brand on product surfaces.

💡 recommendation (1)

`compositionConstraint` → `roles.colors.primary`

pairsWith: gray-25, gray-50, gray-100, gray-900
doesNotPairWith: red-900, orange-900, magenta-900

Spectrum accent blue is calibrated to read against neutral grays — Gray 25 / 50 / 100 surfaces and Gray 900 text. Placing it adjacent to red-900, orange-900, or magenta-900 at equal weight produces chromatic conflict and undermines the calm, focused voice Spectrum is built for.

Provenance

Source: https://spectrum.adobe.com/
License: Proprietary — All Rights Reserved (palette tokens Apache-2.0)
Attribution: Adobe Spectrum design tokens are licensed Apache-2.0 (see the adobe/spectrum-css repository). The Adobe wordmark, the Adobe Clean typeface family, and the Adobe trademark are property of Adobe Inc. This atom catalogues only the public, documented design- system surface; trademark and typeface use remain Adobe's.
Imported: 2026-05-19
Notes: Spectrum is dual-mode by construction: every accent / surface / text token resolves to one hex on light and a paired hex on dark. This brand atom names light-mode swatches in the role map and lets the palette's modes.dark block do the swap at consumption time. The proprietary Adobe Clean family is not publicly licensed; Inter is referenced as the rendering substitute for sans (heading, body) and Source Sans 3 covers the Source-family marketing surface.

Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.

Components — same template, themed by Adobe

Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.

Adobe

A clear hierarchy in Adobe's typeface

Tertiary heading — supporting structure

Body copy renders in the brand's prose font on the brand's background. Inline links and highlighted phrases pick up the brand's primary and highlight roles. Code spans like brand.references.palette fall back to the monospace face.

A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.

Bulleted list

Bullet markers inherit the brand's primary color.
Item spacing reads as a deliberate vertical rhythm.
Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.

Numbered list

Open the brand's resolved spec.
Apply roles to the component template.
Render the surface in the brand's identity.
Audit the output against the typed rules.

Buttons

Callout boxes

Info

Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.

Success

Confirms a completed action — palette role success determines the rule color.

Warning

Calls out something that needs attention but isn't an error — palette role warning.

Error

Surfaces a failure that blocks progress — palette role error. Use sparingly.

Table

Role	Resolves to	Mode
primary	brand color #1	light + dark
accent	brand color #2	light + dark
warning	brand warning	light + dark
error	brand error	light + dark

Atoms

The quick brown fox jumps over 13 lazy dogs.

font · body

Inter

[email protected]

The quick brown fox jumps over 13 lazy dogs.

font · serif

Source Sans 3

[email protected]

The quick brown fox jumps over 13 lazy dogs.

font · mono

Source Code Pro

[email protected]

The quick brown fox jumps over 13 lazy dogs.

Brand semantic roles

Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.

Colors

accent → blue-900 #3B63FB

accent-hover → blue-1000 #274DEA

background-dark → gray-25-dark #111111

background-light → gray-25 #FFFFFF

border-light → gray-300 #DADADA

error → red-900 #D73220

identity → gray-25 #FFFFFF

mark → blue-900 #3B63FB

on-identity → gray-900 #131313

primary → blue-900 #3B63FB

primary-hover → blue-1000 #274DEA

success → green-900 #05834E

surface-dark → gray-100-dark #2C2C2C

surface-light → gray-100 #E9E9E9

text-primary-dark → gray-900-dark #F2F2F2

text-primary-light → gray-900 #131313

text-secondary-light → gray-700 #505050

text-tertiary-light → gray-600 #717171

warning → orange-900 #C24E00

Typography

code → mono Source Code Pro

display → heading Inter

prose → body Inter

Palette mode mappings (from adobe)

Light mode (15 roles)

accent → blue-900

accent-hover → blue-1000

background → gray-25

border → gray-300

error → red-900

primary → blue-900

primary-hover → blue-1000

success → green-900

surface → gray-100

surface-elevated → gray-25

text-primary → gray-900

text-secondary → gray-700

text-tertiary → gray-600

warning → orange-900

warning-hover → orange-700

Dark mode (15 roles)

accent → blue-900-dark

accent-hover → blue-1000-dark

background → gray-25-dark

border → gray-300-dark

error → red-900-dark

primary → blue-900-dark

primary-hover → blue-1000-dark

success → green-900-dark

surface → gray-100-dark

surface-elevated → gray-50-dark

text-primary → gray-900-dark

text-secondary → gray-700-dark

text-tertiary → gray-800-dark

warning → orange-900-dark

warning-hover → orange-900

Rules (10 typed constraints)

error · 8 rules

contrastRatio text-primary

against background

minRatio 4.5

standard WCAG-AA

Spectrum is positioned as a production design system for Adobe's shipped product surfaces; the documented contrast floor is WCAG 2.1 AA. Gray 900 (#131313) on Gray 25 (#FFFFFF) clears AA at ~20:1, and Gray 900 Dark (#F2F2F2) on Gray 25 Dark (#111111) clears AA at ~18:1.

colorChoice roles.colors.primary

allowed blue-900, blue-1000

forbidden red-900, orange-900, green-900, purple-900, magenta-900

Spectrum's accent-background-color-default resolves to blue-900 on light and the paired blue-900-dark on dark. Other chromatic anchors (red, orange, green, purple, magenta) are reserved for semantic and illustrative roles and must not stand in for the primary interactive color.

forbiddenTreatment logo

treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo

Adobe's brand-guidelines treatment of the red Adobe wordmark and the corporate "A" mark prohibits stretching, rotating, recoloring, adding effects, or placing the mark on visually busy backgrounds. Spectrum surfaces inherit the same constraints.

contextRestriction roles.colors.error

forbiddenContexts confirmation, data-viz-positive

allowedContexts error-state, destructive-action, validation-failure

Spectrum's negative semantic token (negative-color-900 = red-900) maps to error, destructive, and validation-failure states. Using it for confirmation or positive data-viz inverts the established meaning and breaks user expectations across Adobe products.

contextRestriction roles.colors.success

forbiddenContexts error-state, destructive-action

allowedContexts confirmation, completion, data-viz-positive

Spectrum's positive semantic token (positive-color-900 = green-900) is reserved for confirmation, completion, and positive data-viz. Using it for error or destructive states inverts the documented semantic meaning.

fontPairing typography.display

requires prose

minSizeRatio 1.5

Spectrum's type ramp pairs a display weight of Adobe Clean with body weight at a documented minimum ratio of 1.5× to preserve the hierarchy that Spectrum's components depend on.

accessibilityRequirement *

standard WCAG-AA

criterion 1.4.3

WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Spectrum's published accessibility commitment treats AA as the floor across product surfaces; AAA is encouraged where contrast permits but is not the system-wide minimum.

variantSelection logo

use logo-light

when backgroundColorScheme="dark"

On dark surfaces, use the documented light-fill variant of the Adobe mark. Inverting the red wordmark on the fly produces an off-brand pink that does not match Adobe's published assets.

warning · 1 rule

enumMembership typography.heading.fontWeight

allowed 400, 500, 700, 800, 900

Adobe Clean ships in Regular (400), Medium (500), Bold (700), Black (800), and Extra Bold (900) — the weights Spectrum's typography scale references. Lighter weights are not part of the licensed cut and read off-brand on product surfaces.

recommendation · 1 rule

compositionConstraint roles.colors.primary

pairsWith gray-25, gray-50, gray-100, gray-900

doesNotPairWith red-900, orange-900, magenta-900

Spectrum accent blue is calibrated to read against neutral grays — Gray 25 / 50 / 100 surfaces and Gray 900 text. Placing it adjacent to red-900, orange-900, or magenta-900 at equal weight produces chromatic conflict and undermines the calm, focused voice Spectrum is built for.

Provenance

Source: https://spectrum.adobe.com/
Attribution: Adobe Spectrum design tokens are licensed Apache-2.0 (see the `adobe/spectrum-css` repository). The Adobe wordmark, the Adobe Clean typeface family, and the Adobe trademark are property of Adobe Inc. This atom catalogues only the public, documented design- system surface; trademark and typeface use remain Adobe's.
Imported: 2026-05-19
Notes: Spectrum is dual-mode by construction: every accent / surface / text token resolves to one hex on light and a paired hex on dark. This brand atom names light-mode swatches in the role map and lets the palette's `modes.dark` block do the swap at consumption time. The proprietary Adobe Clean family is not publicly licensed; Inter is referenced as the rendering substitute for sans (heading, body) and Source Sans 3 covers the Source-family marketing surface.

Downloads

Brand Guide

Adobe

Atoms

Palette

Fonts

Swatches

Mode role mappings

Light mode

Dark mode

Brand semantic roles

Colors

Typography

Rules

🛑 error (8)

contrastRatio → text-primary

colorChoice → roles.colors.primary

forbiddenTreatment → logo

contextRestriction → roles.colors.error

contextRestriction → roles.colors.success

fontPairing → typography.display

accessibilityRequirement → *

variantSelection → logo

⚠️ warning (1)

enumMembership → typography.heading.fontWeight

💡 recommendation (1)

compositionConstraint → roles.colors.primary

Provenance

Components — same template, themed by Adobe

Adobe

A clear hierarchy in Adobe's typeface

Tertiary heading — supporting structure

Bulleted list

Numbered list

Buttons

Callout boxes

Table

Atoms

Brand semantic roles

Colors

Typography

Palette mode mappings (from adobe)

Light mode (15 roles)

Dark mode (15 roles)

Rules (10 typed constraints)

error · 8 rules

warning · 1 rule

recommendation · 1 rule

Provenance

`contrastRatio` → `text-primary`

`colorChoice` → `roles.colors.primary`

`forbiddenTreatment` → `logo`

`contextRestriction` → `roles.colors.error`

`contextRestriction` → `roles.colors.success`

`fontPairing` → `typography.display`

`accessibilityRequirement` → `*`

`variantSelection` → `logo`

`enumMembership` → `typography.heading.fontWeight`

`compositionConstraint` → `roles.colors.primary`