Creativity for everyone
The industry-standard creative apps, from students to professionals. Observed
The system
Fixed, everywhere
- Black and white chrome
- Adobe Clean (stand-ins: Rethink Sans display, Source Sans 3 body)
- Product tiles in their published colours
- Sentence case
The one thing that varies
Tone moves along the published spectrum from motivational to supportive; headline weight and size flex with the surface (Spectrum product UI uses ExtraBold headings; Black is allowed for product branding at 18px and up).
Source: spectrum.adobe.com/page/voice-and-tonespectrum.adobe.com/foundations/typography/typography-system
How loud each format gets
Silent
Quiet
CalmProposalEmail
WarmDeck
LoudLanding pageSocial
Loudest
Our engine's setting, built from their rules.
Strategy
The creative, document and customer-experience tools for everyone, from students to global brands. Observed
Documents that work
Acrobat turns PDFs into summaries, reports and shared spaces. Observed
Customer experience at scale
Adobe for Business orchestrates content and customer experiences with AI. Observed
AI built into the tools
Firefly and AI assistants inside Photoshop and Acrobat. Observed
Full spec
- For Observed
- Students, social influencers, creative professionals, performance marketers and global brands (the homepage names all five)
- Problem Our reading
- Making anything, from a social clip to a campaign, takes many tools and a lot of time
- Promise Observed
- Everything you need to make anything, faster with AI
- Mission Published
- Empower everyone, everywhere to imagine, create and bring any digital experience to life (paraphrase).
Proof behind each pillar
- Creativity for everyone. 1 billion+ monthly active users of Adobe products
- Creativity for everyone. Creative Cloud: 20+ apps, including Photoshop, Illustrator, Premiere and Acrobat Pro
- Documents that work. Acrobat AI summaries, audio overviews, presentations and visual reports
- Customer experience at scale. 20,000+ global enterprises
- AI built into the tools. Firefly generates and edits images, video, audio and designs with AI models from Adobe and others
Story Published
Started in 1982 by John Warnock and Charles Geschke; today Creative Cloud, Acrobat, Firefly and the business products.
Values
Category. Creative software, document software (PDF) and digital-experience software Observed
Why them
- Industry-standard apps (Photoshop, Illustrator, Premiere, Acrobat) in one subscription Observed
- AI built into those apps (Firefly, AI Assistant) Observed
- Reach: 1 billion+ monthly active users and 20,000+ enterprises Published
- Spans individuals, businesses, education and government Observed
Instead of
not published: Adobe does not name competitors on its homepage
Boilerplate Observed
Adobe makes the tools people and businesses use to create, work with documents and run customer experiences: Creative Cloud (Photoshop, Illustrator, Premiere and more), Acrobat, Firefly and Adobe's business products. Founded in 1982 by John Warnock and Charles Geschke.
Taglines
Create at the highest level. Observed
Everything you need to make anything. Observed
Tools that work for you. Observed
They never claim
- Prices and discounts (50%, 71%, US$ amounts) are time-bound offers: never reuse them
- Customer quotes belong to the named customers
- Usage numbers only as Adobe states them (1 billion+, 20,000+)
The homepage sells three businesses at once, creativity (Creative Cloud, Firefly), documents (Acrobat) and customer experience (Adobe for Business), and lets a five-slide hero, a five-card carousel and a nine-card product grid carry them. Every headline is a short sentence with a period.
Personality and voice
Rationalbut not TrendyPublished
Humanbut not ColdPublished
Focusedbut not DecoratedPublished
Collaborativebut not ClosedPublished
Bold on the pagebut not Loud in colourObserved
Adobe's apps are complex; plain, consistent language keeps them usable across dozens of products and languages.
Full spec
- Sentence case headlines
- Use title case only for official names and titles
- Never use all caps for emphasis; all caps only for acronyms and file extensions
- Use common contractions (you're, we'll, can't) to sound natural
- Address the user as you; first person only for the user's own answers, consent or privacy
- Spell out "and" instead of using an ampersand in copy
- Prefer active voice: say who does what
- Use simple verb tenses
- Describe only what is needed; don't coin new concepts or names
- Avoid language that is overly opinionated, funny or trendy
- Homepage headlines are full sentences that end with a period
- Homepage headlines run 3 to 7 words
- No exclamation marks in homepage headlines or body (none observed)
rationalhumanfocused
Spectrum publishes one voice (rational, human, focused) and a tone spectrum from motivational to supportive, plus a full grammar and mechanics guide: sentence case, contractions, second person, no ampersands, no all-caps emphasis.
- Sentence case everywhere except official names
- Use contractions
- Address the reader as you
- Spell out "and"
- Active voice, simple tenses
- Instructive is the usual tone; motivational and supportive are rare
- One voice, many tones: Spectrum sets the voice as rational (clear and understandable), human (friendly, honest, responsible) and focused (concise and simple) (https://spectrum.adobe.com/page/voice-and-tone/).
- Tone slides along a five-point spectrum: motivational (rarely), helpful (occasionally), instructive (often), reassuring (occasionally), supportive (rarely).
- Avoid language that is overly opinionated, funny or trendy; acknowledge users' emotions.
- Homepage headlines (observed 2026-10-30): short declaratives ending in a period, often a product promise ("Get work done. Faster."), then one plain sentence.
- Offers are facts with a link: "New subscribers save 50% on Creative Cloud Pro for the first three months. See terms."
- Spectrum is product UI guidance; Adobe does not publish a separate marketing voice guide.
Their words
createmakefasterAIeveryone
Never
& in body copyALL CAPS for emphasisoverly opinionated, funny or trendy languageinvented product names or concepts
Source: spectrum.adobe.com/page/voice-and-tonespectrum.adobe.com/page/principles
- Don’t funny, trendy or opinionated copy
- Don’t ALL CAPS for emphasis
- Don’t new coined concepts
| Voice | rational, human, focused |
|---|---|
| Tone spectrum | motivational, helpful, instructive, reassuring, supportive |
| Most frequent tone | instructive (often) |
| Case | sentence case |
| Person | second |
Source: spectrum.adobe.com/page/voice-and-tonespectrum.adobe.com/page/grammar-and-mechanicsspectrum.adobe.com/page/principles
Logo
Files are linked from adobe.com, not re-hosted. Adobe's trademark guidelines require a licence or written permission to use Adobe logos and product icons, forbid putting them in your own logo, and forbid using Adobe trademarks in Adobe's stylized form. Construction, clear space and minimum size for the corporate logo are not published publicly. Not affiliated with Adobe.
The tile system makes every product recognisable at 18px, and the corporate mark rides along as one more tile.
Full spec
- A product logo or tile colour does not change on dark backgrounds
- One-colour product logos are only for workflow icons
- Logos need a licence or written permission
- Never put an Adobe logo or product icon in your own logo
- Don't use Adobe trademarks in Adobe's stylized form
- Request new assets from Adobe's Brand team instead of making them
- Don’t recolour a product tile
- Don’t make your own logos, colours or gradients
- Don’t use Adobe marks in a company or product logo
| Clear space | not published |
|---|---|
| Minimum size | not published |
| Site nav | wordmark 67x16, white over the hero (observed) |
| Footer | A + wordmark 1496px wide, cropped (observed) |
Adobe uses the wordmark alone in the site nav and a giant white A + wordmark lockup in the footer; the red A tile stands for Adobe among the product tiles. Spectrum says product logos and tile colours do not change on dark backgrounds.
Source: spectrum.adobe.com/foundations/visual-language/brandadobe.com/legal/permissions/trademarks.htmladobe.com
Color
Product colour is how people find their app; keeping the frame neutral keeps those colours meaningful.
Full spec
- Primary palette: red, black, grey, white
- Each product keeps its own colours; tiles never change on dark
- Gradients are placed intentionally and tied to product palettes
- Don't make your own colours or gradients: request them
- Spectrum generates UI colours with the Leonardo tool to target contrast ratios
- Brand colours outside illustration and splash imagery may differ slightly from Spectrum 2 colours
- Don’t use colour for decoration in the chrome
- Don’t invent a gradient
| Adobe red | #EB1000 (observed) |
|---|---|
| Ink | #000000 |
| Surface | #F3F3F3 (Spectrum gray-75) |
| Product accent | #3B63FB (Spectrum blue-900) |
The primary palette is red, black, grey and white; an extended palette adds colour for graphics. Each Creative Cloud app has a published light/dark pair (Ps #31A8FF/#001E36), Document Cloud has three primaries plus Adobe red and six secondaries, Experience Cloud splits cool foundational and warm functional colours, and Express uses three. On the homepage the chrome is black and white only.
Not published: the hex of Adobe red on a public guideline page (#EB1000 is read from Adobe's own SVGs); colour proportions.
Source: spectrum.adobe.com/foundations/visual-language/brandgithub.com/adobe/spectrum-design-data/blob/main/packages/tokens/src/color-palette.jsonspectrum.adobe.com/foundations/color/colorsadobe.com
Typography
Create at the highest level.
One family, many weights, a predictable scale: hierarchy comes from size, weight and colour, not from extra faces.
Full spec
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| Adobe Clean Display Black | Homepage headlines, quotes and card titles at 900 | Proprietary to Adobe; not available for others | Rethink Sans Closest line width of 13 open candidates at 80px and 56px (+1.4%, -0.3%); see kit.typography.calibration. It renders darker than the real face, so cap it at 800. |
| Adobe Clean (Adobe Clean Spectrum VF in product) | Body, labels, nav and buttons at 400 and 700 | Proprietary; Adobe's corporate typeface, a family of 10+ faces | Source Sans 3 Adobe's own open-source sans (SIL OFL); within 3% of Adobe Clean's width at 20px and 2% at 14px bold. |
| not published on the public page | Code type style in Spectrum | not published | Source Code Pro Adobe's own open mono, the natural partner to Source Sans 3. |
- Major Second scale, base 14px
- ExtraBold for headings in product UI; Black only for branded headings at 18px+
- Bold for titles, file names and button labels
- Medium for labels that sit with 1.5px icons
- Regular for body and user content
- Underline only for links
- Line height ~130% at small sizes to ~115% at large; 150% for body and code
- Don’t underline for emphasis
- Don’t Black below 18px
| Corporate face | Adobe Clean (proprietary) |
|---|---|
| Stand-ins | Rethink Sans 800 display, Source Sans 3 body |
| Scale | 1.125 from 14px |
| Homepage H1 | 80/76 900 -0.04em |
| Homepage H2 | 56/56 900 -0.03em |
Adobe Clean is the corporate typeface, a family of 10+ faces; Spectrum ships Adobe Clean Spectrum VF. The type scale is a Major Second (1.125) from a 14px base: 10, 11, 12, 14, 16, 18, 20, 22, 25, 28, 32, 36, 40, 45, 51, 58, 65, 73px. ExtraBold is the heaviest for most UI; Black is reserved for branded headings at 18px and up. Body and code use 1.5 line height. The homepage sets headlines in Adobe Clean Display Black at 80/56/24px with tight tracking.
Source: spectrum.adobe.com/foundations/typography/overviewspectrum.adobe.com/foundations/typography/typography-systemadobe.com
Graphic elements
Do Adobe Clean Display Black 900, tight tracking (-0.03 to -0.04em in Adobe's face; -0.02em with the stand-in Rethink Sans 800 at 56-80px), line-height 0.95-1.0, sentence case ending in a period; white on photos, black on white.
The Black headline · every homepage headline and card title
Do Full-bleed photo/video and black bands are the stage; white content sections ride over them as one sheet with 32px rounded corners where they meet.
White sheet over a dark stage · section transitions
Do Rounded-square tiles in each product's published dark/light pair (Ps #31A8FF on #001E36, Ai #FF9A00 on #330000) or white on red; 18-32px; they are the only colour in the chrome.
Product app tiles · cards, badges, footer
Do 40px tall, 999px radius, white with a 14px bold black label, or a 2px white outline on dark.
White pill buttons · every CTA
Do Gradients are placed intentionally, tied to product brand palettes, and never distract from content.
Product gradients · product UI: premium and generative-AI moments
Specimens use sample copy, not Adobe’s.
All four are neutral containers that make product colour and customer work stand out.
Full spec
- Rounded everything: no sharp corners
- Cards and media 16px radius, small cards 8px
- Pills for every action
- Tiles carry the only chrome colour
| Sheet radius | 32px (observed) |
|---|---|
| Card radius | 16px (observed) |
| Gap | 8px between cards (observed) |
What makes adobe.com recognisable without the logo: the heavy Black headline ending in a period, the white sheet with 32px rounded corners riding over a dark full-bleed stage, rows of rounded product tiles, and white pill buttons.
Source: spectrum.adobe.com/foundations/styles/object-styles/roundingadobe.com
Iconography
Adobe apps have dense toolbars; simple consistent metaphors keep them scannable.
Full spec
- Outline style, 1.5px stroke
- Mostly monochrome
- Clear, functional metaphors used consistently
- Duotone only for direction, exclusion, transition or speed
- Fill plus stroke only to clarify a concept (a rated star)
- Don’t filled icon style
- Don’t busy metaphors
| Stroke | 1.5px |
|---|---|
| Colour | gray 800 (#292929 light) |
| Recipe for Steal | Lucide-style outline icons at 1.5px, rounded caps, gray 800 |
Spectrum 2 icons are outlined, mostly monochrome, drawn from predefined key shapes with a 1.5px stroke and rounder corners; colour appears only in status badges, and duotone only to show direction or change.
Source: spectrum.adobe.com/foundations/icons-and-illustrations/icon-fundamentals
Illustration
Linear illustrations stay quiet in the UI; gradient ones carry brand expression where it helps.
Full spec
- Linear: gray 800, sizes 48/96/160px, same metaphors as icons
- Gradient: product colour pairs and key shapes
- Do not create your own illustrations or use third-party assets
| Linear sizes | 48, 96, 160px |
|---|---|
| Linear colour | gray 800 |
| Recipe for Steal | one-colour line drawings at 1.5px in #292929; gradient spots only in your product colour |
Spectrum 2 has two illustration styles: linear (monochrome gray 800, built on the icon metaphors, 48, 96 and 160px) for empty states and errors, and gradient illustrations in product colours for bolder, motivating moments. Teams must request illustrations from the Brand team.
Source: spectrum.adobe.com/foundations/visual-language/illustrationspectrum.adobe.com/foundations/icons-and-illustrations/illustration
Photography
It shows the product in use and makes the screen the light source, so the work glows.
Full spec
- Real people, real workspaces, an Adobe app on screen
- Warm, low-key light; the screen is the brightest thing
- Full-bleed, type set straight on the darker side
- Product promos: crisp UI on a solid colour ground
| Treatment | dark warm grade, left scrim behind text (observed) |
|---|---|
| Crop | cover, subject right of centre (observed) |
Homepage photography is cinematic and warm: real people at work with Adobe apps on screen (an editor at a desk, a creator at a monitor), shot in dim interiors, then full-bleed with type on top. Product images are bright screenshots on colour.
Not published: Adobe does not publish a photography guide publicly.
Source: adobe.com
Motion
button colour changes, carousel width changes, arrow nudges; reveals use the same curve on scroll-driven timelines
Motion adds meaning and personality without slowing down tools.
Full spec
- Linear motion for forward progress
- Diagonal motion for leaving context
- Clockwise for indeterminate loading
- Press scales down
- Respect reduced-motion settings over large areas
| Ease (observed) | cubic-bezier(0.42, 0, 0, 1) |
|---|---|
| State change (observed) | 300ms |
| Fade (observed) | 500ms |
Spectrum: motion is purposeful, intuitive and seamless; directional (linear for progress, diagonal for a context switch, clockwise for loading) and interaction motion (buttons scale down when pressed). Spectrum 2 motion is still being written. The homepage runs scroll-driven reveals and uses cubic-bezier(0.42, 0, 0, 1) at 0.3s for state changes.
Not published: durations and easing curves in Spectrum 2.
Source: spectrum.adobe.com/foundations/behavior/motionadobe.com
Interface & layout
The page, band by band
Everything you need
Explore what's new
Three promo cards
Tools that work for you
Product grid
Footer
Buttons
Full spec
Spectrum spaces with a geometric token scale (1 to 80px) and a rounding scale (4, 8, 10, 16px, full) on a Major Second ratio. The homepage uses a 1200px container with 120px margins, 8px gaps between cards and 128px above headed sections.
Measured from spectrum.adobe.com's Brand law from Spectrum (Adobe's public design system) and Adobe's trademark page; page anatomy measured on adobe.com on 2026-10-30 at 1440 and 390..
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 120px | 24px |
| Section padding | 128px | 40px |
| Hero text width | max 484px, centered | full width |
| Card gap | 8px | 8px |
| Navigation | 80px | 80px |
Type, at size
Hero H1
Adobe Clean Display Black · 80px (phone 40) · line 0.95 · tracking -1.6px · weight 800
Section H2, testimonial quote
Adobe Clean Display Black · 56px (phone 32) · line 1 · tracking -1.12px · weight 800
Card and promo title
Adobe Clean Display Black · 24px (phone 18) · line 1 · tracking -0.96px · weight 800
Lead
Adobe Clean (Adobe Clean Spectrum VF in product) · 20px (phone 16) · line 1.2 · weight 400
Body, card line, footer link
Adobe Clean (Adobe Clean Spectrum VF in product) · 16px · line 1.25 · weight 400
Eyebrow, card title (carousel), footer heading, attribution name
Adobe Clean (Adobe Clean Spectrum VF in product) · 16px · line 1.25 · tracking -0.2px · weight 700
Nav link, button label, text link, category card label
Adobe Clean (Adobe Clean Spectrum VF in product) · 14px · line 1.2857 · weight 700
Legal row
Adobe Clean (Adobe Clean Spectrum VF in product) · 12px · line 1.3333 · weight 700
- Motion
- Purposeful, intuitive, seamless (Spectrum). Homepage eases cubic-bezier(0.42, 0, 0, 1) for buttons, cards and reveals, 0.3s for state changes, 0.5s for fades; many reveals are scroll-driven
- Buttons
- pill
Page anatomy
How Adobe’s own landing pages are built, observed on adobe.com, 2026-10-30. The full measurements are in spec.md.
- Navigation
- Desktop: an 80px bar laid transparently over the hero video: white Adobe wordmark at left, six menu labels (five with a small chevron), then at the right a 9-dot app-switcher icon and a white pill Sign in button. Phone: hamburger, the white Adobe "A" mark, and at the right a colorful AI-assistant round icon, the 9-dot icon and the white Sign in pill.
- Hero
- A full-bleed 1440x900 video stage (an editor at a desk with a monitor showing Photoshop and a red running woman) darkened on the left, a white left-aligned text column (eyebrow, 2-line 80px Black headline, 20px lead, bold 20px offer line, white pill CTA), and along the bottom a row of five small category cards plus a round next arrow. The white page sheet with 32px rounded top corners starts at y 868, overlapping the bottom 32px of the stage.
- Everything you need (intro + elastic carousel)
- White sheet with 32px rounded top corners sliding over the hero; centred 56px Black headline and a 20px sentence; then a full-bleed row of five tall light-grey cards, each a category label, a portrait video still and a title + line.
- Explore what's new (header + wide promo)
- Centred eyebrow, 56px headline and 20px line, then a 1200px-wide rounded photo promo with a product badge, and its title + line at bottom-left and a text link at bottom-right.
- Three promo cards
- Three equal promo cards in a row, each a 4:3 rounded image with a product badge, a 24px Black title, a grey line and a chevron link.
- Customer testimonial carousel
- A 1200x670 rounded photo slide centred with slivers of the previous and next slides at both edges; a 56px white Black quote over the dark photo, the person's name and role, and a white pill button; three dots at the bottom.
- Adobe News
- Three news teasers in columns under a small "Adobe News" label with an Adobe A tile; the white sheet then ends with 32px rounded bottom corners over the next dark band.
- Tools that work for you (photo band)
- Full-bleed dark interior photo (a desk with a monitor showing a red "Film Festival" poster in Photoshop, a lamp, a laptop) with a centred white 56px headline, a 20px line and an outline white pill button near the top.
- Product grid (black)
- Nine dark product cards on black, 3x3: a 32px app tile top-left, the product name in 24px white Black and a grey line at the bottom of each card.
- Footer
- Black footer: six link columns with bold headings, a "Featured products" row with small app icons, a 12px legal row with region picker and four social icons, and a giant white Adobe wordmark cropped by the bottom and both sides of the page.
Source: spectrum.adobe.com/foundations/layout-and-structure/spacing/layout-spacingspectrum.adobe.com/foundations/styles/object-styles/roundinggithub.com/adobe/spectrum-design-data/blob/main/packages/tokens/src/layout.jsonadobe.com
In use
Full spec
How our engine applies Adobe's system to each format. Our recipe from their rules and their homepage, not something Adobe publishes. Level = how much product colour and photography the format carries (0 plain, 5 full-bleed).
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Landing page | Build it the way adobe.com is built (kit.spec.page, homepage voice): full-bleed dark photo hero with a white 80px Black headline ending in a period, a white pill CTA and small glass category cards; then a white sheet with 32px rounded corners carrying centred 56px headings, 16px-radius cards with 8px gaps and 24px Black card titles; a dark photo band and a black card grid; black footer with a giant white wordmark. Chrome only black and white; colour from photos and product tiles. | which sections and how many cards; the hero can be a still photo | |
| Deck | Black or white slides, 56px+ Black sentence-case headline with a period, one photo full-bleed per section slide, pill-shaped labels | product tiles as section markers | |
| Proposal | White sheet, 32px Black headings, 16px-radius cards, plain instructive tone, a dark full-bleed opener | a customer quote slide on a dark photo | |
| Social | Full-bleed work or photo, white Black headline, small white pill | product tile in a corner | |
| White body, black Black headline, one white-on-black pill CTA | one hero image |
Ads
Rules
Do
- Don't make your own illustrations, colours, gradients or logos: request them
- Product tile colours never change on dark
- Sentence case; no ampersands; no all-caps emphasis
- Rounded corners throughout
- Gradients only with strategic intent, never distracting
- Underline only for links
- Black weight only for branded headings at 18px+
- Respect reduced motion
Don’t
- Adobe logos or product icons in your own logo
- Adobe trademarks in Adobe's stylized form
- third-party illustration assets
Source: spectrum.adobe.com/foundations/visual-language/brandspectrum.adobe.com/page/grammar-and-mechanicsspectrum.adobe.com/foundations/styles/object-styles/roundingspectrum.adobe.com/foundations/typography/typography-systemadobe.com/legal/permissions/trademarks.html
Steal this kit
Your name and logo, Adobe’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What Adobe doesn’t publish
- Adobe red's hex is not printed on a public Spectrum page: #EB1000 is read from Adobe's own SVG files on adobe.com.
- Corporate logo construction, clear space and minimum size: not published publicly.
- A marketing voice or photography guide: not published; the homepage voice is observed.
- Spectrum 2 motion durations and easing: not published (motion is "still being developed"); homepage values are observed.
- Spectrum 2 voice-and-tone and expression pages are empty publicly; the Spectrum 1 pages (spectrum.adobe.com/page/...) still hold voice guidance.
- Colour proportions: not published.
- Icon grid sizes: shown only as images on the public page.
- The Experience Cloud "Setup and Configuration" swatch is labelled #DEDEF9 but renders indigo: a slip on Adobe's page.
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-30. Not affiliated with Adobe.