Slacc Inspired Design System

Overview

Slack's design language centers on a deep aubergine primary ({colors.primary} — #4a154b) — the brand's most enduring visual asset — applied as the dominant button color, the footer band, the featured pricing tier, and the brand wordmark. Around that aubergine the system stages an unusually delicate ecosystem: cream-lavender hero canvases with soft pastel-mesh gradients (peachy oranges, lavenders, dusty greens) that pulse behind floating product UI mockups, with the actual interface chrome rendered in fine detail at 3:2 aspect.

Typography splits between two proprietary humanist sans families. The display tier runs at 700 weight at sizes 32–64px with negative letter-spacing for tight optical density on hero headlines. The UI tier uses the second family at 400–700 with slightly relaxed leading (1.55) — the brand's body copy reads quietly without competing with the aubergine moments.

Buttons are pill-shaped at 90px radius with an unusual amount of horizontal padding (28–30px), giving them a distinctly comfortable, almost over-padded feel. The primary aubergine pill is the only filled button in most contexts; secondary actions use a soft lavender pill ({colors.canvas-lavender} — #f9f0ff) which reads as a gentler echo of the primary surface. Inline links shift to a saturated blue ({colors.link-blue} — #1264a3) — the brand's only chromatic departure from the aubergine-and-cream world.

Key Characteristics:

• Single aubergine primary ({colors.primary} — #4a154b) reused across CTAs, the featured pricing tier, the footer band, and the wordmark — the brand's chromatic monotheism.
• Cream-lavender hero canvas ({colors.canvas-cream} — #f4ede4 / {colors.canvas-lavender} — #f9f0ff) with diffused pastel-mesh atmospheric gradients and floating UI mockups composited above.
• Pill buttons at {rounded.pill} (90px radius) with generous 28–30px horizontal padding — over-padded by SaaS-default standards, deliberately so.
• Tight negative letter-spacing on display sizes (-0.768px on 64px hero) for editorial-density headlines.
• Blue inline links ({colors.link-blue} — #1264a3) — the only non-aubergine chromatic accent in body type.
• Pastel-mesh gradient atmospherics: every hero band has a subtle peach-lavender-dusty-green wash behind it; product UI sits on top, never inside, the gradient.
• Statistics cards rendered in massive aubergine display type (90% / 43 / 87%) on white — quantitative emphasis through scale alone.

Known Gaps

• In-product chat surfaces: the spec captures public marketing pages only (home, /features/channels, /pricing, /contact-sales). The in-app chat interface — channels sidebar, message composer, threads pane, huddle UI — is not documented here.
• Workspace dark theme: Slack's in-product workspace ships dark variants (Aubergine, Monument, Choco, Ochin), but the public marketing site is light-only and this DESIGN.md follows the public surface.
• Pastel-mesh gradient implementation: documented as a CSS radial-gradient stack composed of peach, lavender, and dusty green stops, but the precise color stops, blur radii, and stop positions vary by hero band and were not extracted exhaustively.
• Form input error states: the semantic error color ({colors.semantic-error} — #cc4117) is documented, but the full outline + helper-text combination on validation failure was not captured.
• Loading skeletons: not visible on the extracted surfaces.
• Salesforce sub-product surfaces: since Slack's parent ships Sales Cloud, Service Cloud, and other branded products with overlapping visual systems, only the Slack-marketing surfaces are captured here.