Slacc Inspired Design System

Slack's design language is built around one enduring decision: a single deep aubergine (#4a154b) carries the entire brand. The color appears on every filled CTA, the featured pricing tier, the closing marketing band, and the wordmark itself. Around that one voltage the system stages an unusually delicate ecosystem of cream and lavender canvases (#f4ede4, #f9f0ff), pastel-mesh atmospheric gradients, and floating product UI mockups composited above the wash. The shape vocabulary is dominated by 90px pill buttons with 28–30px horizontal padding — over-padded compared to typical SaaS defaults, which is what gives the brand its distinctly comfortable, almost generous feel.

This page packages that system into a single DESIGN.md file in the Google Labs spec format. Inside: 22 color tokens grouped into brand, surface, text, and semantic families, 16 typography styles across two proprietary humanist sans faces (Salesforce Avant Garde for display, Salesforce Sans for UI), 7 corner radii anchored on the 90px pill, 7 spacing tokens stepping from 4px to 28px, and 22 documented components covering buttons, pricing cards, navigation, the aubergine footer band, and the pastel-mesh hero composites that define the brand's atmosphere.

A working React or Next.js developer feeds this file to Claude, Cursor, or Copilot and the agent reproduces Slack's chromatic restraint rather than a generic shadcn theme — one aubergine CTA per viewport, blue links at #1264a3, pill buttons at 90px radius, display headlines pulled tight with -0.768px tracking at 64px. The Salesforce typefaces are proprietary, so substitute Inter from Google Fonts at matching weights. The system is worth studying because it proves chromatic monotheism still works at marketing-site scale when the supporting cast — cream canvases, pastel-mesh gradients, generous pill padding — is calibrated precisely.