light · sans · dense · structured · cool
Slack
Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents.
By webdesignhot · slack.com
$ npx design-md add slack
Learn more about the CLI → Compare to…
Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
1440 × 900
mobile · 390 × 844
Tokens design.md/v1.5
- bg
#ffffff - bg-cream
#f4ede4 - bg-cream-deep
#ebe1d2 - surface
#ffffff - surface-elev
#fafafa - text AAA · 17.0
#1d1c1d - text-strong
#000000 - text-medium
#3a3a3a - text-soft
#454545 - text-muted
#717274 - text-faint — · 2.8
#9b9b9b - text-disabled
#c7c7c7 - brand AAA · 11.0
#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 — · 1.4
#dddddd - border-strong — · 2.3
#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
Ship faster than ever.
display-hero Salesforce-Avant-Garde 64px w700 -0.015em
Ship faster than ever.
display Salesforce-Avant-Garde 56px w700 -0.012em
Ship faster than ever.
h1 Salesforce-Avant-Garde 48px w700 -0.012em
Built for teams that ship.
h2 Salesforce-Avant-Garde 32px w700 -0.008em
The quick brown fox jumps over the lazy dog.
quote-pull Salesforce-Avant-Garde 28px w600
A complete kit
h3 Salesforce-Avant-Garde 24px w700 -0.005em
The quick brown fox jumps over the lazy dog.
h4 Salesforce-Avant-Garde 20px w700
The quick brown fox jumps over the lazy dog.
h5 Salesforce-Sans 18px w600
The quick brown fox jumps over the lazy dog.
body-large Salesforce-Sans 18px w400
The quick brown fox jumps over the lazy dog.
body Salesforce-Sans 16px w400
The quick brown fox jumps over the lazy dog.
body-small Salesforce-Sans 14px w400
The quick brown fox jumps over the lazy dog.
button Salesforce-Sans 14px w700 0.05em
npx design-md add linear
code Monaco 14px w400
The quick brown fox jumps over the lazy dog.
eyebrow Salesforce-Sans 13px w700 0.10em
OUR DESIGN SYSTEM
caption Salesforce-Sans 13px w400
OUR DESIGN SYSTEM
caption-tabular Monaco 12px w700
npx design-md add linear
code-micro Monaco 12px w400
OUR DESIGN SYSTEM
label Monaco 11px w700
- step-0 4px
- step-1 8px
- step-2 12px
- step-3 16px
- step-4 24px
- step-5 32px
- step-6 40px
- step-7 48px
- step-8 64px
- step-9 80px
- step-10 96px
- step-11 128px
- step-12 160px
- micro
2px - sm
4px - md
4px - lg
8px - xl
12px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Export
4 formats · paste-ready
Tailwind
theme.extend block for tailwind.config.js
CSS variables
:root { --bg, --text, --brand, … } you can paste anywhere
DTCG JSON
W3C Design Tokens Community Group format
Figma Variables
Importable into Figma → Variables → Import
---
name: Slack
tagline: Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents.
author: webdesignhot
source_url: https://slack.com
spec: design.md/v1.5
quality: curated
featured: false
categories: [saas]
tags: [light, sans, dense, structured, cool]
preview_swatch: ['#ffffff', '#611f69', '#1d1c1d']
related: [stripe, notion, linear]
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:
# Primary
bg: '#ffffff' # primary page canvas
bg-cream: '#f4ede4' # warm cream panel ground for storytelling sections
bg-cream-deep: '#ebe1d2' # deeper cream for emphasis bands
surface: '#ffffff' # default card surface
surface-elev: '#fafafa' # subtle lift over white
text: '#1d1c1d' # body copy and headlines (Slack's signature near-black)
text-strong: '#000000' # rare absolute-black for hero accent
text-medium: '#3a3a3a' # secondary heading colour
text-soft: '#454545' # supporting copy
text-muted: '#717274' # captions and metadata
text-faint: '#9b9b9b' # eyebrows, helper
text-disabled: '#c7c7c7' # disabled microcopy
# Brand
brand: '#611f69' # primary CTA fill (article-theme-primary adjacent)
brand-deep: '#4a154b' # sidebar-color, wordmark, dark accents
brand-bright: '#7d2f87' # hover-brightened aubergine
brand-soft: '#f4e8f5' # aubergine wash for backgrounds
brand-tint: '#d9b3dd' # aubergine tint for chips
on-brand: '#ffffff' # white label on aubergine
# Accent (the Pentagram triad)
accent-blue: '#1264a3' # editorial blue — sidebar-highlight, recurring screenshot accent
accent-blue-soft: '#e3f0fa' # blue wash
accent-yellow: '#ecb12f' # Slack icon's top-left lozenge yellow
accent-yellow-soft: '#fef4e0' # yellow wash
accent-green: '#2eb67d' # Slack icon green lozenge
accent-red: '#e01e5a' # Slack icon red lozenge
# Interactive
link: '#1264a3' # editorial blue link in body copy
link-hover: '#0a4d7a' # deeper blue on hover
selected-bg: '#f4ede4' # cream selected nav state
disabled: '#c7c7c7'
# Borders
border: '#dddddd' # neutral border for inputs and dividers
border-strong: '#aaaaaa' # outlined buttons, emphasis dividers
border-subtle: '#eeeeee' # quietest separation
border-brand: 'rgba(74, 21, 75, 0.30)' # aubergine-tinted hairline
# Semantic
success-bg: '#e3f5ec' # green wash from Slack triad
success-text: '#1a7a4d'
warning-bg: '#fef4e0' # yellow wash from Slack triad
warning-text: '#7a5a00'
danger-bg: '#fde6ee' # red wash from Slack triad
danger-text: '#a8113a'
info-bg: '#e3f0fa' # blue wash from Slack triad
info-text: '#0a4d7a'
typography:
display:
family: 'Salesforce-Avant-Garde, system-ui, -apple-system, "Segoe UI", roboto, sans-serif'
weights: [400, 600, 700]
opentype-features: ['liga', 'kern']
body:
family: 'Salesforce-Sans, system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif'
weights: [400, 600, 700]
opentype-features: ['liga', 'kern']
mono:
family: 'Monaco, Menlo, Consolas, "Courier New", monospace'
weights: [400]
opentype-features: ['tnum']
scale:
display-hero: { size: 64, weight: 700, lineHeight: 1.10, tracking: '-0.015em', family: display }
display: { size: 56, weight: 700, lineHeight: 1.10, tracking: '-0.012em', family: display }
h1: { size: 48, weight: 700, lineHeight: 1.12, tracking: '-0.012em', family: display }
h2: { size: 32, weight: 700, lineHeight: 1.20, tracking: '-0.008em', family: display }
h3: { size: 24, weight: 700, lineHeight: 1.25, tracking: '-0.005em', family: display }
h4: { size: 20, weight: 700, lineHeight: 1.30, family: display }
h5: { size: 18, weight: 600, lineHeight: 1.35, family: body }
eyebrow: { size: 13, weight: 700, lineHeight: 1.40, tracking: '0.10em', family: body, transform: uppercase }
body-large: { size: 18, weight: 400, lineHeight: 1.50, family: body }
body: { size: 16, weight: 400, lineHeight: 1.50, family: body }
body-small: { size: 14, weight: 400, lineHeight: 1.50, family: body }
caption: { size: 13, weight: 400, lineHeight: 1.40, family: body }
caption-tabular: { size: 12, weight: 700, lineHeight: 1.40, family: mono, opentype: 'tnum' }
label: { size: 11, weight: 700, lineHeight: 1.30, family: mono, transform: uppercase }
button: { size: 14, weight: 700, lineHeight: 1.0, family: body, tracking: '0.05em', transform: uppercase }
code: { size: 14, weight: 400, lineHeight: 1.55, family: mono }
code-micro: { size: 12, weight: 400, lineHeight: 1.40, family: mono }
quote-pull: { size: 28, weight: 600, lineHeight: 1.30, family: display }
radius:
micro: 2
sm: 4
md: 4
lg: 8
xl: 12
pill: 9999
spacing:
base: 4
scale: [4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 128, 160]
layout:
page-width: 1280
prose-width: 720
site-gutter: 'clamp(24px, 5vw, 64px)'
header-height: 72
grid-columns: 12
section-rhythm: '80-128px'
components:
button-primary:
background: '#611f69'
text: '#ffffff'
padding: '19px 40px 20px'
radius: 4
border: 'none'
font: 'Salesforce-Sans 700 / 14px / uppercase / 0.05em tracking'
hover-bg: '#4a154b'
active-bg: '#3a0f3b'
use: 'Primary CTA — aubergine pill rect with all-caps copy, the brand''s defining 4px-corner enterprise-B2B button'
button-secondary:
background: 'transparent'
text: '#611f69'
padding: '19px 40px 20px'
radius: 4
border: '1px solid #611f69'
font: 'Salesforce-Sans 700 / 14px / uppercase / 0.05em tracking'
hover-bg: '#f4e8f5'
use: 'Outlined twin — same shape, aubergine border, soft-aubergine hover wash'
button-white:
background: '#ffffff'
text: '#1d1c1d'
padding: '19px 40px 20px'
radius: 4
border: '1px solid #aaaaaa'
font: 'Salesforce-Sans 700 / 14px / uppercase / 0.05em tracking'
hover-bg: '#fafafa'
use: 'White CTA on aubergine sections — used inside hero illustrations where aubergine is the bg'
button-ghost:
background: 'transparent'
text: '#1d1c1d'
padding: '8px 14px'
font: 'Salesforce-Sans 600 / 14px'
hover-text: '#611f69'
use: 'Quiet third action — nav links, footer (sentence case allowed here)'
card:
background: '#ffffff'
border: '1px solid #eeeeee'
radius: 12
padding: '32px'
use: 'Default feature card — white panel with hairline border, soft drop shadow'
shadow: 'rgba(0, 0, 0, 0.06) 0 8px 24px'
card-cream:
background: '#f4ede4'
border: 'none'
radius: 12
padding: '40px 32px'
use: 'Storytelling panel ground — warm cream for narrative sections'
card-screenshot:
background: '#ffffff'
border: '1px solid #dddddd'
radius: 8
padding: '0'
use: 'Wraps in-product Slack-app screenshots; the aubergine sidebar + blue highlight bar appears inside as branding device'
shadow: 'rgba(0, 0, 0, 0.10) 0 16px 32px -8px'
input:
background: '#ffffff'
border: '1px solid #dddddd'
radius: 4
padding: '12px 16px'
font: 'Salesforce-Sans 400 / 16px'
placeholder-color: '#9b9b9b'
focus-ring: '0 0 0 2px #611f69'
use: 'Form fields, search — 4px radius matches button corners'
badge-eyebrow:
background: 'transparent'
text: '#717274'
padding: '0'
font: 'Salesforce-Sans 700 / 13px / uppercase / 0.10em'
use: 'Section eyebrow — bold uppercase with wide tracking, no chrome'
badge-aubergine:
background: '#f4e8f5'
text: '#4a154b'
padding: '4px 10px'
radius: 4
font: 'Salesforce-Sans 700 / 12px'
use: 'Aubergine-tinted pill for status / FEATURED labels (4px radius matches button system)'
nav-link:
background: 'transparent'
text: '#1d1c1d'
padding: '8px 14px'
font: 'Salesforce-Sans 600 / 14px'
hover-text: '#611f69'
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-out: 'cubic-bezier(0.0, 0, 0.2, 1)'
duration-fast: 100
duration-standard: 200
duration-slow: 300
duration-page: 400
reduced-motion: 'respects prefers-reduced-motion: reduce — all transitions become opacity-only, durations halved'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1440
shadows:
none: 'none'
ambient: 'rgba(0, 0, 0, 0.04) 0 1px 3px'
card: 'rgba(0, 0, 0, 0.06) 0 8px 24px'
screenshot: 'rgba(0, 0, 0, 0.10) 0 16px 32px -8px'
popover: 'rgba(0, 0, 0, 0.08) 0 16px 40px -16px'
modal: 'rgba(0, 0, 0, 0.12) 0 24px 64px -16px'
ring: '0 0 0 2px #611f69'
accessibility:
contrast-text-on-bg: 16.8 # #1d1c1d on #ffffff — AAA at all sizes
contrast-text-on-brand: 9.6 # #ffffff on #611f69 — AAA at body sizes
contrast-text-soft-on-bg: 9.0 # #454545 on #ffffff — AAA
contrast-text-on-cream: 14.7 # #1d1c1d on #f4ede4 — AAA
focus-ring: '2px solid #611f69 with 2px offset'
reduced-motion-honored: true
keyboard-nav: 'visible focus on every interactive surface; tab order matches visual'
prose-line-length: 'capped at 720px for readability'
dark-mode: null # marketing surface is light-only; the in-product Slack workspace ships its own aubergine-dark theme separately
---
## 1. Visual Theme & Atmosphere
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
## 2. Color Palette & Roles
### 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.
## 3. Typography Rules
### 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.
## 4. Component Stylings
### 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.
## 5. Layout Principles
### 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.
## 6. Shapes & Radius Scale
| 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.
## 7. Depth & Elevation
| 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.
## 8. Interaction & Motion
### 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.
## 9. Accessibility & A11y
### 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**: `<nav aria-label="Main">` with skip-link to main content.
- **Disclosure**: `<button aria-expanded aria-controls>` for collapsible sections.
- **Dialog**: `role="dialog" aria-modal="true" aria-labelledby` with focus trap and Esc-to-close.
- **Combobox** (search, regional selector): `role="combobox" aria-expanded aria-autocomplete="list"`.
- **Live regions**: `aria-live="polite"` for form validation messages.
- **Screenshot cards**: include `<figure>` + `<figcaption>` describing the in-product UI shown.
### Keyboard Navigation
- Tab order matches visual flow: skip-link → nav → hero CTA → main content → footer.
- All buttons, links, inputs reachable via Tab; modals trap focus inside until dismissed.
- `Esc` closes modals and the mobile menu sheet.
- Arrow keys navigate within tab groups (FAQ, pricing-tier comparisons).
### Screen Reader Hints
- All-caps button copy is set with `text-transform: uppercase` (CSS), not capital letters in markup, so screen readers announce the natural-case word ("Get started" not "G-E-T-S-T-A-R-T-E-D").
- Decorative Slack-icon lozenges have `aria-hidden="true"`.
- Icon-only buttons have `aria-label`.
- The Slack wordmark uses `aria-label="Slack"`.
### Reduced Motion
Honoured via the global media query. All translate/scale animations become opacity-only; durations halve.
## 10. Responsive Behavior
### 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.
## 11. Content & Voice
### Tone
**Corporate-warm, work-positive, enterprise-direct.** Slack writes like a workplace tool that has been bought by Salesforce and now needs to sell to IT departments while preserving the original Slack personality. Headlines pose work-positive claims ("Where work happens"); subheads explain enterprise capabilities; product copy carries small jokes carried over from pre-Salesforce Slack but at lower density. The voice is the inverse of consumer-friendly Notion/Linear — it's intentionally enterprise, intentionally B2B, intentionally licensed-software.
### Microcopy Patterns
- **Button verbs (all-caps)**: "GET STARTED," "REQUEST A DEMO," "TRY FOR FREE," "TALK TO SALES." The all-caps register is reserved for primary CTAs only.
- **Button verbs (sentence case, ghost/secondary)**: "Watch the demo," "Read more," "Sign in." Used for nav and quiet third actions.
- **Error messages**: "Something went wrong. Please try again or [contact support]." Standard corporate-polite.
- **Success confirmations**: "Saved." "Thanks — your request was submitted. We'll be in touch soon." Brief, accountable.
- **Loading states**: "Loading…" "Connecting…" — context-specific where possible.
### Empty States
What they say: explain the state and offer the next step. *"No channels yet. Create one or join a teammate's channel to get started."*
What they don't say: "Oops!", "Whoops!", any apologetic exclamation. Empty states are normal, not failures.
### CTA Verb Conventions
- Primary on hero: "GET STARTED," "REQUEST A DEMO," "TRY FOR FREE"
- Secondary: "WATCH THE DEMO," "READ THE GUIDE," "SEE PRICING"
- Footer: "Read the blog," "Browse integrations," "Sign in," "Help center"
The all-caps register is the brand's deliberate enterprise-B2B signal; it sets Slack apart from Notion/Linear/Vercel's sentence-case register. Slack doesn't trade on consumer-friendly approachability — it trades on enterprise-software credibility.
## 12. Dark Mode & Theming
**Marketing surface is light-only — no dark variant offered.** The Slack marketing site at `slack.com` is intentionally light-canonical: the cream `#f4ede4` panels, pure-white surfaces, and aubergine accents are calibrated for a light canvas. A dark mode would require re-keying the entire palette and would dilute the corporate-Salesforce register that distinguishes Slack from Discord (which ships dark-canonical) and from Twitch (which is dark-default).
The product UI (the Slack workspace itself) handles its own theming separately and ships several theme variants — including the famous "Aubergine" theme that uses `#4a154b` as the sidebar ground, the "Hoth" white-light theme, and several user-configurable variants. That product theming is documented at the product layer, not on the marketing surface. When the marketing site shows in-product Slack screenshots, the screenshots usually display the Aubergine theme so the brand identity (aubergine sidebar + blue highlight bar) is visible inside the marketing context.
If a downstream surface ever needed a dark companion (e.g. a future product launch keynote page), the rule would be: keep the aubergine accents at full saturation, swap white for `#1a1a1a`, lift cards to `#252525`, and replace cream panels with `#2a2520` — but this is not currently shipped on the marketing surface.
## 13. Lineage & Influences
Slack's design DNA is **Pentagram-rebrand survival inside the Salesforce design system**. The aubergine `#4a154b` and `#611f69` accents survive from the 2019 Pentagram-led Slack rebrand and are the only chromatic legacy preserved post-Salesforce-acquisition. The Salesforce-Avant-Garde + Salesforce-Sans typographic pairing comes from the **Salesforce Lightning Design System** — a deliberate post-acquisition decision to position Slack visually inside the Salesforce family rather than the SaaS/work-tool family. The 4px button radius, ALL-CAPS button copy, and 1280px page width are Salesforce design-system standards.
What it inherits: Pentagram's 2019 Slack rebrand (the aubergine palette, the multi-color lozenge mark, the warm cream secondary canvas); Salesforce Lightning Design System (Salesforce-Sans / Avant-Garde, 4px corner CTA register, soft-shadow card pattern); ITC Avant Garde Gothic by Herb Lubalin (the 1970s geometric source for Salesforce-Avant-Garde). What it borrows from contemporaries: Stripe's hairline-border restraint (used softer here), corporate-web shadow conventions for cards. What it rejects: rounded-pill consumer-SaaS conventions (Notion, Linear), illustrated mascots (Discord, Mailchimp), dark-canonical themes (Discord), neon brand accents (Replit).
**Named influences:**
- **Pentagram (2019 Slack rebrand)** — Aubergine `#4a154b` and the original wordmark survive the Salesforce acquisition. *https://www.pentagram.com/work/slack*
- **Salesforce Lightning Design System** — Salesforce-Sans / Avant-Garde + 4px corner CTA register. *https://lightningdesignsystem.com*
- **ITC Avant Garde Gothic (Herb Lubalin, 1970)** — The 1970s display cut Salesforce-Avant-Garde derives from. *https://en.wikipedia.org/wiki/ITC_Avant_Garde*
- **Salesforce in-house brand team** — Post-acquisition design-system unification, marketing-kit reissue (2022).
- **Stripe** — Adjacent precedent for hairline-border restraint and editorial-blue link colour.
- **The Slack pre-Salesforce brand team** — Original aubergine palette, multi-color lozenge mark, cream cream-and-color storytelling panels.
## 14. Do's and Don'ts
### Do
- **Do** use 4px button corners and ALL-CAPS button copy. Slack's marketing buttons are deliberately enterprise-B2B; a rounded pill with sentence case would erase the differentiation from Notion/Linear.
- **Do** use the cream `#f4ede4` ground for storytelling panels. It's the warmth signal that keeps the white-canvas sections from feeling sterile.
- **Do** pair Salesforce-Avant-Garde with Salesforce-Sans. The two-family marriage is a quiet signature of Salesforce-owned products.
- **Do** preserve the aubergine triad — `#4a154b` for sidebar/wordmark, `#611f69` for CTA. Both survive the Pentagram rebrand and are the brand's defining colors.
- **Do** show in-product Slack screenshots with the Aubergine theme so the sidebar + highlight bar appear as a recurring branding device.
- **Do** use eyebrows at 13px / 700 / `0.10em` uppercase tracking. The wide tracking distinguishes Slack eyebrows from sentence-case eyebrows.
- **Do** ship classic SaaS shadows — neutral grey, mid-opacity, soft-blur. `rgba(0, 0, 0, 0.06) 0 8px 24px` is the canonical card shadow.
- **Do** use editorial blue `#1264a3` for body links. The Pentagram triad's blue is the link layer.
- **Do** alternate white sections with cream `#f4ede4` storytelling panels for tonal depth.
- **Do** maintain 4px radius on inputs, buttons, dropdowns, and chips — the consistency is the corporate signal.
### Don't
- **Don't** use full pills (`9999px`) anywhere on the marketing surface. The system rejects that convention entirely.
- **Don't** spread aubergine to full panel grounds. It's a CTA fill and a sidebar illustration color — backgrounds at that saturation read as competitor (Twitch, Discord) territory.
- **Don't** introduce a third type family. Salesforce-Sans handles body, labels, and mono captions; Salesforce-Avant-Garde handles display. An editorial serif breaks the system.
- **Don't** drop the all-caps register from primary CTAs. Going to sentence-case erases the enterprise-B2B differentiation.
- **Don't** apply warm-tinted shadows. Slack's shadows are neutral grey — corporate-web, not editorial-warm.
- **Don't** ship a dark-mode marketing surface. The Slack marketing is light-canonical; dark themes are product-layer decisions.
- **Don't** use rounded SaaS-pill CTAs. The 4px corner is part of the brand discipline.
- **Don't** introduce purple gradients or rainbow meshes. The aubergine + cream + editorial-blue triad is the system.
- **Don't** mix consumer-SaaS verbs ("Sign up free!", "Get started today!") with the brand voice. The tone is enterprise-warm.
- **Don't** crowd the page beyond corporate-web density. Section gutters at 80–128px are part of the rhythm.
## 15. Agent Prompt Guide
### Quick Color Reference
```
bg: #ffffff
bg-cream: #f4ede4
text: #1d1c1d
brand-aubergine: #611f69
brand-aubergine-deep: #4a154b
accent-blue: #1264a3
accent-yellow: #ecb12f
accent-green: #2eb67d
accent-red: #e01e5a
border: #dddddd
shadow-card: rgba(0, 0, 0, 0.06) 0 8px 24px
```
### Example Component Prompts
1. **"Create a hero in Slack style — pure white `#ffffff` canvas, 48px headline in Salesforce-Avant-Garde weight 700 with `-0.012em` tracking, 18px Salesforce-Sans body in near-black `#1d1c1d` at 1.5 line-height, single primary CTA in aubergine `#611f69` 4px-radius pill rect with all-caps white label `'GET STARTED'` (Salesforce-Sans 700 / 14px / `0.05em` tracking, padding `19px 40px 20px`), no gradient, no animation. Reading column capped at 720px."**
2. **"Design a feature card in Slack style — white `#ffffff` background, 12px radius, 1px `#eeeeee` hairline border, 32px interior padding, 24px Salesforce-Avant-Garde 700 heading, 16px Salesforce-Sans 400 body, soft drop shadow `rgba(0, 0, 0, 0.06) 0 8px 24px`, hover intensifies shadow to `rgba(0, 0, 0, 0.08) 0 12px 32px`."**
3. **"Build a storytelling panel — full-bleed cream `#f4ede4` background, 80–128px vertical padding, 32px Salesforce-Avant-Garde 700 heading in near-black `#1d1c1d`, 18px Salesforce-Sans body in near-black, single primary aubergine pill rect CTA with all-caps copy."**
4. **"Compose a screenshot card with in-product Slack UI — white `#ffffff` outer card at 8px radius with `rgba(0, 0, 0, 0.10) 0 16px 32px -8px` shadow, no padding (screenshot fills frame), `#dddddd` 1px border. Inner screenshot shows the Aubergine theme with `#4a154b` sidebar and `#1264a3` highlight bar — the recurring brand-identity device."**
5. **"Render an eyebrow + section header pair — Salesforce-Sans 700 caps at 13px / `0.10em` tracking / `#717274`, 8px gap, then Salesforce-Avant-Garde 32px / 700 / `-0.008em` in near-black on white."**
6. **"Create the primary nav — 72px header height, white `#ffffff` background with 1px `#dddddd` bottom border, Slack lozenge logo + aubergine `#4a154b` wordmark, links 14px Salesforce-Sans 600 (sentence case for nav) with aubergine-on-hover, right-aligned ghost 'Sign in' + aubergine 4px-radius pill rect 'GET STARTED' (all-caps, Salesforce-Sans 700) pair."**
### Iteration Guide
1. **Start with pure white + cream panels.** If everything is white-on-white, you've drifted toward Mintlify. The cream `#f4ede4` storytelling panels are the warmth signal.
2. **Switch to Salesforce-Avant-Garde + Salesforce-Sans.** Inter or system-ui collapses the brand into Vercel/Mintlify territory. The 1970s ITC Avant Garde geometric forms are the differentiator.
3. **Drop the pill, use 4px.** If buttons are pill-9999 or even 8–12px, the brand reads as Notion/Linear/Vercel. The 4px corner is the Salesforce-system tell.
4. **Switch CTA copy to all-caps.** "Get Started" → "GET STARTED" with `0.05em` tracking, weight 700, 14px. The register flip is the enterprise-B2B signal.
5. **Use the aubergine triad.** `#611f69` for CTA fill, `#4a154b` for wordmark/sidebar, `#1264a3` for body links. Don't introduce a fourth color or shift the aubergine hue.
6. **Add classic SaaS shadows on cards.** `rgba(0, 0, 0, 0.06) 0 8px 24px` — neutral grey, soft, mid-opacity. Don't tint the shadow warm or cool.
7. **Show product screenshots inside cards with Aubergine theme.** The aubergine sidebar + blue highlight inside the screenshot is a recurring brand-identity device.
8. **Calm the verbs in non-CTA copy, but keep CTAs all-caps.** "Watch the demo" stays sentence case for ghost actions; "REQUEST A DEMO" stays all-caps for primary. The register split is part of the system.
1. Visual Theme & Atmosphere
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
#ffffffcanvas with cream#f4ede4panel 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.05emtracking — enterprise-B2B register - Cream
#f4ede4warmth 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
2. Color Palette & Roles
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-primaryadjacent 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)
#ffffffpure white. - surface-1 (cream panel)
#f4ede4warm cream. - surface-2 (cream-deep)
#ebe1d2deeper 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, borderrgba(46, 182, 125, 0.30). - warning — bg
#fef4e0(yellow wash from Slack triad), text#7a5a00, borderrgba(236, 177, 47, 0.30). - danger — bg
#fde6ee(red wash from Slack triad), text#a8113a, borderrgba(224, 30, 90, 0.30). - info — bg
#e3f0fa(blue wash from Slack triad), text#0a4d7a, borderrgba(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.
3. Typography Rules
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:
ligaandkernalways on;tnumenabled 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.015emat 64px,-0.012emat 48–56px,-0.008emat 32px,-0.005emat 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.
4. Component Stylings
Buttons
Primary (Aubergine 4px Pill Rect)
- Background:
#611f69. Text:#ffffff, Salesforce-Sans 700 / 14px / uppercase /0.05emtracking. - Padding:
19px 40px 20px(asymmetric vertical to optical-center the all-caps copy). Radius:4px. No border. - Hover: bg →
#4a154b(drops to sidebar shade); transition200ms 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 →
#f4e8f5aubergine 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 →
#611f69aubergine. - 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; transition200ms. - Use: Default feature card — distinctly more “elevated” than the in-product chrome.
Cream Storytelling Panel
- Background:
#f4ede4warm 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
#4a154baubergine sidebar +#1264a3blue 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 #611f69aubergine 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
#4a154bwordmark text. - Nav links: Salesforce-Sans 600 / 14px, colour
#1d1c1d, padding8px 14px. Hover →#611f69aubergine. - 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.
5. Layout Principles
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
#f4ede4ground 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
#eeeeeeborder-subtle hairlines or by spacing.
6. Shapes & Radius Scale
| 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.
7. Depth & Elevation
| 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.
8. Interaction & Motion
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; transition200ms ease-standard. No lift, no scale. - Button hover (outlined): bg transparent →
#f4e8f5aubergine wash. - Card hover: shadow intensifies from
rgba(0, 0, 0, 0.06) 0 8px 24pxtorgba(0, 0, 0, 0.08) 0 12px 32px; no border change. - Link hover: colour
#1264a3→#0a4d7aover 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.
9. Accessibility & A11y
Contrast Pairs
#1d1c1dtext on#ffffffbg: 16.8:1 — AAA at all sizes.#454545text on#ffffffbg: 9.0:1 — AAA at body sizes.#717274text on#ffffffbg: 5.0:1 — AA at body sizes.#fffffftext on#611f69aubergine button: 9.6:1 — AAA at body sizes.#1d1c1dtext on#f4ede4cream panel: 14.7:1 — AAA at all sizes.#1264a3link on#ffffffbg: 6.4:1 — AAA.#4a154btext on#f4e8f5aubergine chip: 11.2:1 — AAA.
Focus Indicators
- Default focus ring:
0 0 0 2px #611f69aubergine 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: nonewithout a replacement.
ARIA Patterns
- Navigation:
<nav aria-label="Main">with skip-link to main content. - Disclosure:
<button aria-expanded aria-controls>for collapsible sections. - Dialog:
role="dialog" aria-modal="true" aria-labelledbywith focus trap and Esc-to-close. - Combobox (search, regional selector):
role="combobox" aria-expanded aria-autocomplete="list". - Live regions:
aria-live="polite"for form validation messages. - Screenshot cards: include
<figure>+<figcaption>describing the in-product UI shown.
Keyboard Navigation
- Tab order matches visual flow: skip-link → nav → hero CTA → main content → footer.
- All buttons, links, inputs reachable via Tab; modals trap focus inside until dismissed.
Esccloses modals and the mobile menu sheet.- Arrow keys navigate within tab groups (FAQ, pricing-tier comparisons).
Screen Reader Hints
- All-caps button copy is set with
text-transform: uppercase(CSS), not capital letters in markup, so screen readers announce the natural-case word (“Get started” not “G-E-T-S-T-A-R-T-E-D”). - Decorative Slack-icon lozenges have
aria-hidden="true". - Icon-only buttons have
aria-label. - The Slack wordmark uses
aria-label="Slack".
Reduced Motion
Honoured via the global media query. All translate/scale animations become opacity-only; durations halve.
10. Responsive Behavior
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
srcsetwith 1x/2x/3x; aspect-ratio enforced. - Hero imagery uses
aspect-ratioto 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.
11. Content & Voice
Tone
Corporate-warm, work-positive, enterprise-direct. Slack writes like a workplace tool that has been bought by Salesforce and now needs to sell to IT departments while preserving the original Slack personality. Headlines pose work-positive claims (“Where work happens”); subheads explain enterprise capabilities; product copy carries small jokes carried over from pre-Salesforce Slack but at lower density. The voice is the inverse of consumer-friendly Notion/Linear — it’s intentionally enterprise, intentionally B2B, intentionally licensed-software.
Microcopy Patterns
- Button verbs (all-caps): “GET STARTED,” “REQUEST A DEMO,” “TRY FOR FREE,” “TALK TO SALES.” The all-caps register is reserved for primary CTAs only.
- Button verbs (sentence case, ghost/secondary): “Watch the demo,” “Read more,” “Sign in.” Used for nav and quiet third actions.
- Error messages: “Something went wrong. Please try again or [contact support].” Standard corporate-polite.
- Success confirmations: “Saved.” “Thanks — your request was submitted. We’ll be in touch soon.” Brief, accountable.
- Loading states: “Loading…” “Connecting…” — context-specific where possible.
Empty States
What they say: explain the state and offer the next step. “No channels yet. Create one or join a teammate’s channel to get started.” What they don’t say: “Oops!”, “Whoops!”, any apologetic exclamation. Empty states are normal, not failures.
CTA Verb Conventions
- Primary on hero: “GET STARTED,” “REQUEST A DEMO,” “TRY FOR FREE”
- Secondary: “WATCH THE DEMO,” “READ THE GUIDE,” “SEE PRICING”
- Footer: “Read the blog,” “Browse integrations,” “Sign in,” “Help center”
The all-caps register is the brand’s deliberate enterprise-B2B signal; it sets Slack apart from Notion/Linear/Vercel’s sentence-case register. Slack doesn’t trade on consumer-friendly approachability — it trades on enterprise-software credibility.
12. Dark Mode & Theming
Marketing surface is light-only — no dark variant offered. The Slack marketing site at slack.com is intentionally light-canonical: the cream #f4ede4 panels, pure-white surfaces, and aubergine accents are calibrated for a light canvas. A dark mode would require re-keying the entire palette and would dilute the corporate-Salesforce register that distinguishes Slack from Discord (which ships dark-canonical) and from Twitch (which is dark-default).
The product UI (the Slack workspace itself) handles its own theming separately and ships several theme variants — including the famous “Aubergine” theme that uses #4a154b as the sidebar ground, the “Hoth” white-light theme, and several user-configurable variants. That product theming is documented at the product layer, not on the marketing surface. When the marketing site shows in-product Slack screenshots, the screenshots usually display the Aubergine theme so the brand identity (aubergine sidebar + blue highlight bar) is visible inside the marketing context.
If a downstream surface ever needed a dark companion (e.g. a future product launch keynote page), the rule would be: keep the aubergine accents at full saturation, swap white for #1a1a1a, lift cards to #252525, and replace cream panels with #2a2520 — but this is not currently shipped on the marketing surface.
13. Lineage & Influences
Slack’s design DNA is Pentagram-rebrand survival inside the Salesforce design system. The aubergine #4a154b and #611f69 accents survive from the 2019 Pentagram-led Slack rebrand and are the only chromatic legacy preserved post-Salesforce-acquisition. The Salesforce-Avant-Garde + Salesforce-Sans typographic pairing comes from the Salesforce Lightning Design System — a deliberate post-acquisition decision to position Slack visually inside the Salesforce family rather than the SaaS/work-tool family. The 4px button radius, ALL-CAPS button copy, and 1280px page width are Salesforce design-system standards.
What it inherits: Pentagram’s 2019 Slack rebrand (the aubergine palette, the multi-color lozenge mark, the warm cream secondary canvas); Salesforce Lightning Design System (Salesforce-Sans / Avant-Garde, 4px corner CTA register, soft-shadow card pattern); ITC Avant Garde Gothic by Herb Lubalin (the 1970s geometric source for Salesforce-Avant-Garde). What it borrows from contemporaries: Stripe’s hairline-border restraint (used softer here), corporate-web shadow conventions for cards. What it rejects: rounded-pill consumer-SaaS conventions (Notion, Linear), illustrated mascots (Discord, Mailchimp), dark-canonical themes (Discord), neon brand accents (Replit).
Named influences:
- Pentagram (2019 Slack rebrand) — Aubergine
#4a154band the original wordmark survive the Salesforce acquisition. https://www.pentagram.com/work/slack - Salesforce Lightning Design System — Salesforce-Sans / Avant-Garde + 4px corner CTA register. https://lightningdesignsystem.com
- ITC Avant Garde Gothic (Herb Lubalin, 1970) — The 1970s display cut Salesforce-Avant-Garde derives from. https://en.wikipedia.org/wiki/ITC_Avant_Garde
- Salesforce in-house brand team — Post-acquisition design-system unification, marketing-kit reissue (2022).
- Stripe — Adjacent precedent for hairline-border restraint and editorial-blue link colour.
- The Slack pre-Salesforce brand team — Original aubergine palette, multi-color lozenge mark, cream cream-and-color storytelling panels.
14. Do’s and Don’ts
Do
- Do use 4px button corners and ALL-CAPS button copy. Slack’s marketing buttons are deliberately enterprise-B2B; a rounded pill with sentence case would erase the differentiation from Notion/Linear.
- Do use the cream
#f4ede4ground for storytelling panels. It’s the warmth signal that keeps the white-canvas sections from feeling sterile. - Do pair Salesforce-Avant-Garde with Salesforce-Sans. The two-family marriage is a quiet signature of Salesforce-owned products.
- Do preserve the aubergine triad —
#4a154bfor sidebar/wordmark,#611f69for CTA. Both survive the Pentagram rebrand and are the brand’s defining colors. - Do show in-product Slack screenshots with the Aubergine theme so the sidebar + highlight bar appear as a recurring branding device.
- Do use eyebrows at 13px / 700 /
0.10emuppercase tracking. The wide tracking distinguishes Slack eyebrows from sentence-case eyebrows. - Do ship classic SaaS shadows — neutral grey, mid-opacity, soft-blur.
rgba(0, 0, 0, 0.06) 0 8px 24pxis the canonical card shadow. - Do use editorial blue
#1264a3for body links. The Pentagram triad’s blue is the link layer. - Do alternate white sections with cream
#f4ede4storytelling panels for tonal depth. - Do maintain 4px radius on inputs, buttons, dropdowns, and chips — the consistency is the corporate signal.
Don’t
- Don’t use full pills (
9999px) anywhere on the marketing surface. The system rejects that convention entirely. - Don’t spread aubergine to full panel grounds. It’s a CTA fill and a sidebar illustration color — backgrounds at that saturation read as competitor (Twitch, Discord) territory.
- Don’t introduce a third type family. Salesforce-Sans handles body, labels, and mono captions; Salesforce-Avant-Garde handles display. An editorial serif breaks the system.
- Don’t drop the all-caps register from primary CTAs. Going to sentence-case erases the enterprise-B2B differentiation.
- Don’t apply warm-tinted shadows. Slack’s shadows are neutral grey — corporate-web, not editorial-warm.
- Don’t ship a dark-mode marketing surface. The Slack marketing is light-canonical; dark themes are product-layer decisions.
- Don’t use rounded SaaS-pill CTAs. The 4px corner is part of the brand discipline.
- Don’t introduce purple gradients or rainbow meshes. The aubergine + cream + editorial-blue triad is the system.
- Don’t mix consumer-SaaS verbs (“Sign up free!”, “Get started today!”) with the brand voice. The tone is enterprise-warm.
- Don’t crowd the page beyond corporate-web density. Section gutters at 80–128px are part of the rhythm.
15. Agent Prompt Guide
Quick Color Reference
bg: #ffffff
bg-cream: #f4ede4
text: #1d1c1d
brand-aubergine: #611f69
brand-aubergine-deep: #4a154b
accent-blue: #1264a3
accent-yellow: #ecb12f
accent-green: #2eb67d
accent-red: #e01e5a
border: #dddddd
shadow-card: rgba(0, 0, 0, 0.06) 0 8px 24pxExample Component Prompts
-
“Create a hero in Slack style — pure white
#ffffffcanvas, 48px headline in Salesforce-Avant-Garde weight 700 with-0.012emtracking, 18px Salesforce-Sans body in near-black#1d1c1dat 1.5 line-height, single primary CTA in aubergine#611f694px-radius pill rect with all-caps white label'GET STARTED'(Salesforce-Sans 700 / 14px /0.05emtracking, padding19px 40px 20px), no gradient, no animation. Reading column capped at 720px.” -
“Design a feature card in Slack style — white
#ffffffbackground, 12px radius, 1px#eeeeeehairline border, 32px interior padding, 24px Salesforce-Avant-Garde 700 heading, 16px Salesforce-Sans 400 body, soft drop shadowrgba(0, 0, 0, 0.06) 0 8px 24px, hover intensifies shadow torgba(0, 0, 0, 0.08) 0 12px 32px.” -
“Build a storytelling panel — full-bleed cream
#f4ede4background, 80–128px vertical padding, 32px Salesforce-Avant-Garde 700 heading in near-black#1d1c1d, 18px Salesforce-Sans body in near-black, single primary aubergine pill rect CTA with all-caps copy.” -
“Compose a screenshot card with in-product Slack UI — white
#ffffffouter card at 8px radius withrgba(0, 0, 0, 0.10) 0 16px 32px -8pxshadow, no padding (screenshot fills frame),#dddddd1px border. Inner screenshot shows the Aubergine theme with#4a154bsidebar and#1264a3highlight bar — the recurring brand-identity device.” -
“Render an eyebrow + section header pair — Salesforce-Sans 700 caps at 13px /
0.10emtracking /#717274, 8px gap, then Salesforce-Avant-Garde 32px / 700 /-0.008emin near-black on white.” -
“Create the primary nav — 72px header height, white
#ffffffbackground with 1px#ddddddbottom border, Slack lozenge logo + aubergine#4a154bwordmark, links 14px Salesforce-Sans 600 (sentence case for nav) with aubergine-on-hover, right-aligned ghost ‘Sign in’ + aubergine 4px-radius pill rect ‘GET STARTED’ (all-caps, Salesforce-Sans 700) pair.”
Iteration Guide
- Start with pure white + cream panels. If everything is white-on-white, you’ve drifted toward Mintlify. The cream
#f4ede4storytelling panels are the warmth signal. - Switch to Salesforce-Avant-Garde + Salesforce-Sans. Inter or system-ui collapses the brand into Vercel/Mintlify territory. The 1970s ITC Avant Garde geometric forms are the differentiator.
- Drop the pill, use 4px. If buttons are pill-9999 or even 8–12px, the brand reads as Notion/Linear/Vercel. The 4px corner is the Salesforce-system tell.
- Switch CTA copy to all-caps. “Get Started” → “GET STARTED” with
0.05emtracking, weight 700, 14px. The register flip is the enterprise-B2B signal. - Use the aubergine triad.
#611f69for CTA fill,#4a154bfor wordmark/sidebar,#1264a3for body links. Don’t introduce a fourth color or shift the aubergine hue. - Add classic SaaS shadows on cards.
rgba(0, 0, 0, 0.06) 0 8px 24px— neutral grey, soft, mid-opacity. Don’t tint the shadow warm or cool. - Show product screenshots inside cards with Aubergine theme. The aubergine sidebar + blue highlight inside the screenshot is a recurring brand-identity device.
- Calm the verbs in non-CTA copy, but keep CTAs all-caps. “Watch the demo” stays sentence case for ghost actions; “REQUEST A DEMO” stays all-caps for primary. The register split is part of the system.
Drop slack into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add slack 2 · ship landing page
npx agentkit init --design slack light editorial
Stripe
Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, sig…
Docs
Install
Stripe
webdesignhot
light editorial
Notion
Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed…
Docs
Install
Notion
webdesignhot
dark minimal
Linear
Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pi…
Docs
Install
Linear
webdesignhot