Slack Design System

---

version: alpha

name: Slacc-Inspired-design-analysis

description: An inspired interpretation of Slacc's design language — a workplace messaging brand built on a deep aubergine primary, with cream-lavender hero gradients, blue inline links, and pill CTAs. The system pairs a proprietary humanist sans for display with a separate utility sans for body, and stages product UI mockups inside soft pastel-mesh hero composites that act as both decoration and feature explanation.

colors:

primary: "#4a154b"

primary-deep: "#481a54"

primary-press: "#611f69"

primary-tint: "#592466"

on-primary: "#ffffff"

ink: "#1d1d1d"

ink-mute: "#696969"

link-blue: "#1264a3"

link-hover: "#3860be"

canvas: "#ffffff"

canvas-cream: "#f4ede4"

canvas-lavender: "#f9f0ff"

surface-elev: "#ffffff"

surface-aubergine: "#4a154b"

hairline: "#e6e6e6"

hairline-strong: "#000000"

semantic-error: "#cc4117"

semantic-success: "#007a5a"

on-aubergine-mute: "#d9bdde"

typography:

display-xxl:

fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"

fontSize: 64px

fontWeight: 700

lineHeight: 1.12

letterSpacing: -0.768px

display-xl:

fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"

fontSize: 58px

fontWeight: 600

lineHeight: 1.25

letterSpacing: -0.464px

display-lg:

fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"

fontSize: 50px

fontWeight: 700

lineHeight: 1.12

letterSpacing: -0.6px

display-md:

fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"

fontSize: 32px

fontWeight: 700

lineHeight: 1.25

letterSpacing: -0.256px

heading-lg:

fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"

fontSize: 24px

fontWeight: 700

lineHeight: 1.33

letterSpacing: -0.096px

heading-md:

fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"

fontSize: 22px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0

heading-sm:

fontFamily: "Salesforce-Avant-Garde, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"

fontSize: 18px

fontWeight: 600

lineHeight: 1.56

letterSpacing: -0.0216px

body-lg:

fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif"

fontSize: 18px

fontWeight: 400

lineHeight: 1.55

letterSpacing: -0.0216px

body-md:

fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif"

fontSize: 16px

fontWeight: 400

lineHeight: 1.55

letterSpacing: 0

body-strong:

fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif"

fontSize: 16px

fontWeight: 700

lineHeight: 1.5

letterSpacing: 0.16px

button-lg:

fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif"

fontSize: 18px

fontWeight: 700

lineHeight: 1.0

letterSpacing: 0

button-md:

fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif"

fontSize: 16px

fontWeight: 700

lineHeight: 1.38

letterSpacing: 0.2px

button-cap:

fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif"

fontSize: 14.4px

fontWeight: 700

lineHeight: 1.0

letterSpacing: 0.144px

caption:

fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif"

fontSize: 14px

fontWeight: 400

lineHeight: 1.43

letterSpacing: 0.1px

micro-cap:

fontFamily: "Salesforce-Sans, system-ui, -apple-system, sans-serif"

fontSize: 12px

fontWeight: 700

lineHeight: 1.0

letterSpacing: 0.96px

rounded:

xs: 2px

sm: 4px

md: 8px

lg: 12px

xl: 16px

xxl: 48px

pill: 90px

spacing:

xs: 4px

sm: 8px

md: 12px

lg: 16px

xl: 20px

xxl: 24px

huge: 28px

components:

button-primary-pill:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.pill}"

padding: 14px 28px

button-primary-pill-pressed:

backgroundColor: "{colors.primary-press}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.pill}"

padding: 14px 28px

button-secondary-pill:

backgroundColor: "{colors.canvas-lavender}"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.pill}"

padding: 10px 30px

button-outline-aubergine:

backgroundColor: "{colors.canvas}"

textColor: "{colors.primary}"

typography: "{typography.button-md}"

rounded: "{rounded.pill}"

padding: 14px 28px

button-outline-on-aubergine:

backgroundColor: "{colors.surface-aubergine}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.pill}"

padding: 14px 28px

text-input:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.sm}"

padding: 10px 12px

pill-cap-shade:

backgroundColor: "{colors.canvas-cream}"

