What is Adobe's primary brand color?

Adobe's iconic brand voltage is its signature red, wired into the page CSS as `--feds-color-adobeBrand`. On the corporate marketing surface it appears almost nowhere — once as the wordmark glyph at the top-left and as the brand variable for the Acrobat product card. The marketing chrome's working voltage is a cobalt blue pair: one tone carries the primary CTA pill background and a slightly-darker tone carries the hover state and inline link color. Across the captured page the brand red appears in CSS variables but never in a rendered fill above the fold; the cobalt pair carries 22 total occurrences. The product artwork inside the dark tiles does the chromatic work the brand color would otherwise need to do.

What typeface does Adobe use, and what should I use as a substitute?

Adobe's marketing site runs `Adobe Clean` for every display, heading, body, button, and label surface. The font is a custom proprietary sans-serif from Adobe Fonts (formerly Typekit), with a Trebuchet MS fallback. Display headlines sit at 24-44px in weight 700; body copy at 14-18px in weight 400; emphasis labels at weight 600. There is no second display family or serif moment in the captured chrome. Roboto Mono is declared as the fixed-font fallback but never rendered above the fold. The closest open-source substitute is Source Sans 3 (also an Adobe-designed open-source family) at the same weights; Inter works at the body tier but reads slightly narrower than the proprietary face's wider proportions at the 44px display size.

Why does Adobe use a tile grid instead of a single hero block?

The corporate marketing surface needs to merchandise three product lines simultaneously (Creative Cloud, Document Cloud, Adobe Express) plus enterprise / education / business CTAs, plus the iconic app rail at the bottom. A single voltage hero would have to pick one product to highlight. The 4-up dark-tile grid lets every tile be its own micro-hero — Creative Cloud Pro promo, generative-AI moment, Acrobat link rail, Photoshop AI feature — without any one product compromising the others. The dark charcoal surface unifies them visually while the full-bleed product creatives inside each card supply the chromatic identity each product needs. The grid IS the hero.

What is Adobe's corner-radius philosophy?

Adobe runs a generous-soft radius scale dominated by a single value: `20px` appears 26 times in the captured page, more than 70% of all rendered border-radii. The supporting tiers are sparse: `16px` 3 times for slightly tighter cards, `24px` once on the Creative Cloud promo, `25px` once on the CTA pill, `6px` once on a smaller chip, and full circles at `50%` on three icon buttons. There is no 4px or 8px small-step tier — Adobe deliberately avoids the dev-tools-aesthetic tight rounding. The 20px default gives every dark tile a soft-pillow silhouette that pairs warmly with the saturated product artwork inside.

Can I use this DESIGN.md to build my own creative-software marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Adobe's specific moves: a tile-grid hero rather than a single voltage hero, charcoal cards over a near-white floor, the proprietary display sans equivalent across every tier, 20px corner rounding everywhere, and the cobalt CTA reserved for the single primary action. The token references resolve without invention. You can also reference values directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The one move worth borrowing only if your product line is wide enough to need merchandising is the tile-grid hero — for a single-product brand it would feel underused.

Adobe Design System

Adobe's marketing system is a grid of charcoal cards hosting full-color product creatives — proprietary display sans across every tier, cobalt CTA pill, 20px corner radius.

About Adobe DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source adobe.com

Design & Creative Tools

Adobe's marketing site rejects the single-voltage convention almost every dev-tool brand follows. Where Cloudflare paints the page in orange and Linear leans on a violet-graphite ladder, the above-fold on adobe.com is a 4-up grid of charcoal cards: a Creative Cloud Pro promo tile, a generative-AI tile, an Acrobat link rail, and a Photoshop "New AI models in Generative Fill" card with the actual app artwork bleeding to the edges. The brand voltage — Adobe's famous red — appears only as the wordmark glyph at the top-left and as the brand variable wired into the Acrobat tile. The colored work belongs to the products themselves: Photoshop's magenta-and-cyan, Illustrator's saffron, Premiere's deep violet.

The DESIGN.md file packages the corporate marketing system into a machine-readable spec for React tooling. Inside: 11 color tokens drawn from the structural tier of Adobe's CSS variable system — a charcoal carrying 333 occurrences, a soft gray carrying 193, white-on-cream surface tones, and the two brand cobalts (one for inline link, one for the CTA) used 22 times combined. Eleven typography tokens running `Adobe Clean` — a custom proprietary sans the brand ships from its own foundry — at 12, 14, 16, 18, 22, 24, and 44px in weights 400 (body), 600 (emphasis), and 700 (display and uppercase labels). Eight corner-radius tokens centered on a generous 20px default. 16 component definitions covering the cobalt CTA pill, the charcoal tile, the cream nav, the dark dropdown surface, and the Acrobat brand red.

Feed this file to Claude or Cursor and it reproduces Adobe's specific moves: a tile-grid hero instead of a voltage hero, charcoal cards over a near-white floor, the proprietary display sans across every tier, 20px rounding everywhere, and the cobalt CTA reserved for the single most-important conversion action. The one move worth borrowing is the discipline of letting product artwork carry chromatic work — Adobe never sits the brand red against a competing colored canvas because the page is built to host Photoshop's spectrum, not to compete with it. This is the inverse of single-voltage discipline: a system that gets its color from what it sells.

What makes it distinct

Tile grid as marketing herothe above-fold is a 4-up grid of charcoal cards rather than a single voltage canvas, each card hosting product artwork
Cobalt CTA voltagethe cobalt blue pair is the only saturated chromatic moment in the marketing chrome; the Adobe red is reserved for the wordmark and the Acrobat brand variable
One proprietary sans across every tierdisplay, heading, body, button, label at weights 400 / 600 / 700, no second display family or serif moment
20px default radiusthe dominant rounding (26 of 36 captured radii), giving every dark tile a soft-pillow silhouette
Charcoal-on-cream pairingsurfaces alternate between dark card fills and a near-white floor, with full-color product artwork doing the chromatic work

Live at adobe.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

adobe.com

Explore Adobe

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Adobe design system FAQ

Common questions about Adobe's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Adobe — official site

Adobe's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.