The visual approach
Slack anchors its entire visual system on a single decision: aubergine (#611F69) as the primary brand color. This isn't the saturated blue of most SaaS products or the safe gray of enterprise software. It's a purple so dark it reads almost black in certain contexts, paired with true black (#1D1C1D) for type and structural elements.
The rest of the palette exists in service of function. Cyan (#36C5F0), green (#2EB67D), red (#E01E5A), and yellow (#ECB22E) map to semantic meaning—status indicators, notifications, presence signals. These aren't decorative. The brief shows no gradients, no overlays, no texture. Just flat color doing clear work.
Typography follows the same logic. Lato at 16px for body text, 700-weight reserved for headings from 36px up to a 72px hero. The system-ui fallback stack suggests they trust the OS fonts when Lato fails to load. Spacing runs in strict 4px increments: 4, 8, 12, 16, 24, 32, 48, 64, 96. Border radius maxes out at 12px for the largest components. Everything rounds to a number you can divide by four.
The component vocabulary is minimal: nav, hero, cta, pricing, card. No carousels, no accordions, no modals mentioned in the brief. The site structure implies they'd rather repeat a card pattern than introduce a new interaction model.
What works
The motion system earns its complexity budget. Slack uses staggered fade-in on scroll—each element animates from opacity: 0 to 1 while translating from translateY(20px) to 0. Timing is 400ms ease-out per element, with an 80–100ms delay increment between items. This creates a cascading effect that directs attention without feeling like a slideshow.
Hover states show similar discipline. Primary buttons lift 2px on hover (transform: translateY(-2px)) with a deepened shadow, executing in 200ms ease-out. Pricing cards get more theatrical treatment—4px lift with shadow blur expanding from 20px to 32px over 250ms, using cubic-bezier(0.2, 0.8, 0.2, 1) for a snappier feel. The brief specifies different easing curves for different contexts, which means someone made deliberate choices about perceived weight and responsiveness.
The focus state on search inputs adds a glow ring: box-shadow: 0 0 0 3px rgba(74,21,75,0.15) transitioning over 150ms. That rgba value pulls from the aubergine primary, reinforcing brand color even in micro-interactions. The brief notes smooth scroll behavior is enabled (scroll-behavior: smooth), which means anchor links glide rather than jump.
What doesn't appear: loading spinners, skeleton screens, progress bars. The brief describes "instant page loads with no heavy route transitions." Navigation feels immediate because they've optimized away the need to communicate waiting states. The only animated indicator mentioned is the typing ellipsis—a 1.4s CSS keyframe loop that pulses three dots.
What a builder can borrow
Start with the spacing scale. Slack's 4px base unit (4, 8, 12, 16, 24, 32, 48, 64, 96) gives you nine values that cover everything from icon padding to section gaps. Define these as CSS custom properties:
css
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
/* ... up to --space-9: 96px */
Ban arbitrary values. If a designer specs 18px, round to 16 or 20. The system stays consistent because it refuses exceptions.
Borrow the staggered fade-in pattern for feature lists or card grids. In your framework of choice, delay each item by index * 80 milliseconds. The effect scales—three items feel purposeful, twelve items feel orchestrated. The motion parameters are right there: 400ms duration, ease-out, starting from 20px below final position.
The aubergine-plus-semantics color model translates directly. Pick one brand color for identity (buttons, links, focus rings), then assign four functional colors to success, warning, error, and info states. Resist adding "secondary" or "tertiary" brand colors. Slack proves you don't need them.
Steal the border radius constraint. Their largest radius is 12px (--radius-xl). Buttons get 6px (--radius-medium), small chips get 4px (--radius-small). Capping the scale prevents border radius from becoming a stylistic variable. It stays architectural.
The hover lift on buttons—translateY(-2px) with shadow deepening—costs almost nothing to implement and reads as tactile feedback. Pair it with 200ms timing. Anything faster feels twitchy, anything slower feels laggy. Slack's spec gives you the answer.