# Adobe: brand book and build spec

Adobe runs two systems that meet on adobe.com: Spectrum, its public product design system (colour, type, icons, motion, voice), and a marketing homepage built as a dark cinematic stage with a white sheet riding over it. The constants are black and white, Adobe Clean in a heavy Black display cut, and the product app tiles as the only colour.

From unfairly.ai/brand-guidelines/adobe, checked 2026-10-30. Unofficial study; not affiliated with Adobe.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Adobe lets the work be the colour. The chrome is black, white and one heavy typeface; colour arrives through customer photos, product screenshots and the app tiles, each in its own published pair. Based on: A company that sells creative tools has to show other people's work at its best; a neutral frame and a loud headline do that without competing.

## Purpose

Mission: Empower everyone, everywhere to imagine, create and bring any digital experience to life (paraphrase). (published; https://www.adobe.com/about-adobe.html)

Story: Started in 1982 by John Warnock and Charles Geschke; today Creative Cloud, Acrobat, Firefly and the business products. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Rational |  | published: https://spectrum.adobe.com/page/principles/ |
| Human |  | published: https://spectrum.adobe.com/page/principles/ |
| Focused |  | published: https://spectrum.adobe.com/page/principles/ |
| Collaborative |  | published: https://spectrum.adobe.com/page/principles/ |

## Fixed and flexible

Never changes:
- 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).

## Positioning

- **Statement**: The creative, document and customer-experience tools for everyone, from students to global brands. (observed)
- **Category**: Creative software, document software (PDF) and digital-experience software (observed)
- **Audience**: Students, social influencers, creative professionals, performance marketers and global brands (the homepage names all five) (observed)
- **Problem**: Making anything, from a social clip to a campaign, takes many tools and a lot of time (our reading)
- **Promise**: Everything you need to make anything, faster with AI (observed)
- **Differentiators**: Industry-standard apps (Photoshop, Illustrator, Premiere, Acrobat) in one subscription; AI built into those apps (Firefly, AI Assistant); Reach: 1 billion+ monthly active users and 20,000+ enterprises; Spans individuals, businesses, education and government
- **Alternatives**: not published: Adobe does not name competitors on its homepage

## Messaging

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.
- Everything you need to make anything.
- Tools that work for you.

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Creativity for everyone | The industry-standard creative apps, from students to professionals. | 1 billion+ monthly active users of Adobe products; Creative Cloud: 20+ apps, including Photoshop, Illustrator, Premiere and Acrobat Pro | observed |
| Documents that work | Acrobat turns PDFs into summaries, reports and shared spaces. | Acrobat AI summaries, audio overviews, presentations and visual reports | observed |
| Customer experience at scale | Adobe for Business orchestrates content and customer experiences with AI. | 20,000+ global enterprises | observed |
| AI built into the tools | Firefly and AI assistants inside Photoshop and Acrobat. | Firefly generates and edits images, video, audio and designs with AI models from Adobe and others | 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+)

## Voice

Tone words: rational, human, focused.

Traits:
- Rational, but not Trendy (published)
- Human, but not Cold (published)
- Focused, but not Decorated (published)
- Collaborative, but not Closed (published)
- Bold on the page, but not Loud in colour (observed)

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

Rules a copy check enforces:
- 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)

Their words: create, make, faster, AI, everyone.
Never: & in body copy, ALL CAPS for emphasis, overly opinionated, funny or trendy language, invented product names or concepts.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Adobe red | #EB1000 | accent | The A tile and the red product tiles; Spectrum names it a primary brand colour (hex observed in Adobe's SVGs) |
| Black | #000000 | ink / night | Homepage text, black product band and footer |
| White | #FFFFFF | paper | Page sheet; text and pills on dark |
| Gray 75 | #F3F3F3 | surface | Carousel cards |
| Muted ink | #5C5C5C | ink_muted | Eyebrows and card lines (64% black) |
| Gray 800 | #292929 | icons | Spectrum icons and linear illustrations |
| Spectrum blue 900 | #3B63FB | accent_secondary | Product UI accent, not used on the homepage |
| Photoshop cyan | #31A8FF | product | Ps tile letters |
| Photoshop dark | #001E36 | product | Ps tile |
| Illustrator orange | #FF9A00 | product | Ai tile letters |
| Illustrator dark | #330000 | product | Ai tile |
| After Effects indigo | #9999FF | product | Ae (and Pr on the site) letters |
| After Effects dark | #00005B | product | Ae / Pr tile |
| XD fuchsia | #FF61F6 | product | Xd |
| InDesign magenta | #FF3366 | product | Id |
| Dimension celery | #99E83F | product | Dn |
| Acrobat red | #B30B00 | product | Acrobat tile |
| Document Cloud violet | #584CCC | product | Document Cloud |
| Document Cloud teal | #008CAD | product | Document Cloud |
| Express indigo | #5C5CE0 | product | Adobe Express accent |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Adobe Clean Display Black | Proprietary to Adobe; not available for others | Rethink Sans | "Rethink Sans", "Helvetica Neue", Arial, sans-serif |
| body | Adobe Clean | Proprietary; Adobe's corporate typeface, a family of 10+ faces | Source Sans 3 | "Source Sans 3", "Helvetica Neue", Arial, sans-serif |
| mono | not published on the public page | not published | Source Code Pro | "Source Code Pro", Menlo, monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero H1 | --text-display-xl-* | display | 80px | 40px | 0.95 | -1.6px | 800 |
| Section H2, testimonial quote | --text-display-l-* | display | 56px | 32px | 1 | -1.12px | 800 |
| Card and promo title | --text-title-* | display | 24px | 18px | 1 | -0.96px | 800 |
| Lead | --text-lead-* | body | 20px | 16px | 1.2 | 0px | 400 |
| Body, card line, footer link | --text-body-* | body | 16px | 16px | 1.25 | 0px | 400 |
| Eyebrow, card title (carousel), footer heading, attribution name | --text-body-strong-* | body | 16px | 16px | 1.25 | -0.2px | 700 |
| Nav link, button label, text link, category card label | --text-label-* | body | 14px | 14px | 1.2857 | 0px | 700 |
| Legal row | --text-legal-* | body | 12px | 12px | 1.3333 | 0px | 700 |

