Slack

Overview

Slacc's design language centers on a deep aubergine primary ({colors.primary}) — 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}) which reads as a gentler echo of the primary surface. Inline links shift to a saturated blue ({colors.link-blue}) — the brand's only chromatic departure from the aubergine-and-cream world.

Key Characteristics: - Single aubergine primary ({colors.primary}) 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} / {colors.canvas-lavender}) 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}) — 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.

Colors

Source pages: home (/), /features/channels, /pricing, /contact-sales.

Brand & Accent

• Aubergine ({colors.primary} — #4a154b): The brand's primary surface and CTA color. Deep, warm purple with a hint of ruby — used on filled buttons, the featured pricing tier, the footer band, and the brand wordmark.
• Aubergine Deep ({colors.primary-deep} — #481a54): A near-identical sibling of {colors.primary} extracted from a different surface; treat as functionally equivalent.
• Aubergine Press ({colors.primary-press} — #611f69): Pressed-state lift of the primary, slightly lighter and warmer.
• Aubergine Tint ({colors.primary-tint} — #592466): Border accent on aubergine-on-aubergine surfaces.
• Link Blue ({colors.link-blue} — #1264a3): Inline link color — saturated, slightly warm blue. The only chromatic alternative to aubergine in body type.
• Link Hover ({colors.link-hover} — #3860be): A more saturated blue used on link hover state.

Surface

• Canvas White ({colors.canvas} — #ffffff): Default content surface.
• Canvas Cream ({colors.canvas-cream} — #f4ede4): Warm off-white used on hero gradients and feature bands. Adds editorial warmth.
• Canvas Lavender ({colors.canvas-lavender} — #f9f0ff): Pale lavender tint used as the secondary-button surface and as a soft section band.
• Surface Aubergine ({colors.surface-aubergine} — #4a154b): The primary aubergine reused as a surface — featured pricing tier, footer, dark feature bands.
• Hairline ({colors.hairline} — #e6e6e6): 1px borders on cards and table dividers.

Text

• Ink ({colors.ink} — #1d1d1d): Primary body text on light surfaces. Just shy of pure black.
• Ink Mute ({colors.ink-mute} — #696969): Secondary text, captions, helper copy.
• On Primary ({colors.on-primary} — #ffffff): Text on aubergine surfaces and filled CTAs.
• On Aubergine Mute ({colors.on-aubergine-mute} — #d9bdde): Secondary text on aubergine surfaces — a desaturated mauve that reads as muted-light.

Semantic

• Error ({colors.semantic-error} — #cc4117): Form error and destructive-action color.
• Success ({colors.semantic-success} — #007a5a): Inline success indicators.

Typography

Font Family

The display tier is Salesforce Avant Garde — a proprietary humanist sans with broad apertures and a slightly geometric character. When unavailable, fall back to the system font stack (system-ui, -apple-system, BlinkMacSystemFont).

The UI tier is **Salesforce Sans