--- version: alpha name: "Slack" description: "Slack's marketing site lives inside the Salesforce design system — Salesforce-Avant-Garde for display, Salesforce-Sans for body, and the inherited aubergine `#4a154b` brand that traces all the way back to the 2019 Pentagram-led rebrand. Buttons are sharp 4px corners with all-caps copy (\"GET STARTED\") and aubergine fills — a deliberate B2B register against the rounded SaaS norm. Where Notion runs cream + custom-sans-and-serif and Linear runs near-black + Inter Variable, Slack went the opposite direction post-Salesforce — 4px button radius, ALL-CAPS button copy, and a 1970s ITC Avant Garde Gothic cut as the display face. The aubergine primary `#4a154b` (sidebar) and `#611f69` (CTA) survive from the original rebrand and are the only chromatic legacy Salesforce kept; the rest of the marketing kit was reissued in 2022 under Salesforce design tokens. The system pairs aubergine accents with a warm cream `#f4ede4` panel ground for storytelling sections and an editorial blue `#1264a3` for the sidebar-highlight accent — the same triad that ships in the Slack desktop app's aubergine theme. The result reads as licensed-software-not-consumer-SaaS — a deliberate enterprise-B2B signal that selects for IT-buyer audiences." colors: bg: "#ffffff" bg-cream: "#f4ede4" bg-cream-deep: "#ebe1d2" surface: "#ffffff" surface-elev: "#fafafa" text: "#1d1c1d" text-strong: "#000000" text-medium: "#3a3a3a" text-soft: "#454545" text-muted: "#717274" text-faint: "#9b9b9b" text-disabled: "#c7c7c7" brand: "#611f69" brand-deep: "#4a154b" brand-bright: "#7d2f87" brand-soft: "#f4e8f5" brand-tint: "#d9b3dd" on-brand: "#ffffff" accent-blue: "#1264a3" accent-blue-soft: "#e3f0fa" accent-yellow: "#ecb12f" accent-yellow-soft: "#fef4e0" accent-green: "#2eb67d" accent-red: "#e01e5a" link: "#1264a3" link-hover: "#0a4d7a" selected-bg: "#f4ede4" disabled: "#c7c7c7" border: "#dddddd" border-strong: "#aaaaaa" border-subtle: "#eeeeee" border-brand: "rgba(74, 21, 75, 0.30)" success-bg: "#e3f5ec" success-text: "#1a7a4d" warning-bg: "#fef4e0" warning-text: "#7a5a00" danger-bg: "#fde6ee" danger-text: "#a8113a" info-bg: "#e3f0fa" info-text: "#0a4d7a" typography: display: fontFamily: "Salesforce-Avant-Garde" fontSize: "64px" lineHeight: 1.5 letterSpacing: "-0.015em" body: fontFamily: "Salesforce-Sans" fontSize: "16px" lineHeight: 1.5 mono: fontFamily: "Monaco" rounded: button: "4px" card: "8px" pill: "9999px" spacing: xs: "4px" sm: "8px" md: "16px" lg: "40px" xl: "64px" --- ## Overview ## Overview Slack's homepage is white — `#ffffff` background, `#1d1c1d` body text — with aubergine accents reserved for primary CTAs and the sidebar illustration assets that recur from the 2019 Pentagram rebrand. The hero is a single-column 1280px layout: H1 in **Salesforce-Avant-Garde** at `48px / 1.12` line-height, supporting paragraph in **Salesforce-Sans**, and a row of all-caps aubergine pills. The defining decisions are the **4px button corners** and **ALL-CAPS button copy** ("GET STARTED", "REQUEST A DEMO") — a deliberate enterprise-B2B register that sets the site apart from the rounded consumer-SaaS norm. What makes this design distinctive vs. nearby alternatives: where Notion and Linear have moved toward rounded corners and sentence-case marketing copy, Slack went the opposite direction post-Salesforce. The 4px radius and ALL-CAPS buttons are an enterprise tell — they read as "licensed software" rather than "consumer SaaS." The Salesforce-Avant-Garde display face is a Salesforce cut of the 1970s ITC Avant Garde Gothic by Herb Lubalin, and its geometric round forms read distinctly retro — pulling the otherwise-corporate site toward a faint editorial register. Cream `#f4ede4` panel grounds (the warm story-section ground) keep the system from feeling sterile; this cream is the brand's secondary canvas, used for storytelling and customer-success panels. The third register is the **Pentagram-survival aubergine + warm cream + editorial blue triad**. The aubergine `#4a154b` (sidebar) and `#611f69` (CTA) survive from the original Pentagram-led 2019 Slack rebrand and are the only chromatic legacy Salesforce kept. The cream `#f4ede4` panel ground and the editorial blue `#1264a3` (sidebar-highlight accent) form the Pentagram triad — the same three colors that ship inside the Slack desktop app's aubergine theme. When the marketing site shows in-product Slack screenshots, the aubergine sidebar + blue highlight bar appears inside the screenshot as a recurring branding device, anchoring the brand identity inside the product UI itself. Atmospheric vocabulary that captures the feeling: *enterprise-B2B, all-caps-CTA, 4px-corners, Salesforce-licensed, aubergine-survival, Pentagram-triad, ITC-Avant-Garde, retro-corporate, cream-panel-ground, sidebar-illustration, editorial-blue-accent, warm-anchor, work-chat-warmth.* Every surface lands like a Salesforce property that has carefully preserved Slack's pre-acquisition brand DNA inside the parent design system. **Key Characteristics** - Pure white `#ffffff` canvas with cream `#f4ede4` panel grounds for storytelling - **Salesforce-Avant-Garde** display — 1970s ITC Avant Garde cut, weight 700 - **Salesforce-Sans** body — Salesforce in-house sans, weight 400 / 600 / 700 - Aubergine primary `#611f69` (CTA) + `#4a154b` (sidebar wordmark) — Pentagram survivals - **4px button corners** — deliberately not the SaaS pill convention - **ALL-CAPS button copy** with `0.05em` tracking — enterprise-B2B register - Cream `#f4ede4` warmth signal — prevents pure-white sterility - Editorial blue `#1264a3` — sidebar-highlight accent inside screenshots - Slack icon triad (yellow, green, red lozenges) — appears as decorative dingbats - 1280px page width, 80px section gutters — corporate-web cadence - Soft drop-shadows on cards (`rgba(0,0,0,0.06) 0 8px 24px`) — classic SaaS depth - The Slack-app screenshot inside a card with its own shadow — dominant depth device ## Colors ### Primary - **bg** `#ffffff` — primary page canvas. Pure white, the Salesforce default. - **bg-cream** `#f4ede4` — warm cream panel ground for storytelling sections. The brand's secondary canvas. - **bg-cream-deep** `#ebe1d2` — deeper cream for emphasis bands and pricing-tier highlights. - **text** `#1d1c1d` — body copy and headlines. Slack's signature near-black, slightly warmer than `#000`. - **surface** `#ffffff` — card surface = page surface. - **surface-elev** `#fafafa` — subtle lift over white for hover. ### Brand & Accent - **brand** `#611f69` — primary CTA fill. The `--article-theme-primary` adjacent aubergine, slightly brighter than the sidebar shade. - **brand-deep** `#4a154b` — `--sidebar-color`. Used on the Slack wordmark, the sidebar in app screenshots, and dark accent strokes. - **brand-bright** `#7d2f87` — hover-brightened aubergine for emphasis. - **brand-soft** `#f4e8f5` — aubergine wash for backgrounds. - **brand-tint** `#d9b3dd` — aubergine tint for chips. - **on-brand** `#ffffff` — white label on aubergine. ### Pentagram Triad (Slack Icon Lozenges) - **accent-blue** `#1264a3` — editorial blue, used as sidebar-highlight inside screenshots and as link colour. - **accent-blue-soft** `#e3f0fa` — blue wash for info backgrounds. - **accent-yellow** `#ecb12f` — Slack icon's top-left lozenge yellow. - **accent-yellow-soft** `#fef4e0` — yellow wash for warning backgrounds. - **accent-green** `#2eb67d` — Slack icon green lozenge, used in the brand mark and decorative dingbats. - **accent-red** `#e01e5a` — Slack icon red lozenge. The three lozenge colors (yellow, green, red) plus the editorial blue and aubergine form the Pentagram-survival palette. The brand uses them sparingly on marketing chrome — usually only as decorative dingbats around the Slack mark — but they appear consistently inside in-product screenshots as the recurring identity device. ### Interactive - **link** `#1264a3` — editorial blue links in body copy. Underlined on hover. - **link-hover** `#0a4d7a` — deeper blue on hover. - **selected-bg** `#f4ede4` — cream selected nav state. - **disabled** `#c7c7c7` — disabled control text. ### Neutral Scale - **near-black** `#1d1c1d` — primary text and headlines. - **slate-medium** `#3a3a3a` — secondary heading colour. - **slate-soft** `#454545` — supporting copy. - **slate-muted** `#717274` — captions, metadata. - **slate-faint** `#9b9b9b` — eyebrows, helper, placeholder. - **slate-disabled** `#c7c7c7` — disabled microcopy. ### Surface & Borders - **surface-0 (page)** `#ffffff` pure white. - **surface-1 (cream panel)** `#f4ede4` warm cream. - **surface-2 (cream-deep)** `#ebe1d2` deeper cream. - **border** `#dddddd` — neutral border for inputs and divider lines (notably more visible than the 7–10% black hairlines of Mintlify or Anthropic — Slack's borders read as solid 1px corporate dividers). - **border-strong** `#aaaaaa` — outlined buttons, emphasis dividers. - **border-subtle** `#eeeeee` — quietest separation. - **border-brand** `rgba(74, 21, 75, 0.30)` — aubergine-tinted hairline. ### Shadow Colors Slack uses **classic SaaS shadows** — neutral grey, mid-opacity, soft-blur. Cards in the feature grid carry `rgba(0, 0, 0, 0.06) 0 8px 24px`; in-product screenshot cards carry the deeper `rgba(0, 0, 0, 0.10) 0 16px 32px -8px`. These are corporate-web shadows, not the warm-tinted minimal shadows of Anthropic or Descript. The shadow language signals "this is a Salesforce property" — solid, neutral, layered, distinctly *not* the flat-paper register of Linear/Mintlify nor the warm-magazine register of Anthropic/Descript. ### Semantic - **success** — bg `#e3f5ec` (green wash from Slack triad), text `#1a7a4d`, border `rgba(46, 182, 125, 0.30)`. - **warning** — bg `#fef4e0` (yellow wash from Slack triad), text `#7a5a00`, border `rgba(236, 177, 47, 0.30)`. - **danger** — bg `#fde6ee` (red wash from Slack triad), text `#a8113a`, border `rgba(224, 30, 90, 0.30)`. - **info** — bg `#e3f0fa` (blue wash from Slack triad), text `#0a4d7a`, border `rgba(18, 100, 163, 0.30)`. The semantic colours come *from* the Pentagram triad — Slack's brand palette doubles as the semantic palette. Success isn't `green-500`; it's the Slack-icon green wash. The whole palette is one Pentagram-survival system. ## Typography ### Font Family - **Display**: `Salesforce-Avant-Garde, system-ui, -apple-system, "Segoe UI", roboto, sans-serif` — Salesforce's licensed cut of the 1970s ITC Avant Garde Gothic by Herb Lubalin. Used at weight 400 / 600 / 700. The defining display face. - **Body**: `Salesforce-Sans, system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif` — Salesforce's in-house display sans. Used at 400 / 600 / 700. - **Mono**: `Monaco, Menlo, Consolas, "Courier New", monospace` — pragmatic system mono fallback. Slack does not license a proprietary mono. - **OpenType features**: `liga` and `kern` always on; `tnum` enabled in mono for code blocks. The two-family pairing (Avant-Garde for display, Sans for body) mirrors the **Salesforce Lightning Design System** pattern and sets Slack visually inside the Salesforce family rather than the SaaS family. This is a deliberate post-acquisition typographic decision. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | Display Hero | Avant-Garde | 64px | 700 | 1.10 | -0.015em | liga | Largest hero variant | | Display | Avant-Garde | 56px | 700 | 1.10 | -0.012em | liga | Section intro at scale | | H1 | Avant-Garde | 48px | 700 | 1.12 | -0.012em | liga | The canonical Slack hero | | H2 | Avant-Garde | 32px | 700 | 1.20 | -0.008em | liga | Major section | | H3 | Avant-Garde | 24px | 700 | 1.25 | -0.005em | — | Sub-section | | H4 | Avant-Garde | 20px | 700 | 1.30 | normal | — | Card heading | | H5 | Salesforce-Sans | 18px | 600 | 1.35 | normal | — | Inline emphasis (switches to body face) | | Eyebrow | Salesforce-Sans | 13px | 700 | 1.40 | 0.10em | uppercase | Section pre-label — wide tracking | | Body Large | Salesforce-Sans | 18px | 400 | 1.50 | normal | — | Lede paragraph | | Body | Salesforce-Sans | 16px | 400 | 1.50 | normal | — | Default body copy | | Body Small | Salesforce-Sans | 14px | 400 | 1.50 | normal | — | Captions, sidebars | | Caption | Salesforce-Sans | 13px | 400 | 1.40 | normal | — | Image captions | | Caption Tabular | Mono | 12px | 700 | 1.40 | normal | tnum | Stats, data labels | | Label | Mono | 11px | 700 | 1.30 | uppercase | — | UI labels | | Button | Salesforce-Sans | 14px | 700 | 1.0 | 0.05em | uppercase | The all-caps CTA register | | Pull Quote | Avant-Garde | 28px | 600 | 1.30 | normal | — | Editorial pull-quote in display face | | Code | Mono | 14px | 400 | 1.55 | normal | — | Inline + block | ### Principles - **Two-family Salesforce duet.** Avant-Garde for display, Salesforce-Sans for body. Adding a third type family breaks the Salesforce design-system register; the brand explicitly avoids licensing a third face. - **All-caps + 700 + 0.05em tracking on CTA copy.** "GET STARTED", "REQUEST A DEMO", "TRY FOR FREE" — the all-caps register is reserved for primary action labels, set in Salesforce-Sans at 14px / 700 with 0.05em letter-spacing. Body copy never goes all-caps. - **Eyebrows at 13px / 700 / 0.10em uppercase.** The wide tracking (`0.10em`) is even wider than the CTA tracking — eyebrows read as section pre-labels with deliberate corporate-typographic emphasis. - **Avant-Garde at weight 700 for display.** The 1970s geometric forms read at heavyweight; weight 400 or 500 would lose the retro-corporate punch that distinguishes Slack from sans-serif SaaS peers. - **Salesforce-Sans at 400 / 600 / 700.** Body 400, UI labels and emphasis 600, button copy 700. The weight ladder is corporate-utilitarian. - **Negative tracking compresses with size.** `-0.015em` at 64px, `-0.012em` at 48–56px, `-0.008em` at 32px, `-0.005em` at 24px, normal at 20px and below. - **No italics in display.** Avant-Garde never italicises; Salesforce-Sans italics carry quoted titles only. - **System mono fallback.** Monaco/Menlo/Consolas — Slack spends its type budget on Avant-Garde + Sans, not on a custom mono. ## Layout ### Spacing System - **Base unit**: 4px. - **Scale**: 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 128, 160 — corporate-typical. - **Density observation**: Slack runs corporate-web density — moderately spaced, never as tight as Notion's product UI nor as airy as Anthropic's editorial spreads. Headlines float in 64–96px of margin; body paragraphs sit on 24px line gaps. ### Grid & Container - **Page max width**: `1280px` — Salesforce-typical. - **Site gutter**: `clamp(24px, 5vw, 64px)`. - **Grid**: 12 columns with 24px gutters. Hero blocks span 8 columns center-aligned; capability rails span 4 columns each. - **Hero treatment**: full-bleed white, 48px Avant-Garde H1 anchored center or left, all-caps aubergine pill below. ### Whitespace Philosophy The page alternates between white sections and cream `#f4ede4` storytelling panels — the rhythm provides tonal depth without breaking into dark bands. Section gutters run **80–128px** between major regions; minor blocks sit on 48–64px gaps; intra-section spacing uses 16–32px. The 80px vertical rhythm is more compressed than Anthropic's 96–160px, signalling corporate-utilitarian rather than editorial-spacious. ### Section Cadence - Hero (white, 48px Avant-Garde H1) → Capability Rail (white card grid with soft shadows) → Storytelling Panel (cream `#f4ede4` ground with customer-success copy) → Screenshot Card (white card containing in-product Slack UI with aubergine sidebar) → Pricing (white card grid) → CTA Banner (full-bleed cream or aubergine) → Footer (white, slate-muted). - Cream panels alternate with white. The aubergine never becomes a section ground at full saturation — that would read as competitor (Twitch, Discord) territory. - White-on-white sections separated by 1px `#eeeeee` border-subtle hairlines or by spacing. ### Breakpoints | Name | Width | Use | |---|---|---| | Mobile | < 640px | Single column, full-bleed sections, 32px H1 | | Tablet | 640–1024px | 2-column rails, 40px H1 | | Desktop | 1024–1280px | Full 12-col grid, 48px H1, 720px prose | | Wide | 1280–1440px | Site max width hits | | Ultra | > 1440px | Page locks to 1280, gutters expand | ### Touch Targets - Minimum tap target: 44×44px (WCAG AAA). - Buttons: 56px minimum height on mobile (the asymmetric 19/20px vertical padding × 2 + line-height ≈ 56px). - Nav link tap area: 44×44px even when visual padding is smaller. ### Collapsing Strategy - **Header**: full nav at ≥1024px; hamburger sheet below. - **Hero**: 64px display → 48px H1 → 40px → 32px across breakpoints. - **Capability grid**: 4-up at desktop, 2-up at tablet, 1-up at mobile. - **Body width**: 720px → fluid 90vw at mobile. - **All-caps CTA**: maintains uppercase + 0.05em tracking on mobile (font size scales down to 13px to compensate). - **Screenshot cards**: maintain 8:5 aspect ratio across viewports; the in-product UI sits inside without layout shift. - **Section spacing**: 128px → 80px → 56px across sizes. ### Image Behavior - In-product screenshots use `srcset` with 1x/2x/3x; aspect-ratio enforced. - Hero imagery uses `aspect-ratio` to prevent layout shift. - Lazy-loading on below-fold images; eager on hero. ### Container Queries Used inside capability cards to switch icon position when card width crosses 320px (icon-left vs. icon-top). Used inside pricing tier cards to switch from horizontal to vertical feature lists on narrow viewports. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | 0 | Flat — no shadow | Default page surface, hero, body sections | | 1 | Cream tier (`#f4ede4` on white) | Storytelling panels | | 2 | `rgba(0, 0, 0, 0.04) 0 1px 3px` | Sticky nav, dropdowns | | 3 | `rgba(0, 0, 0, 0.06) 0 8px 24px` | Default cards (the canonical Slack card shadow) | | 4 | `rgba(0, 0, 0, 0.10) 0 16px 32px -8px` | Screenshot cards (deeper for emphasis) | | 5 | `rgba(0, 0, 0, 0.12) 0 24px 64px -16px` | Modals, dialogs | ### Shadow Philosophy Slack uses **classic SaaS shadows** — neutral grey, mid-opacity, soft-blur. The default card shadow `rgba(0, 0, 0, 0.06) 0 8px 24px` is the canonical Slack lift; in-product screenshot cards step deeper to `rgba(0, 0, 0, 0.10) 0 16px 32px -8px`, providing visual emphasis on the recurring screenshot device. Cream-on-white panel transitions provide tonal depth without borders. The screenshot-inside-mockup pattern (a Slack desktop window rendered inside a feature card with its own shadow) is the dominant depth device on the marketing surface. The shadows are explicitly *not* warm-tinted (Anthropic) or wine-tinted (Descript) — they're pure neutral grey, reinforcing the corporate-Salesforce register. ## Shapes | Tier | Value | Use | |---|---|---| | Micro | 2px | Decorative dividers, inline chip corners | | Standard (sm) | 4px | Buttons, inputs, dropdowns — the dominant Slack radius | | Comfortable (md) | 4px | Same as sm — Slack doesn't differentiate | | Relaxed (lg) | 8px | Screenshot cards, code blocks | | Featured (xl) | 12px | Cards, modals, storytelling panels | | Pill | 9999px | Reserved for status chips and brand-specific uses | Slack's signature shape is the **4px button** — distinctly *not* a pill. The system has two registers: 4px on actionable elements (buttons, inputs, status chips) and 12px on cards. There are no full pills (`9999px`) on the marketing surface for primary actions — Slack's brand geometry rejects the SaaS pill convention entirely. This 4px-vs-pill choice is the second-most-recognisable feature after the all-caps CTA copy. ## Components ### Buttons **Primary (Aubergine 4px Pill Rect)** - Background: `#611f69`. Text: `#ffffff`, Salesforce-Sans 700 / 14px / uppercase / `0.05em` tracking. - Padding: `19px 40px 20px` (asymmetric vertical to optical-center the all-caps copy). Radius: `4px`. No border. - Hover: bg → `#4a154b` (drops to sidebar shade); transition `200ms ease-standard`. - Active: bg → `#3a0f3b`. - Use: Primary CTA — *GET STARTED, REQUEST A DEMO, TRY FOR FREE.* **Secondary (Aubergine Outlined)** - Background: transparent. Text: `#611f69`. Border: `1px solid #611f69`. Radius: `4px`. - Same padding and font as primary (all-caps maintained). - Hover: bg → `#f4e8f5` aubergine wash. - Use: Twin to primary — *WATCH THE DEMO, READ MORE.* **White (Aubergine-Section Alternate)** - Background: `#ffffff`. Text: `#1d1c1d`. Border: `1px solid #aaaaaa`. Radius: `4px`. - Same padding and font as primary. - Hover: bg → `#fafafa`. - Use: Used inside aubergine-bg hero illustrations or panels where aubergine would not contrast. **Ghost (Quiet)** - Background: transparent. Text: `#1d1c1d`. No border. - Padding: `8px 14px`. Salesforce-Sans 600 / 14px (sentence case allowed for nav). - Hover: text → `#611f69` aubergine. - Use: Nav links, footer secondary actions. ### Cards **Default Card (Soft Shadow)** - Background: `#ffffff`. Border: `1px solid #eeeeee`. Radius: `12px`. Padding: `32px`. - Shadow: `rgba(0, 0, 0, 0.06) 0 8px 24px`. - Hover: shadow intensifies to `rgba(0, 0, 0, 0.08) 0 12px 32px`; transition `200ms`. - Use: Default feature card — distinctly more "elevated" than the in-product chrome. **Cream Storytelling Panel** - Background: `#f4ede4` warm cream. Border: none. Radius: `12px`. Padding: `40px 32px`. - Use: Storytelling panel ground for narrative sections, customer-success spreads. **Screenshot Card** - Background: `#ffffff`. Border: `1px solid #dddddd`. Radius: `8px`. Padding: `0`. - Shadow: `rgba(0, 0, 0, 0.10) 0 16px 32px -8px` (deeper than default card). - Inner: in-product Slack-app screenshot at original aspect ratio, with the famous `#4a154b` aubergine sidebar + `#1264a3` blue highlight bar appearing inside. - Use: The dominant depth device — wraps in-product screenshots in a slightly elevated frame. ### Badges, Tags, Pills **Eyebrow Label** — no chrome, just type. Salesforce-Sans 700 / 13px / uppercase / `0.10em` tracking, colour `#717274`. Wide tracking distinguishes Slack eyebrows from sentence-case eyebrows used by Notion/Linear. **Aubergine Tag** — bg `#f4e8f5`, text `#4a154b`, radius `4px`, padding `4px 10px`. Status / FEATURED / NEW labels. The 4px radius matches the button system. **Slack-Triad Status** — uses lozenge colors as semantic chips (green for active, yellow for warning, red for offline). ### Inputs / Forms - Background: `#ffffff`. Border: `1px solid #dddddd`. Radius: `4px` (matches buttons). Padding: `12px 16px`. - Font: Salesforce-Sans 400 / 16px. Placeholder: `#9b9b9b`. - Focus: `0 0 0 2px #611f69` aubergine ring, border → `#611f69`. - Error: border → `#a8113a`, ring → `rgba(168, 17, 58, 0.30)`. - Helper: caption 13px slate-muted below. ### Navigation - Header height `72px`. Background `#ffffff` (sticky, with 1px bottom border in `#dddddd`). - Logo: Slack wordmark in custom multi-color lozenge mark, aubergine `#4a154b` wordmark text. - Nav links: Salesforce-Sans 600 / 14px, colour `#1d1c1d`, padding `8px 14px`. Hover → `#611f69` aubergine. - Right-side CTA pair: ghost "SIGN IN" + primary aubergine pill rect "GET STARTED" (both all-caps). - Mobile: full-screen sheet, links stack at 22px / Salesforce-Sans 600 (sentence case for legibility). ### Optional Components **Pull Quote** — Avant-Garde 28px / 600, near-black `#1d1c1d` text, with a 4px aubergine vertical rule on the left edge. The display face carries the pull-quote (no serif option since Slack runs single-display-family). **Footnote** — Salesforce-Sans 13px / 400, slate-muted; sits on a thin border-subtle rule. **Code Block** — Mono 14px, bg `#f4ede4` cream-warm, radius `4px`, padding `16px 20px`, border `#dddddd`. Inline code: same font, bg `rgba(0, 0, 0, 0.06)`, padding `2px 6px`, radius `4px`. **Tooltip** — bg `#1d1c1d`, text `#ffffff`, radius `4px`, padding `8px 12px`, font `13px / Salesforce-Sans 600`. **Modal** — bg `#ffffff`, radius `12px`, shadow `rgba(0, 0, 0, 0.12) 0 24px 64px -16px`, max-width `560px`. White backdrop overlay at 70% opacity. ### Easing Curves - `ease-standard`: `cubic-bezier(0.4, 0, 0.2, 1)` — Material-style; default for hover, focus, color transitions. - `ease-emphasized`: `cubic-bezier(0.2, 0, 0, 1)` — punchier exit; modal enter, hero reveal. - `ease-out`: `cubic-bezier(0.0, 0, 0.2, 1)` — gentle settle; dropdown reveal. ### Duration Buckets - **Fast (100ms)** — colour transitions, focus rings, link hovers. - **Standard (200ms)** — button hover, card hover, dropdown reveal. - **Slow (300ms)** — modal enter/exit, page section fade-in. - **Page (400ms)** — route transitions, hero reveal sequences. ### Per-Component Micro-States - **Button hover (aubergine)**: bg `#611f69` → `#4a154b`; transition `200ms ease-standard`. No lift, no scale. - **Button hover (outlined)**: bg transparent → `#f4e8f5` aubergine wash. - **Card hover**: shadow intensifies from `rgba(0, 0, 0, 0.06) 0 8px 24px` to `rgba(0, 0, 0, 0.08) 0 12px 32px`; no border change. - **Link hover**: colour `#1264a3` → `#0a4d7a` over 100ms; underline animates in. - **Input focus**: 2px aubergine ring fades in over 100ms; border darkens to aubergine. - **Screenshot card hover**: shadow deepens further; no scale, no rotate. ### Page Transitions Hero text fades in over 400ms with 16px translate-up; below-fold sections use `IntersectionObserver` to fade in at 80% viewport, 300ms duration, no translate. The brand does not use scroll-pinned animations — every section is independently navigable. ### Reduced Motion `@media (prefers-reduced-motion: reduce)` — all transitions become opacity-only, durations halved. Translate animations are disabled entirely; scroll-linked reveals snap to final state. ### Contrast Pairs - **`#1d1c1d` text on `#ffffff` bg**: 16.8:1 — AAA at all sizes. - **`#454545` text on `#ffffff` bg**: 9.0:1 — AAA at body sizes. - **`#717274` text on `#ffffff` bg**: 5.0:1 — AA at body sizes. - **`#ffffff` text on `#611f69` aubergine button**: 9.6:1 — AAA at body sizes. - **`#1d1c1d` text on `#f4ede4` cream panel**: 14.7:1 — AAA at all sizes. - **`#1264a3` link on `#ffffff` bg**: 6.4:1 — AAA. - **`#4a154b` text on `#f4e8f5` aubergine chip**: 11.2:1 — AAA. ### Focus Indicators - Default focus ring: `0 0 0 2px #611f69` aubergine with 2px offset on white pages. - On dark surfaces (rare aubergine sections): `0 0 0 2px #ffffff`. - All interactive surfaces must have a visible focus state — no `outline: none` without a replacement. ### ARIA Patterns - **Navigation**: `