## Layout

Measured on https://spectrum.adobe.com: 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..

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 120px | 24px |
| Section padding | 128px | 40px |
| Container max width | 1200px | full |
| Hero text width | max 484px | full |
| Grid columns | 3 | 1 |
| Gutter | 8px | 8px |
| Card gap | 8px | 8px |
| Navigation height | 80px | 80px |

Breakpoints weren't measured. tokens.css switches to the phone values at 600px; that number is our default, not Adobe's.

Homepage bands, top to bottom (observed):
1. Nav
   - Desktop: 80px, links 14px 700 white
   - Phone: hamburger, A mark, AI icon, 9-dot, Sign in
   - Overlays the hero; no fill at rest
2. Hero
   - Desktop: y 0-900, text column x 120, cards y 726
   - Phone: y 0-844, 40px headline, card row scrolls
   - Video still as cover with a left scrim
   - White sheet overlaps the bottom 32px
3. Everything you need
   - Desktop: y 868-1757, radius 32px top, cards 294x583 overflowing both edges
   - Phone: 32px H2, black stacked cards
   - Rounded top corners 32px
4. Explore what's new
   - Desktop: y 1757-2726
   - Phone: 342x257 promo
5. Three promo cards
   - Desktop: y 2726-3296
   - Phone: stacked
6. Testimonials
   - Desktop: y 3296-4094
   - Phone: 342x544 slide
7. Adobe News
   - Desktop: y 4094-4430
   - Phone: stacked
8. Tools that work for you
   - Desktop: y 4398-5436
   - Phone: y 7643-8386
9. Product grid
   - Desktop: y 5436-6353
   - Phone: one column
10. Footer
   - Desktop: y 6353-7568
   - Phone: accordion

## Page anatomy

How Adobe's own landing pages are built, part by part (observed; https://www.adobe.com/, 2026-10-30). A homepage pattern, not a brand law: follow it for landing pages.

**Announcement bar**
- present: false
- note: No announcement bar on the logged-out US homepage at rest (observed 2026-10-30). A cookie banner may appear in some regions; do not build it.

