Adobe
A creative enterprise platform anchored in Adobe's iconic red (#FA0F00) against near-black surfaces (#1B1B1B) in Creative Cloud applications, with white and light gray for web and marketing. Adobe Spectrum, their comprehensive design system, uses a token-based approach with semantic color roles, precise 8px spacing, and a clean sans-serif stack (Source Sans Pro — their own creation). The visual language spans from the dark, focused professional tools (Photoshop, Premiere) to the marketing site's bright, aspirational photography-forward pages. Red is used as a brand signature, not as a warning — it means creativity and power.
Color Tokens
1. Visual Theme & Atmosphere
Adobe operates at two registers: the dark, tool-focused Creative Cloud apps and the bright, marketing-forward website. Both contexts share the red signature — though in apps it appears as the product icon accent, while on the marketing site it's the CTA button. Spectrum, Adobe's design system, is one of the most comprehensive in the industry — built to support 30+ products across light and dark contexts with full accessibility compliance.
2. Color System
Marketing/Web (light):
- Canvas white, light gray surfaces (#F5F5F5)
- Red (#FA0F00) on primary buttons, logo, key headlines
- Blue (#0265DC) for text links and secondary actions
Creative Apps (dark):
- Near-black canvas (#1B1B1B) — the familiar creative professional workspace
- Dark surface layers (#252525, #303030) for panels and toolbars
- Light ink (#EBEBEB) for legible text in dark environments
- Product accent colors by app: Photoshop blue, Illustrator orange, Premiere violet
3. Typography
Adobe Clean is the company's custom typeface, refined from Source Sans Pro (which Adobe designed and open-sourced). Clean, humanist grotesque, purpose-built for UI legibility and marketing impact. 700 weight for display, 400 for body. Spectrum tokens specify every typographic use case with rem values mapped to a 16px base.
4. Components & Patterns
- Tool panels: Dark, icon-dense, collapsible — the classic Photoshop sidebar paradigm
- Creative app buttons: Small, subtle, icon-led in app contexts; large and red in marketing
- Product cards: Product color accent on header, app icon, one-line description
- CC subscription table: Feature comparison grid, tier columns, checkmark matrix
- Spectrum components: Detailed picker, dialog, menu, badge — all token-driven
5. Spacing & Layout
Spectrum base unit is 8px. Creative apps use dense panel layouts (minimum 32px panels). Marketing uses wide 1440px layouts with generous section spacing. Documentation follows a two-column layout with sticky sidebar.
6. Motion & Interaction
Creative apps use fast, precise interactions — tool selection is instant, panels dock with slide animation at 130ms. Marketing has more elaborate scroll-triggered reveals. The Spectrum motion spec defines distinct easing for enter/exit/move events separately.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for