/* ============================================================================= ADOBE — Palette & Design Tokens (single source of truth for the Adobe brand) ============================================================================= Scope : font, color palette and semantic tokens. Loaded : by the Adobe templates (head_extra block). Pairs : component styles (.adobe-*) live in app/static/css/tailwind-input.css under the "ADOBE — Design System components" section. SOURCE OF THE VALUES BELOW Adobe publishes its design system two ways, and both are used here: 1. Brand red — the logo fill. app/static/img/svg-icon/adobe.svg is Adobe's own vector asset and fills with #EB1000. This is the only place the red is allowed to be the loudest pixel. 2. Spectrum 2 — Adobe's current design system (s2.spectrum.adobe.com) and the official @adobe/spectrum-tokens package. The interactive accent, the grey ladder, the surfaces and the semantic colors below are Spectrum 2 tokens: accent (blue-900) #3B63FB link (blue-1000) #274DEA ink (gray-900) #131313 strong (gray-800) #292929 body #2C2C2C muted #686868 surface #F8F8F8 tile #F3F3F3 hairline (gray-300) #DADADA success #05834E error #D73220 promo #F5C700 THE RULE THAT WAS BEING BROKEN Adobe's own guidance is explicit: "Do not use Adobe red as a button or link color — interaction is Spectrum blue, identity is red." The previous stylesheet defined a single --adobe-red: #FA0F00 (the superseded pre-Spectrum-2 red, not the current logo red) and used it for buttons, links, icons and gradients alike. That is why Adobe pages felt heavier than Red Hat and Google Cloud: one saturated hue was doing identity and interaction at the same time. Brand red is now identity-only; anything the visitor can click is Spectrum blue. Icons: official Adobe product icons in app/static/img/svg-icon/adobe_icons/ (the product marks ship in their own official product colors — see section 6). Logo: img/svg-icon/adobe.svg. NEVER hard-code a hex value in .adobe-* component rules; use a token from here. ============================================================================= */ /* --------------------------------------------------------------------------- 1. FONT — Adobe Clean is proprietary and not licensed for use here. Adobe's own open-source typeface family Source Sans (SIL OFL 1.1) is the official substitute and is self-hosted from app/static/fonts/source-sans/. NOTE: the previous rule asked for 'Source Sans Pro', which was never installed in this project, so Adobe pages silently fell back to the operating-system font. The variable face below fixes that. --------------------------------------------------------------------------- */ @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/source-sans/SourceSans3-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/source-sans/SourceSans3-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ------------------------------------------------------------------------- 2. BRAND RED — identity only. Logo, brand mark, identity badges. Never a button background, never a text link. ------------------------------------------------------------------------- */ --adobe-red-10: #fff0ef; --adobe-red-20: #ffd9d6; --adobe-red-30: #ffb3ad; --adobe-red-40: #f56e63; --adobe-red-50: #eb1000; /* ADOBE RED — the logo fill (official asset) */ --adobe-red-60: #c40d00; /* Brand red for TEXT on light (5.5:1 on white) */ --adobe-red-70: #8f0a00; /* ------------------------------------------------------------------------- 3. SPECTRUM 2 ACCENT — everything interactive. ------------------------------------------------------------------------- */ --adobe-blue-10: #eef1ff; --adobe-blue-20: #dfe4ff; /* Tint / icon well */ --adobe-blue-30: #b9c4fd; --adobe-blue-40: #8a9bfc; --adobe-blue-50: #3b63fb; /* SPECTRUM 2 ACCENT (blue-900) — buttons, accents */ --adobe-blue-60: #274dea; /* SPECTRUM 2 LINK (blue-1000) */ --adobe-blue-70: #1c37ad; /* Accent text on tint (8.0:1) */ --adobe-blue-80: #14297d; /* Deep anchor — gradient */ /* ------------------------------------------------------------------------- 4. NEUTRAL LADDER (Spectrum grey, light theme) ------------------------------------------------------------------------- */ --adobe-gray-05: #f8f8f8; /* gray-50 — subtle panel */ --adobe-gray-10: #f3f3f3; /* Product tile / alt section surface */ --adobe-gray-20: #eaeaea; --adobe-gray-30: #dadada; /* gray-300 — hairlines, outline borders */ --adobe-gray-40: #b6b6b6; --adobe-gray-50: #8f8f8f; --adobe-gray-60: #686868; /* Muted / tertiary text (5.6:1 on white) */ --adobe-gray-70: #4b4b4b; --adobe-gray-80: #2c2c2c; /* Body copy */ --adobe-gray-90: #131313; /* Ink — headings, primary text */ --adobe-black: #000000; --adobe-dark-90: #1d1d1d; /* Dark section surface */ --adobe-dark-85: #2c2c2c; --adobe-white: #ffffff; /* ------------------------------------------------------------------------- 5. SEMANTIC — Spectrum 2 tokens ------------------------------------------------------------------------- */ --adobe-success-50: #05834e; --adobe-error-50: #d73220; --adobe-promo-50: #f5c700; /* ------------------------------------------------------------------------- 6. SEMANTIC TOKENS — what components actually consume ------------------------------------------------------------------------- */ --adobe-brand: var(--adobe-red-50); /* Identity only */ --adobe-brand-hover: var(--adobe-red-60); --adobe-brand-text: var(--adobe-red-60); /* Red used as text — sparingly */ --adobe-brand-tint: var(--adobe-red-10); --adobe-brand-tint-text: var(--adobe-red-70); --adobe-action: var(--adobe-blue-50); /* Interactive accent */ --adobe-action-hover: var(--adobe-blue-60); --adobe-action-tint: var(--adobe-blue-20); --adobe-action-tint-text: var(--adobe-blue-70); --adobe-action-strong: var(--adobe-blue-80); --adobe-link: var(--adobe-blue-60); --adobe-link-on-dark: var(--adobe-blue-40); /* Surfaces */ --adobe-surface-light: var(--adobe-white); --adobe-surface-alt: var(--adobe-gray-05); --adobe-surface-tile: var(--adobe-gray-10); --adobe-surface-dark: var(--adobe-dark-90); --adobe-surface-dark-2: var(--adobe-dark-85); /* Text */ --adobe-text-heading: var(--adobe-gray-90); --adobe-text-body: var(--adobe-gray-80); --adobe-text-muted: var(--adobe-gray-60); --adobe-text-light: var(--adobe-white); --adobe-text-on-dark: var(--adobe-white); --adobe-text-on-dark-muted: rgba(255, 255, 255, 0.76); /* Borders */ --adobe-border: var(--adobe-gray-30); --adobe-border-light: var(--adobe-gray-20); --adobe-border-on-dark: rgba(255, 255, 255, 0.14); /* Gradients */ --adobe-gradient-brand: linear-gradient(135deg, var(--adobe-red-50) 0%, var(--adobe-red-60) 100%); --adobe-gradient-action: linear-gradient(135deg, var(--adobe-blue-60) 0%, var(--adobe-blue-80) 100%); --adobe-gradient-dark: linear-gradient(180deg, var(--adobe-dark-90) 0%, var(--adobe-dark-85) 100%); /* Typography — Adobe Clean Display Black headlines are the brand voice; Source Sans 3 carries the same proportions at weight 900. */ --adobe-font: 'Source Sans 3', 'Adobe Clean', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --adobe-font-display: 'Source Sans 3', 'Adobe Clean Display', -apple-system, BlinkMacSystemFont, sans-serif; /* Shape & motion (Spectrum 2: 4/8/16 radius, shadowless, tint separates) */ --adobe-radius-sm: 4px; --adobe-radius-md: 8px; --adobe-radius-lg: 16px; --adobe-radius-pill: 9999px; --adobe-shadow-subtle: rgba(0, 0, 0, 0.06) 0 4px 12px; --adobe-ease: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); /* ------------------------------------------------------------------------- 7. OFFICIAL PRODUCT MARK COLORS — carried by the icons in app/static/img/svg-icon/adobe_icons/. Icons are served unmodified and are NEVER recoloured; these tokens exist only to tint an icon *well* so the product mark keeps its own background contrast. ------------------------------------------------------------------------- */ --adobe-product-creative-cloud: #eb1000; --adobe-product-acrobat: #b30b00; --adobe-product-sign: #584ccc; --adobe-product-photoshop: #001e36; --adobe-product-photoshop-accent: #31a8ff; --adobe-product-illustrator: #330000; --adobe-product-illustrator-accent: #ff9a00; --adobe-product-indesign: #49021f; --adobe-product-indesign-accent: #ff3366; --adobe-product-premiere: #00005b; --adobe-product-premiere-accent: #9999ff; /* ------------------------------------------------------------------------- 8. DEPRECATED ALIASES — do not use in new rules. Kept so un-migrated .adobe-* rules keep rendering during the migration. Note the role change: anything that consumes --adobe-red for a *button* must move to --adobe-action. ------------------------------------------------------------------------- */ --adobe-red: var(--adobe-red-50); --adobe-red-hover: var(--adobe-red-60); --adobe-red-light: var(--adobe-red-10); --adobe-dark: var(--adobe-dark-90); --adobe-dark-secondary: var(--adobe-dark-85); --adobe-gray: #505050; --adobe-text-dark: var(--adobe-gray-90); --adobe-gradient-red: var(--adobe-gradient-brand); --adobe-legacy-red: #fa0f00; /* Superseded pre-Spectrum-2 red. Identity only. */ }