**Navigation**
- summary: 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.
- ground: transparent over the hero video (no fill, no blur, no border) at rest. Animation only: once scrolled it becomes a floating translucent light-grey bar inset 4px with rounded corners and dark text; the builder draws the at-rest transparent state only.
- height: 80px desktop (y 0-80), 80px phone
- border: none
- sticky: position: sticky; top 0 (draw it in normal flow at the top, over the hero: the hero starts at y 0 under it)
- logo: variant Adobe wordmark only (no A tile), white on the hero; px 67x16; position x 24, y 32 (vertically centred in the 80px bar); file logo-wordmark-white.svg; phone the "A" logomark only, white, 20x18 at x 60, y 31, after a 20px hamburger (two horizontal lines) at x 24
- links: count 6; labels Products, Use Cases, Solutions, Quick Actions, Learn & Support, Plans; dropdowns every label except Plans carries an 8x5 chevron-down (1.5px stroke) 4px after the label; size 14px/18px; weight 700; color #FFFFFF over the hero; alignment left group starting right after the logo: label x 115, 208, 308, 404, 528, 671 (about 24px between groups), vertically centred at y 40. Hit these x positions exactly (absolute positioning or fixed widths): each group is label + 4px gap + an 8x5 chevron (1.5px stroke) and the groups are 24px apart; if the stand-in label runs wider, reduce the gap, not the positions
- actions:
  - App switcher: 9-dot grid icon (3x3 dots, 20x20), white, centred x 1315, y 40
  - Sign in: white pill (#FFFFFF fill, 999px radius, 1px solid #FFFFFF), label 14px/18px 700 #000000, 16px side padding, height 40px (min-height; the label is vertically centred), 77x40 at x 1339, y 20; 24px from the right edge
- phone: shows hamburger x 24, A mark x 60, AI-assistant circle (40px white circle holding ai-assistant-glyph.svg at 20px) at x 201, 9-dot icon x 252, Sign in pill 77x40 at x 289 y 20; menu hamburger opens a full menu (not built); cta Sign in pill

**Hero**
- summary: 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.
- desktop: section y 0-900 (viewport height); the next section is a white sheet starting at y 868 with border-radius 32px 32px 0 0, drawn on top of the hero (z-index above); column split text column x 120-604 (484px; headline box 662px wide); media fills the whole stage behind it; vertical anchors eyebrow "Creative Cloud" top y 144; H1 top y 180, 2 lines ("Create at the" / "highest level."), bottom y 332; lead top y 348 (3 lines, 484px max); offer line top y 452 (2 lines, bold); CTA top y 564 (118x40); category cards top y 726, bottom y 820; text max width H1 box 662px (it wraps to 2 lines at 80px because of the explicit line break after "the"); lead and offer 484px; media PLACE THE IMAGE hero-1-creative-cloud.jpg (2880x1620 still from the hero video) as an absolutely positioned cover layer inset 0, object-fit cover, object-position center. Over it a left-to-right scrim: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 75%) (inferred from the rendered darkening; the site bakes it into the video grade); cta size 118x40; next button 40px circle, rgba(0,0,0,0.44) fill with inset 0 0 0 1px rgba(255,255,255,0.11), white 8px right-pointing triangle centred; x 1279, y 752 (25px after the last card, vertically centred on the card row)
- phone: order nav, eyebrow, H1, lead, offer, CTA, then (lower on the photo) a round pause button at x 24 and a square next-slide button at the right, then the category-card row that scrolls horizontally (first card white, second dark); alignment left, 24px gutter; sizes stage 390x844; eyebrow 16px/20px 700 at y 91; H1 40px/40px Black (stand-in Rethink Sans 800), 2 lines ("Create at the" / "highest level."), y 121-201, 238px wide box; lead 16px/20px 3 lines at y 210; offer 16px/20px 700 2 lines at y 276; CTA 118x40 at y 344; card row top y 718, cards 46px tall (icon + label inline), first 206px wide white; media PLACE THE IMAGE hero-1-phone.jpg (750x1333, the phone crop: a tablet on a wooden desk seen from above) as cover inset 0; controls two 40px controls on the photo at y 638: a round pause button (rgba(0,0,0,0.44), white pause bars) at x 24 and a rounded-square (radius 8px) next button with a white arrow-to-bar icon at x 326
- at rest: Slide 1 of 5 (Creative Cloud) shown, carousel paused. The other slides (Firefly, Acrobat, Adobe for Business, Education) sit off-canvas to the right and are not drawn. The first category card ("Creativity and design") is the active one: white fill, black label. Headline fully visible (the site animates it in: animation only).
- type: eyebrow 16px/20px Adobe Clean 700, tracking -0.2px, #FFFFFF; H1 80px/76px Adobe Clean Display Black (stand-in Rethink Sans 800), tracking -1.6px (-0.02em) with the stand-in Rethink Sans 800, which reproduces Adobe's measured line widths of 411px and 431px (Adobe Clean Display Black itself is set at -3.2px), #FFFFFF; lead 20px/24px 400 #FFFFFF; offer 20px/24px 700 #FFFFFF with "See terms" 400 underlined; the offer line is lead-sized (20px/24px) at weight 700, not a separate token
- cta: One CTA only: "Free trial", white pill (#FFFFFF fill, 2px solid #FFFFFF border, radius 999px), label 14px/18px 700 #000000, 118x40 (padding 0 24px)
- cards: Five category cards, each 220x94, gap 8px, x 120, 348, 577, 805, 1034; radius 8px; padding 12px 12px 16px; an 18px product icon top-left, the label bottom-left 14px/18px 700, a 6x10 chevron-right at the bottom-right. Card 1 active: #FFFFFF fill, #000000 label. Cards 2-5: rgba(0,0,0,0.44) fill (renders about #383838 over the photo) with inset 0 0 0 1px rgba(255,255,255,0.11), #FFFFFF label. Then a 40px round button rgba(0,0,0,0.44) with a white 8px play/next triangle at x 1279, y 752. Labels and icons in order: Creativity and design (Creative Cloud rainbow tile), Content creation (Firefly red tile "Fi"), PDF and document essentials (Acrobat red tile), Adobe for Business (Adobe red "A" tile), Students and teachers (Creative Cloud tile). ACTIVE-CARD PROGRESS RULE: the active (white) card carries the autoplay progress bar: a 3px #EB1000 bar along its bottom edge, left 0, bottom 0, width 85% at rest (it grows with the slide timer: animation only), clipped by the 8px corner radius. "PDF and document essentials" wraps to 2 lines ("PDF and document / essentials") inside the 196px label column; the other labels sit on one line at the bottom.
- proof: none in the hero
- copy: eyebrow Creative Cloud; h1 Create at the / highest level.; lead 3 lines at 484px: it names Photoshop, Illustrator, Premiere "and much more", then one sentence about working with the tools behind iconic creative content; offer 2 lines, bold, + underlined "See terms" (regular weight); cta Free trial

**Everything you need (intro + elastic carousel)**
- summary: 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.
- ground: #FFFFFF
- desktop: band y 868-1757; border-radius 32px 32px 0 0; padding-top 128px; h2 "Everything you need to make anything." 56px/56px Display Black 800, tracking -1.12px (-0.02em) with Rethink Sans (Adobe sets -1.68px in its own face; -1.12px reproduces its 903px line), #000000, centred, one line, top y 996 (903px wide); lead 20px/24px 400 #000000, centred, max-width 680px, 3 lines, top y 1060. Copy: one sentence naming who it is for: students, social influencers, creative professionals, performance marketers and global brands, and that Adobe has the apps to make it happen; cards Five cards, each 294x583, #F3F3F3, radius 16px, gap 8px; the row (1502px) is centred and overflows the 1440 viewport by 31px on both sides (card 1 x -31, card 5 x 1177), top y 1166. Inside each card: 24px icon at (24, 24) with the 14px/18px 700 label at x+64 on the same row; media 294x394 (full card width) at y+72, radius 16px, object-fit cover; title 16px/20px 700 #000000 at (24, 495), width 246; line 16px/20px 400 #000000, 2 lines, below the title at +24
- phone: band starts at y 821 (the sheet overlaps the 844px hero by 23px, radius 16px 16px 0 0 on phone); static height 3204px (header 218 + 5 cards x 583 + 4 x 8 gaps + 39px bottom). The live site adds about 650px of sticky-scroll runway: DO NOT add it; every later phone y below is given as a height, not an absolute y; h2 32px/32px, stand-in tracking -0.32px, centred, exactly 2 lines with a forced break: "Everything you need" / "to make anything.", top y 862; lead 16px/20px centred, 4 lines, 342px; cards Black (#000000) cards, radius 16px, 366px wide at x 12 (12px side margins: they read as near full-bleed canvases), 583px tall; header row (24px icon + white 14px/18px 700 label + a 24px white circle with a black chevron at the right, 24px inset), the media full card width below it, then the white title + line. On the site they pin and stack as you scroll (animation only): at rest draw them one after another with 8px gaps
- anatomy:
  - Section heading is centred, everything else in the page is left-aligned
  - Cards in order: Creativity and design / "Create with the top tools." / "Do it all with industry-leading apps for design, photo, video, and creative AI."; Content creation / "Generate stunning content easily." / "Quickly create and edit images, video, and audio with creative AI."; PDF and document essentials / "Do it all in less time." / "Create, edit, and share PDFs. Make edits and create presentations with AI."; Adobe for Business / "Orchestrate customer experiences." / "Deliver business impact, move faster, and personalize at scale."; Students and teachers / "Students and teachers save big." / "Save a bundle on our biggest bundle of top industry creative tools."
  - Card titles are truncated with an ellipsis in the 246px column when too long (as observed: "Create with the top tools." fits; longer titles clip)
  - Media: card-1-creativity.jpg (red runner), card-2-content.jpg (man in red suit in a green elevator door among flowers), card-3-pdf.jpg (green document with large vertical type), card-4-business.jpg (pump bottle held in a hand on pink), card-5-students.jpg (orange and black geometric artwork)
- components:
  - carousel_card

**Explore what's new (header + wide promo)**
- summary: 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.
- ground: #FFFFFF
- desktop: band y 1757-2726; header padding-top 128px; eyebrow "Features and Releases" 16px/20px 700 rgba(0,0,0,0.64) (#5C5C5C), centred, top y 1886; h2 "Explore what's new." 56px/56px Black 800 -1.12px (stand-in tracking), centred, top y 1914; lead "Discover the latest product features from Adobe." 20px/24px centred, top y 1978; promo As it is seen in view, the image is scaled up slightly beyond the container: 1238x562 at x 101-1339, top y 2026, radius 16px, PLACE whatsnew-wide-premiere.jpg cover (the DOM box is 1200x545 at x 120; the scroll animation grows it ~3% and that is the state people see). A 24px Premiere tile (#00005B ground, #9999FF "Pr") at (16, 16) inside the image. The caption row stays inset at x 136; caption title "Like a studio in your pocket." 24px/24px Black (stand-in Rethink Sans 800) -0.96px #000000 at x 136, top y 2595; line 16px/20px 400 #5C5C5C, 2 lines, 487px wide, y 2623; link "Get free app" 14px/18px 700 #000000 + 6px chevron-right, right-aligned ending at x 1304, top y 2598. The 2-line line under "Like a studio in your pocket." is about making every edit right with the free mobile app for social videos
- phone: band height 591px; eyebrow 16px/20px centred, y 4712; h2 32px/32px centred, one line, y 4740; lead 16px/20px centred, 2 lines; promo image 342x257 at x 24 (PLACE whatsnew-premiere-phone.jpg), radius 16px; title 18px/20px Black (stand-in Rethink Sans 800) -0.2px at x 40; line 16px/20px #5C5C5C; link "Get free app" below the line (not right-aligned)
- anatomy:
  - The wide promo image has a large white rounded-rectangle frame drawn inside the photo (part of the artwork, not CSS)
  - Caption row sits 16px below the image, inset 16px from the image edge (x 136)
- components:
  - promo_card
  - text_link_chevron

**Three promo cards**
- summary: 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.
- ground: #FFFFFF
- desktop: band y 2726-3296; cards 3 cards, image 395x296 at x 120, 523, 925 (8px gaps), top y 2727, radius 16px, object-fit cover; 24px product badge at (16, 16) inside the image; title 24px/24px Black (stand-in Rethink Sans 800) -0.96px #000000 at x+16, top y 3039 (1-2 lines, 363px wide); line 16px/20px #5C5C5C; link 14px/18px 700 #000000 + chevron 16px below the line; content 1 Acrobat badge (red tile, white Acrobat ribbon) / whatsnew-acrobat.jpg / "Clear up complex info with Acrobat." / "Understand what matters from your documents, with AI summaries, audio overviews, insightful presentations, and interactive, visual reports." / Explore Acrobat. 2 Adobe red A badge / whatsnew-brand-visibility.jpg / "Turn AI signals into business impact with Adobe Brand Visibility." / "Get the intelligence and tools to win customers in AI searches." / Learn more. 3 Photoshop badge / whatsnew-photoshop.jpg / "Change only what you want." / "Photoshop AI Assistant edits what you ask. Everything else stays." / Try AI Assistant; gaps image bottom to title 16px; title to line 4px; line to link 16px
- phone: band height 1315px; cards stacked, image 342x257 at x 24 with 24px gaps between cards, title 18px/20px Black (stand-in Rethink Sans 800) at x 40, line 16px/20px, link below
- anatomy:
  - At rest all three images are top-aligned (the site staggers them with a scroll parallax: animation only)
  - Images are product screenshots on colour: a black ground with a blue report UI (Acrobat), a blue resort ad with floating "mentions" chips (Brand Visibility), two photos of friends with an AI Assistant chip (Photoshop)
- components:
  - promo_card
  - text_link_chevron

**Customer testimonial carousel**
- summary: 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.
- ground: #FFFFFF
- desktop: band y 3296-4094; slide active slide x 120-1320, top y 3296, 1200x670, radius 16px, PLACE testimonial-antoni-sendra.jpg cover (man with glasses at a desk, dark warm grade); previous slide (testimonial-michelle-phan.jpg) ends at x 112 and the next (testimonial-angi-ciccarelli.jpg) starts at x 1328: 8px gaps, each sliver 112px visible; quote "Creative Cloud lets me create effortlessly and allows me to focus on what's important." 56px/56px Black, tracking -1.12px (stand-in), #FFFFFF, at x 200 top y 3435, in exactly 5 lines with these breaks: "Creative Cloud / lets me create / effortlessly and / allows me to focus on / what's important." (force them with <br>; the column is 512px wide). The opening quote mark hangs outside the column at x 181; attribution Antoni Sendra 16px/20px 700 #FFFFFF at y 3723; Filmmaker 16px/20px 400 #FFFFFF at y 3743; button "See all plans" white pill 133x40 at x 200, y 3787 (14px/18px 700 #000000); dots three 6px dots centred at the bottom of the slide (y ~3946): active #FFFFFF, others rgba(255,255,255,0.5); darkening The photo is subdued so the white quote dominates: over the image draw linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.2) 100%) plus a bottom shade linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%) (inferred from the rendered page: the shelves, window and skin read dark, nothing near white except the type)
- phone: band height 582px; slide 342x544 at x 24, radius 16px, PLACE testimonial-antoni-sendra-phone.jpg; neighbours peek 8px away at both edges; quote 32px/32px Black (stand-in Rethink Sans 800) -0.32px (stand-in) white, 294px wide, bottom-anchored (top y 6824); same breaks where they fit, darkening as desktop; attribution name 700 / role 400 16px/20px; button See all plans pill 133x40
- anatomy:
  - Quote text is bottom-left aligned inside the slide with 80px left padding on desktop
  - No quote card or box: type sits straight on the darkened photo
- components:
  - button_primary_on_dark

**Adobe News**
- summary: 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.
- ground: #FFFFFF
- desktop: band y 4094-4430; the white sheet ends at y 4430 with border-radius 0 0 32px 32px (its rounded corners show over the photo band behind it); label 24px Adobe A tile (#EB1000 square, radius 5px, white A) at x 144, y 4093 + "Adobe News" 16px/20px 700 #5C5C5C at x 184; columns 3 columns 347px wide at x 144, 547, 949; title 24px/24px Black (stand-in Rethink Sans 800) -0.96px #000000 top y 4141; line 16px/20px #5C5C5C 2-3 lines at y 4197 (or 4173 under a one-line title); "Read story" 14px/18px 700 + chevron, all three aligned at y 4283; items 1 "Adobe brings docs into focus like never before." / "New features in Adobe Acrobat give customers the power to turn documents into visual reports and presentations that are easier to understand." 2 "Introducing Adobe Brand Visibility." / "Get to know Adobe's new unified GEO platform for enterprise brands." 3 "Explore new ways to share information with PDF Spaces." / "Today in Acrobat, we're introducing a new way to share information, one designed to engage, inform and move the people who matter most." (lines clamp to 3 with an ellipsis)
- phone: band height 602px; the sheet ends with radius 0 0 16px 16px; label x 40; columns stacked at x 40 (310px), title 18px/20px Black (stand-in Rethink Sans 800), 32px between items
- anatomy:
  - No images: type only
  - The white sheet's rounded bottom corners are visible against the photo band (radius 32px desktop, 16px phone)
- components:
  - text_link_chevron

**Tools that work for you (photo band)**
- summary: 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.
- ground: photo-dark
- desktop: band The photo layer is a 1440x1150 box from y 4293 to 5443: it starts 137px BEHIND the white sheet, whose rounded bottom edge is at y 4430. PLACE tools-desk-scene.jpg with object-fit cover, object-position 50% 50% (scaled to 1150px tall = 2806px wide, centre-cropped: the monitor is large and centred, top edge near y 4740). Darkening: the room above and around the monitor reads near black, so layer linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.15) 62%, rgba(0,0,0,0) 72%, #000000 100%) over the photo (inferred from the rendered page: only the monitor, the lamp and the laptop emerge from the dark). H2 top about 100px below the sheet edge optically (cap height starts ~111px below; place the text box top at y 4530); h2 "Tools that work for you." 56px/56px Black 800 -1.12px (stand-in tracking) #FFFFFF centred top y 4541; lead "Bring any idea to life with products for creators, businesses, and beyond." 20px/24px #FFFFFF centred y 4605; button "See all products" outline pill: transparent fill, 2px solid #FFFFFF, label 14px/18px 700 #FFFFFF, 157x40, centred, y 4653
- phone: band height 743px; the photo box starts 118px under the sheet's rounded bottom (it overlaps the News sheet by 118px) and is 390x743, cover; h2 32px/32px centred one line y 7814; lead 16px/20px centred 2 lines; button See all products 157x40 centred y 7918; photo same image, cover, 390x743
- anatomy:
  - Photo is dark and warm; the monitor in the middle carries the colour
  - The band runs straight into the black product grid below with no edge
- components:
  - button_secondary_on_dark

**Product grid (black)**
- summary: 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.
- ground: #000000
- desktop: band y 5436-6353; cards 3 columns x 3 rows, each 395x300, x 120, 523, 925, rows top y 5437, 5745, 6053 (8px gaps), fill rgba(255,255,255,0.08) = #141414 on black, radius 16px, padding 24px; 32px app tile at (24, 24); name 24px/24px Black (stand-in Rethink Sans 800) -0.96px #FFFFFF bottom-anchored (top y +204 for a 2-line description, +232 for one line); description 16px/20px #FFFFFF at opacity 0.5 (renders #8A8A8A), max 347px, 24px from the bottom; order Firefly (Fi red tile) "Create and enhance images, video, and audio with AI-powered tools."; Adobe Acrobat (Acrobat red tile) "The complete AI-powered PDF and design solution for business workflows."; Photoshop (Ps tile) "Create gorgeous images, rich graphics, and incredible art."; Premiere (Pr tile) "Create everything from social clips to feature films with the leading video editor."; Creative Cloud (rainbow CC tile) "Get 20+ apps, including Photoshop, Illustrator, Premiere, and Acrobat Pro."; GenStudio (Adobe red A tile) "Scale your content supply chain."; Business Products (Adobe red A tile) "Adobe solutions integrate our best-in-class products to help you tackle pressing business challenges."; Illustrator (Ai tile) "Design precision vector graphics—from branding to illustration—that stay sharp, scalable, and fully editable at any size."; All products (a white 24px arrow-right line icon, no tile) "See all Adobe products"
- phone: band height 2225px (padding 24px; 9 cards x 240 + 8 x 8 gaps); cards one column, 342x240 at x 24 with 8px gaps, padding 24px, name 18px/20px Black (stand-in Rethink Sans 800), description 16px/20px #8A8A8A
- anatomy:
  - At rest the card is a flat dark tile: its product artwork only fades in on hover (animation only; do not draw any image inside the cards)
  - The grid scrolls with a staggered parallax on the site (animation only); at rest the rows align
  - App tiles are rounded squares, radius about 22% of the tile
- components:
  - product_card_dark
  - app_tile

**Footer**
- summary: 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.
- ground: #000000
- anatomy:
  - Band y 6353-7568, padding-top 160px; container x 120-1320
  - Six columns at x 120, 321, 523, 724, 925, 1127 (201px pitch, 120px column width for headings). Headings 16px/20px 700 #FFFFFF (full opacity), bottom-aligned on one baseline (multi-line headings grow upward; their last line ends at y 6553). Links 16px/20px 400 #FFFFFF at opacity 0.6 (renders #999999), one per 28px row, first row top y 6577
  - Column 1 "For individuals & small business": Creative AI, Photography, Design and illustration, Video and animation, PDF, 3D, Elements Family, Stock images and video, View all products
  - Column 2 "For medium & large business": Customer engagement, Content supply chain, Brand visibility, B2B CX orchestration, View all products
  - Column 3 "For organizations": Education, Nonprofits, Government, Startups
  - Column 4 "Support": Help Center, Download and install, Adobe Community, Adobe Learn, Medium and large business support (wraps to 2 lines)
  - Column 5 "Contact": Chat with sales, Request information
  - Column 6 "Adobe": Log into your account, About, Careers, Events, Newsroom, Corporate responsibility, Investor Relations, Supply chain, Trust Center, Integrity, Adobe for All, Adobe Blog, Privacy, Terms of Use, Cookie preferences
  - "Featured products" 16px/20px 700 at y 7057; then a row at y 7101: 16px icon + 16px/20px 700 label at opacity 0.6 like the links (inferred from the render: they recede), 32px between items: Acrobat Reader, Firefly, Adobe Express, Photoshop (icons: footer-icon-acrobat-reader.png, footer-icon-firefly.png, footer-icon-express.png, footer-icon-photoshop.png)
  - Legal row y 7171, 12px/16px 700 #FFFFFF at opacity 0.6 (renders #999999): "Change region" + caret, then "© 2026 Adobe Inc. Adobe. All rights reserved.", "Do not sell or share my personal information", an AdChoices triangle + "AdChoices", "Site Map", and a tiny Adobe A + "Adobe" mark; at the right four 20px social icons in white at opacity 0.6 (inferred) (Facebook, Instagram, X, LinkedIn) ending at x 1320
  - Giant wordmark (static, uncut: the full white A + Adobe letters): PLACE footer-logo-full.svg (white Adobe "A" mark + wordmark), 1496x339 at x -28, top y 7229, so it bleeds 28px off both sides and is cut by the page bottom (only the top ~339px shown, the page ends at y 7568)
  - No address or phone number is printed on the homepage footer
- phone: Accordion: seven rows (the six headings + Featured products), each 16px/20px 700 white with a chevron-down at the right and a 1px rgba(255,255,255,0.2) divider, 69px pitch, starting y 10666 at x 32; then Change region + four social icons on one row, the small Adobe mark, copyright, Do not sell..., AdChoices and Site Map stacked in 12px/16px 700; then the giant wordmark 446x101 at x -28 cut by the bottom edge

**On dark grounds**
- secondary button: transparent fill, 2px solid #FFFFFF, white 14px/18px 700 label, 999px radius
- primary button: white fill, black label, 999px radius
- link: #FFFFFF 700 with chevron
- muted text: white at opacity 0.5-0.6: #8A8A8A on cards, #999999 on black
- hairline: rgba(255,255,255,0.11) inset ring on glass cards; rgba(255,255,255,0.2) footer dividers on phone
- logo variant: white wordmark

## Components

- **button primary on dark** (observed): fill #FFFFFF, text #000000, border 2px solid #FFFFFF, radius 999, height 40, padding 0 24px (label 14px/18px 700), example Free trial 118x40; See all plans 133x40, padding x 24, font size 14, weight 700, face body, ring px 2, ring #FFFFFF
  - hover (our reading): background-color #F3F3F3, border-color #F3F3F3
- **button secondary on dark** (observed): fill none, text #FFFFFF, border 2px solid #FFFFFF, radius 999, height 40, padding 0 24px, example See all products 157x40, padding x 24, font size 14, weight 700, face body, ring px 2, ring #FFFFFF
  - hover (our reading): background-color #FFFFFF, color #000000
- **button signin** (observed): fill #FFFFFF, text #000000, border 1px solid #FFFFFF, radius 999, height 40, padding 0 16px, example Sign in 77x40, padding x 16, font size 14, weight 700, face body
- **text link chevron** (observed): text #000000 on white, #FFFFFF on dark, style 14px/18px 700, no underline, followed 8px later by a 6x10 chevron-right (2px stroke), example Get free app, Explore Acrobat, Read story, hover the chevron slides 4px right (transform 0.3s cubic-bezier(0.42, 0, 0, 1), observed)
- **hero category card** (observed): size 220x94, radius 8, padding 12px 12px 16px, active #FFFFFF fill, #000000 label, rest rgba(0,0,0,0.44) fill, inset 0 0 0 1px rgba(255,255,255,0.11), white label, backdrop-filter blur(156px), icon 18px app tile top-left, label 14px/18px 700 bottom-left, 2 lines max, chevron at the bottom-right, active progress 3px #EB1000 bar at the bottom edge, 85% wide at rest
- **carousel card** (observed): size 294x583, fill #F3F3F3, radius 16, header 24px icon + 14px/18px 700 label at 24px inset, media 294x394 at y 72, radius 16px, title 16px/20px 700, line 16px/20px 400
- **promo card** (observed): media radius 16, badge 24px app tile at (16,16) inside the image, title 24px/24px Display Black -0.96px, line 16px/20px #5C5C5C, link text_link_chevron
- **product card dark** (observed): size 395x300, fill rgba(255,255,255,0.08) (#141414), radius 16, padding 24, tile 32px app tile top-left, name 24px/24px Display Black white, bottom-anchored, line 16px/20px white at opacity 0.5 (#8A8A8A), hover product artwork fades in behind (opacity 0.5s ease, observed)
- **app tile** (observed): shape rounded square, corner radius about 22% of the side (5px at 24px), content two-letter product abbreviation in the product's light colour on its dark colour (Ps #31A8FF on #001E36, Ai #FF9A00 on #330000, Pr #9999FF on #00005B), or a white glyph on red (#EB1000 Adobe/Firefly, #B30B00 Acrobat), or the multicolour Creative Cloud swirl, files icon-photoshop.svg,icon-illustrator.svg,icon-premiere-pro.svg,icon-firefly-appicon-256.svg,icon-acrobat-pro.svg,icon-experience-cloud-logo.svg,icon-creative-cloud.svg,icon-all-products.svg
- **assistant pill** (observed): size 276x48 desktop, 338x48 phone, fill rgba(250,250,250,0.85), radius 26, shadow 0 4px 12px rgba(0,0,0,0.06), glyph ai-assistant-glyph.svg, text 16px/24px #292929, submit 32px #E9E9E9 circle

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| directional: linear |  |  | forward movement and progress (progress bars, an arrow nudging right on hover) | published |
| directional: diagonal |  |  | a switch of context, like a link out (arrow nudging up-right) | published |
| directional: clockwise |  |  | holding patterns: loading indicators | published |
| interaction: press |  |  | buttons scale down on the down state | published |
| homepage ease | cubic-bezier(0.42, 0, 0, 1) | 300ms | button colour changes, carousel width changes, arrow nudges; reveals use the same curve on scroll-driven timelines | observed |
| homepage fade | ease | 500ms | product-card artwork and text fading in | observed |
| reduced motion |  |  | motion over large areas must respect reduced-motion settings | published |

## Icon tokens

Grid key shapes (published as images, sizes not printed on the public page), stroke 1.5px, aligned to 4 subdivisions of the pixel (published).

## Signature moves

### The Black headline

Where: every homepage headline and card title.
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.
Don't: Never set it light, in title case or in colour.

### White sheet over a dark stage

Where: section transitions.
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.
Don't: No hairlines or gradients between sections.

### Product app tiles

Where: cards, badges, footer.
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.
Don't: Do not recolour, outline or redraw a tile.

### White pill buttons

Where: every CTA.
Do: 40px tall, 999px radius, white with a 14px bold black label, or a 2px white outline on dark.
Don't: No coloured or square buttons on the marketing page.

### Product gradients

Where: product UI: premium and generative-AI moments.
Do: Gradients are placed intentionally, tied to product brand palettes, and never distract from content.
Don't: Do not make your own gradients.

## Messaging: rules

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.

Why it works: One page has to serve a student and a global brand; categories first, products second keeps both oriented.

- Lead with what people make, then name the app
- One promise per headline, one supporting sentence
- Offers are stated plainly with a See terms link
- Proof is customer quotes with name and role

Sources: https://www.adobe.com/, https://www.adobe.com/about-adobe.html

## Voice: rules

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.

Why it works: Adobe's apps are complex; plain, consistent language keeps them usable across dozens of products and languages.

|  |  |
|---|---|
| Voice | rational, human, focused |
| Tone spectrum | motivational, helpful, instructive, reassuring, supportive |
| Most frequent tone | instructive (often) |
| Case | sentence case |
| Person | second |

- 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
- Don't funny, trendy or opinionated copy
- Don't ALL CAPS for emphasis
- Don't new coined concepts

Real examples, to look at on Adobe's own pages (not for reuse):
- Spectrum 2's Voice and tone page is an empty shell publicly; the Spectrum 1 page still carries the guidance: https://spectrum.adobe.com/foundations/content-design/voice-and-tone

Sources: https://spectrum.adobe.com/page/voice-and-tone/, https://spectrum.adobe.com/page/grammar-and-mechanics/, https://spectrum.adobe.com/page/principles/

## Logo: rules

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.

Why it works: The tile system makes every product recognisable at 18px, and the corporate mark rides along as one more tile.

|  |  |
|---|---|
| Clear space | not published |
| Minimum size | not published |
| Site nav | wordmark 67x16, white over the hero (observed) |
| Footer | A + wordmark 1496px wide, cropped (observed) |

- 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

Real examples, to look at on Adobe's own pages (not for reuse):
- Spectrum's Brand page: product logos, app icons and lockups: https://spectrum.adobe.com/foundations/visual-language/brand

Sources: https://spectrum.adobe.com/foundations/visual-language/brand, https://www.adobe.com/legal/permissions/trademarks.html, https://www.adobe.com/

## Color: rules

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.

Why it works: Product colour is how people find their app; keeping the frame neutral keeps those colours meaningful.

|  |  |
|---|---|
| Adobe red | #EB1000 (observed) |
| Ink | #000000 |
| Surface | #F3F3F3 (Spectrum gray-75) |
| Product accent | #3B63FB (Spectrum blue-900) |

- 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

Not published: the hex of Adobe red on a public guideline page (#EB1000 is read from Adobe's own SVGs); colour proportions.

Real examples, to look at on Adobe's own pages (not for reuse):
- Spectrum maps each Creative Cloud brand colour to a Spectrum colour: https://spectrum.adobe.com/foundations/visual-language/brand § Color

Sources: https://spectrum.adobe.com/foundations/visual-language/brand, https://github.com/adobe/spectrum-design-data/blob/main/packages/tokens/src/color-palette.json, https://spectrum.adobe.com/foundations/color/colors, https://www.adobe.com/

## Typography: rules

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.

Why it works: One family, many weights, a predictable scale: hierarchy comes from size, weight and colour, not from extra faces.

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

- 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

Real examples, to look at on Adobe's own pages (not for reuse):
- Spectrum's typography overview: Adobe Clean Spectrum: https://spectrum.adobe.com/foundations/typography/overview

Sources: https://spectrum.adobe.com/foundations/typography/overview, https://spectrum.adobe.com/foundations/typography/typography-system, https://www.adobe.com/

## Graphic elements: rules

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.

Why it works: All four are neutral containers that make product colour and customer work stand out.

|  |  |
|---|---|
| Sheet radius | 32px (observed) |
| Card radius | 16px (observed) |
| Gap | 8px between cards (observed) |

- Rounded everything: no sharp corners
- Cards and media 16px radius, small cards 8px
- Pills for every action
- Tiles carry the only chrome colour

Sources: https://spectrum.adobe.com/foundations/styles/object-styles/rounding, https://www.adobe.com/

## Iconography: rules

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.

Why it works: Adobe apps have dense toolbars; simple consistent metaphors keep them scannable.

|  |  |
|---|---|
| Stroke | 1.5px |
| Colour | gray 800 (#292929 light) |
| Recipe for Steal | Lucide-style outline icons at 1.5px, rounded caps, gray 800 |

- 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

Real examples, to look at on Adobe's own pages (not for reuse):
- Spectrum iconography page: https://spectrum.adobe.com/foundations/icons-and-illustrations/icon-fundamentals

Sources: https://spectrum.adobe.com/foundations/icons-and-illustrations/icon-fundamentals

## Illustration: rules

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.

Why it works: Linear illustrations stay quiet in the UI; gradient ones carry brand expression where it helps.

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

- 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

Real examples, to look at on Adobe's own pages (not for reuse):
- Spectrum illustration page: https://spectrum.adobe.com/foundations/visual-language/illustration

Sources: https://spectrum.adobe.com/foundations/visual-language/illustration, https://spectrum.adobe.com/foundations/icons-and-illustrations/illustration

## Photography: rules

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.

Why it works: It shows the product in use and makes the screen the light source, so the work glows.

|  |  |
|---|---|
| Treatment | dark warm grade, left scrim behind text (observed) |
| Crop | cover, subject right of centre (observed) |

- 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

Not published: Adobe does not publish a photography guide publicly.

Sources: https://www.adobe.com/

## Motion: rules

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.

Why it works: Motion adds meaning and personality without slowing down tools.

|  |  |
|---|---|
| Ease (observed) | cubic-bezier(0.42, 0, 0, 1) |
| State change (observed) | 300ms |
| Fade (observed) | 500ms |

- Linear motion for forward progress
- Diagonal motion for leaving context
- Clockwise for indeterminate loading
- Press scales down
- Respect reduced-motion settings over large areas

Not published: durations and easing curves in Spectrum 2.

Real examples, to look at on Adobe's own pages (not for reuse):
- Spectrum motion page: https://spectrum.adobe.com/foundations/behavior/motion

Sources: https://spectrum.adobe.com/foundations/behavior/motion, https://www.adobe.com/

## Interface and layout: rules

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.

Why it works: Geometric spacing grows with the element, so small and large components both look right.

|  |  |
|---|---|
| Container (observed) | 1200px, 120px margins |
| Card gap (observed) | 8px |
| Spacing tokens | 1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80px |
| Rounding tokens | 3, 4, 5, 6, 7, 8, 9, 10, 16px, full |

- Spacing tokens 2, 4, 8, 16... (geometric)
- Rounding: small 4px, medium 8px, large 10px, extra-large 16px, full for buttons
- Nested corners: outer radius - gap = inner radius
- No sharp corners

Real examples, to look at on Adobe's own pages (not for reuse):
- Spectrum rounding page: https://spectrum.adobe.com/foundations/styles/object-styles/rounding

Sources: https://spectrum.adobe.com/foundations/layout-and-structure/spacing/layout-spacing, https://spectrum.adobe.com/foundations/styles/object-styles/rounding, https://github.com/adobe/spectrum-design-data/blob/main/packages/tokens/src/layout.json, https://www.adobe.com/

## Rules: rules

Adobe's published do's and don'ts, collected from Spectrum and the trademark page.

Why it works: Coherence across hundreds of products depends on few, firm rules.

- 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
- Don't Adobe trademarks in Adobe's stylized form
- Don't third-party illustration assets

Sources: https://spectrum.adobe.com/foundations/visual-language/brand, https://spectrum.adobe.com/page/grammar-and-mechanics/, https://spectrum.adobe.com/foundations/styles/object-styles/rounding, https://spectrum.adobe.com/foundations/typography/typography-system, https://www.adobe.com/legal/permissions/trademarks.html

## By format

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). Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 4 | 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 | 3 | 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 | 2 | 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 | 4 | Full-bleed work or photo, white Black headline, small white pill | product tile in a corner |
| Email | 2 | White body, black Black headline, one white-on-black pill CTA | one hero image |

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Adobe's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

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

Logos and reference images belong to Adobe. Look at them on Adobe's own pages; don't reuse them.