Slack — DESIGN.md preview

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

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 — 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.

Hierarchy

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

Principles

Tight tracking on display. Negative letter-spacing across 32–64px sizes; the proprietary face is wide by default, the negative tracking pulls it into editorial density.
Body at 1.55 leading. Slightly relaxed for marketing readability without crossing into airy / 1.7+ territory.
Caps for eyebrows. All eyebrows render uppercase with positive 0.96–0.144px tracking depending on size.

Note on Font Substitutes

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.

Layout

Spacing System

Base unit: 8px (with 4 / 12 / 16 / 20 / 24 / 28 sub-tokens for fine vertical rhythm).
Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 20px · {spacing.xxl} 24px · {spacing.huge} 28px.
Section padding: 64–96px on marketing surfaces; tightens to 48px on transactional pages.
Card internal padding: 32px on pricing cards; 48px on aubergine band cards.

Grid & Container

Marketing pages center in a ~1240px container with edge-bleeding pastel-mesh gradients escaping the container.
Pricing collapses 4-up → 2-up → 1-up at 992 / 768 breakpoints.
Statistics row: 3-column grid with massive 50px aubergine display numerals.

Whitespace Philosophy

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.

Elevation & Depth

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)

Decorative Depth

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.

Shapes

Border Radius Scale

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

Photography Geometry

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.

Components

Buttons

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

Background {colors.primary}, text {colors.on-primary}, type {typography.button-md}, padding 14px 28px, rounded {rounded.pill} 90px.
Pressed state button-primary-pill-pressed shifts background to {colors.primary-press}.

button-secondary-pill — the soft lavender alternative.

Background {colors.canvas-lavender}, text {colors.ink}, padding 10px 30px, same pill geometry. Used as the second action beside the primary aubergine pill.

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

Background {colors.canvas}, text {colors.primary}, 2px solid {colors.primary} border, same pill shape.

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

Background {colors.surface-aubergine} (transparent over the surface), text {colors.on-primary}, 2px solid {colors.on-primary} border, same pill shape.

Cards & Containers

card-pricing — standard pricing tier card.

Background {colors.canvas}, padding {spacing.xxl}+ (32px), rounded {rounded.xl} 16px, 1px {colors.hairline} border. Title in {typography.heading-lg}, price in {typography.display-md}, body in {typography.body-md}, CTA pinned to bottom as button-primary-pill.

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

Background {colors.surface-aubergine}, text {colors.on-primary}, otherwise identical to card-pricing. The aubergine fill is the brand's signature featured-tier choice.

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

Background {colors.canvas-cream}, text {colors.ink}, rounded {rounded.xl}, padding 32px.

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

Background {colors.surface-aubergine}, text {colors.on-primary}, padding 48px, rounded {rounded.xl} 16px.

card-stat — statistics callout card.

Background {colors.canvas}, text {colors.primary} rendered in {typography.display-lg} (50px aubergine numeral). Holds a single percentage/number with a small caption underneath.

Inputs & Forms

text-input — standard form field.

Background {colors.canvas}, text {colors.ink}, type {typography.body-md}, padding 10px 12px, rounded {rounded.sm} 4px, 1px {colors.hairline} border.

Navigation

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

Background {colors.canvas}, text {colors.ink}, padding {spacing.lg} {spacing.xxl}. Logo wordmark on the left, nav items center, two pill buttons on the right (button-secondary-pill for "Sign In", button-primary-pill for "Try For Free").

Pills, Tags, and Chips

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

Background {colors.canvas-cream}, text {colors.ink}, type {typography.micro-cap}, padding 4px 12px, rounded {rounded.pill}.

Signature Components

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.

Text {colors.link-blue} rendered in {typography.body-md}. No underline by default; underline appears on hover via the link-hover behavior.

link-on-aubergine — links inside aubergine surfaces.

Text {colors.on-primary} with persistent underline.

footer-aubergine — site-wide footer.

Background {colors.surface-aubergine}, text {colors.on-primary} rendered in {typography.caption}, padding {spacing.huge}+ {spacing.xxl} (32px 24px). Holds 4–5 columns of {colors.on-aubergine-mute} link groups, social icons, and a small legal/copyright row at the bottom.

Do's and Don'ts

Do

Reserve {colors.primary} aubergine for filled CTAs, the featured pricing tier, and the closing aubergine band — it's the brand's chromatic monotheism.
Use {rounded.pill} (90px) for every button across the system — never a rounded-rectangle button.
Pair display tiers with negative letter-spacing (-0.768px at 64px); the proprietary face needs the tracking pull.
Compose hero bands with pastel-mesh gradient backdrop + floating product UI mockup; the gradient is the depth.
Use {colors.link-blue} for inline links — it's the only chromatic departure from aubergine and is part of the brand voice.

Don't

Don't add a third accent color to the system — the aubergine + blue link combination is exhaustive.
Don't shrink button padding below 14px 28px — the over-padded pill is part of the brand feel.
Don't render display tiers at default tracking (0) — without negative letter-spacing the headlines read loose and unedited.
Don't put product UI screenshots inside cards — they sit ABOVE the pastel-mesh gradient, never inside chrome.
Don't use aubergine for body text — it's a surface and CTA color, not a type color at body sizes.
Don't replace the pill shape with a square button anywhere.

Responsive Behavior

Breakpoints

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

Touch Targets

Pill buttons hit ≥ 48×48px due to the over-padded geometry. WCAG AAA compliant.
Form fields stay at the 44px minimum height.

Collapsing Strategy

Display tiers stair-step 64 → 50 → 32 → 28 → 24 across breakpoints.
Pastel-mesh gradients re-tile on mobile to prevent the wash from disappearing entirely.
Floating product UI mockups crop to the most actionable inner panel on mobile.
Pricing tiers stair-step 4 → 2 → 1; aubergine featured tier stays distinguished.
Top nav collapses to hamburger below 768px; menu inherits canvas color.

Image Behavior

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.

Iteration Guide

Focus on ONE component at a time.
Reference component names and tokens directly ({colors.primary}, {button-primary-pill}-pressed, {rounded.pill}).
Run npx @google/design.md lint DESIGN.md after edits.
Add new variants as separate entries.
Default body to {typography.body-md}; reserve {typography.body-lg} for marketing leads.
Keep aubergine scarce — one filled aubergine button per viewport.
Pair every hero band with the pastel-mesh gradient backdrop; bare-canvas heroes read as off-brand.