textColor: "{colors.ink}"

typography: "{typography.micro-cap}"

rounded: "{rounded.pill}"

padding: 4px 12px

card-pricing:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.xl}"

padding: 32px

card-pricing-featured:

backgroundColor: "{colors.surface-aubergine}"

textColor: "{colors.on-primary}"

typography: "{typography.body-md}"

rounded: "{rounded.xl}"

padding: 32px

card-feature-cream:

backgroundColor: "{colors.canvas-cream}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.xl}"

padding: 32px

card-aubergine-band:

backgroundColor: "{colors.surface-aubergine}"

textColor: "{colors.on-primary}"

typography: "{typography.body-lg}"

rounded: "{rounded.xl}"

padding: 48px

card-stat:

backgroundColor: "{colors.canvas}"

textColor: "{colors.primary}"

typography: "{typography.display-lg}"

rounded: "{rounded.xl}"

padding: 32px

nav-bar-light:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.xs}"

padding: 16px 24px

link-on-light:

backgroundColor: "{colors.canvas}"

textColor: "{colors.link-blue}"

typography: "{typography.body-md}"

rounded: "{rounded.xs}"

padding: 0px

link-on-aubergine:

backgroundColor: "{colors.surface-aubergine}"

textColor: "{colors.on-primary}"

typography: "{typography.body-md}"

rounded: "{rounded.xs}"

padding: 0px

footer-aubergine:

backgroundColor: "{colors.surface-aubergine}"

textColor: "{colors.on-primary}"

typography: "{typography.caption}"

rounded: "{rounded.xs}"

padding: 32px 24px

---

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:**

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

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** — a separate proprietary face used for body, captions, and button labels. Same fallback chain.

Both faces are proprietary and not freely available. Substitute with **Inter** (open-source via Google Fonts) at matching weights for both display and body — Inter is the closest open analogue across both tiers.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xxl}` | 64px | 700 | 1.12 | -0.768px | Marketing hero headline |

| `{typography.display-xl}` | 58px | 600 | 1.25 | -0.464px | Section openers |

| `{typography.display-lg}` | 50px | 700 | 1.12 | -0.6px | Statistics callouts |

| `{typography.display-md}` | 32px | 700 | 1.25 | -0.256px | Card / feature titles |

| `{typography.heading-lg}` | 24px | 700 | 1.33 | -0.096px | Pricing tier names |

| `{typography.heading-md}` | 22px | 600 | 1.4 | 0 | Sub-section heading |

| `{typography.heading-sm}` | 18px | 600 | 1.56 | -0.0216px | Compact card title |

| `{typography.body-lg}` | 18px | 400 | 1.55 | -0.0216px | Marketing body lead |

| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Default UI body |

| `{typography.body-strong}` | 16px | 700 | 1.5 | 0.16px | Emphasized body |

| `{typography.button-lg}` | 18px | 700 | 1.0 | 0 | Hero pill button label |

| `{typography.button-md}` | 16px | 700 | 1.38 | 0.2px | Standard pill button label |

| `{typography.button-cap}` | 14.4px | 700 | 1.0 | 0.144px | Compact pill label |

| `{typography.caption}` | 14px | 400 | 1.43 | 0.1px | Helper, footnote |

| `{typography.micro-cap}` | 12px | 700 | 1.0 | 0.96px | All-caps eyebrow |

Use **Inter** (open-source Google Fonts) for both display and UI tiers — Inter at 700 weight with `-0.768px` letter-spacing closely approximates the brand's display behavior. For maximum brand fidelity, **Lato** is a softer humanist alternative that pairs well at body sizes. Avoid System UI fonts on the body — the brand's subtle warmth disappears at default weights.

The pastel-mesh gradients fill most of the negative space on marketing pages — sections feel expansive without being literally empty. On transactional pages the gradients drop, and whitespace reverts to traditional 48px-section breathing room.

| Level | Treatment | Use |

|---|---|---|

| 0 | Flat | Default surface |

| 1 | `box-shadow: rgba(0,0,0,0.1) 0 5px 20px 0` | Floating buttons on hero |

| 2 | `box-shadow: rgba(0,0,0,0.1) 0 0 32px 0` | Product UI mockup composites |

| 3 | `box-shadow: rgba(0,0,0,0.2) 0 1px 10px 0` | Toast / notification chrome |

| 4 | `box-shadow: rgb(97,31,105) 0 0 0 1px inset` | Aubergine inset border (button focus, special chrome) |

The brand's depth language is the **pastel-mesh gradient** — peach, lavender, dusty green stops blurred together at large radii to create soft atmospheric backdrops behind product UI screenshots. The gradient is the brand's flavor of "depth without shadows": the eye perceives the product mockup as floating above a luminous backdrop without any literal lift.

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 2px | Hairline tags, status pills (rare) |

| `{rounded.sm}` | 4px | Form inputs |

| `{rounded.md}` | 8px | Compact card chrome, video frames |

| `{rounded.lg}` | 12px | Mid-size cards, secondary surface |

| `{rounded.xl}` | 16px | Pricing cards, feature cards |

| `{rounded.xxl}` | 48px | Stat badge backdrops |

| `{rounded.pill}` | 90px | All buttons |

The brand uses **product UI screenshots** more than photography. UI mockups sit on top of pastel-mesh gradients at roughly 4:3 aspect, with no shadow but with the gradient providing the "lift" the eye expects. Real photography appears in customer-logo strips and the occasional case-study card, treated as full-bleed inside `{rounded.xl}` containers.

**`button-primary-pill`** — the dominant CTA system-wide.

**`button-secondary-pill`** — the soft lavender alternative.

**`button-outline-aubergine`** — outline variant on white surfaces.

**`button-outline-on-aubergine`** — outline on aubergine canvas.

**`card-pricing`** — standard pricing tier card.

**`card-pricing-featured`** — the inverted aubergine featured tier.

**`card-feature-cream`** — feature explanation card on the cream track.

**`card-aubergine-band`** — large horizontal band card with aubergine fill, often containing the closing CTA of a marketing page.

**`card-stat`** — statistics callout card.

**`text-input`** — standard form field.

**`nav-bar-light`** — top nav across all marketing pages.

**`pill-cap-shade`** — small all-caps pill used as eyebrow above pricing-tier titles.

**Pastel-Mesh Gradient Backdrop** — peach (`#fff0e6`-ish) + lavender (`#e9d8ff`) + dusty green stops blurred together behind hero bands. Implemented as a CSS radial-gradient stack, not a single image. Provides the brand's depth/luminosity without literal shadows.

**Floating Product UI Mockup** — product screenshots framed in `{rounded.lg}` (12px) containers, positioned above the pastel-mesh gradient with no border or shadow. The gradient does the lifting.

**Aubergine Footer Band** — every marketing page closes with a full-bleed `card-aubergine-band` containing a closing CTA in white type. The band height is generous (~480–600px on desktop) and reads as the page's signature.

**`link-on-light`** — inline links in body copy on light surfaces.

**`link-on-aubergine`** — links inside aubergine surfaces.

**`footer-aubergine`** — site-wide footer.

| Name | Width | Key Changes |

|---|---|---|

| Wide | ≥ 1440px | Full-bleed pastel-mesh hero; pricing 4-up |

| Desktop | 1024–1440px | Default content max-width; pricing 4-up |

| Tablet | 768–1023px | Pricing 2-up; product UI mockups crop to focal panel |

| Mobile | < 768px | Pricing 1-up; hamburger nav; display-xxl drops 64 → 40px |

Product UI mockups use `srcset` for desktop / tablet / mobile crops; the mobile crop centers on the most actionable inner panel rather than scaling the whole composite down.

1. Focus on ONE component at a time.

2. Reference component names and tokens directly (`{colors.primary}`, `{button-primary-pill}-pressed`, `{rounded.pill}`).

3. Run `npx @google/design.md lint DESIGN.md` after edits.

4. Add new variants as separate entries.

5. Default body to `{typography.body-md}`; reserve `{typography.body-lg}` for marketing leads.

6. Keep aubergine scarce — one filled aubergine button per viewport.

7. Pair every hero band with the pastel-mesh gradient backdrop; bare-canvas heroes read as off-brand.