Slack

Reference it for

• Aubergine #611f69 (Slack's primary purple) survives a post-acquisition rebrand. The lesson: keep one brand-defining colour intact even when the rest of the visual system changes.
• The 30-keyframe motion library with descriptive names like workspace-people-bump, dotFill, delayBackgroundSwap, slide-in--right-quick — each one named for what it does.
• cubic-bezier(0.165, 0.84, 0.44, 1) at 0.42s for compound hover transitions — Slack's bouncy snap-and-settle.
• Compound transition shorthand: box-shadow, color, background 0.42s, 0.42s, 0.42s cubic-bezier(...) — three properties at once on the same curve.
• The "slack from ⚡ Salesforce" lockup as the post-acquisition pattern for parent-brand attribution. Tiny secondary mark beneath the primary wordmark.
• workspace-people-bump — small avatar-bumping animation when new people join. Adds personality without being intrusive.
• A 0.5s opacity linear transition for slow fades — unusual to use linear easing on opacity, but it works for Slack's calm-feeling background swaps.
• The 4s max-height ease-in-out transition — for animated expand/collapse panels that take their time.

Do not copy

• Salesforce-Sans / Salesforce-Avant-Garde — bespoke and Salesforce-licensed.
• The exact aubergine #611f69 — strongly Slack-coded.
• 27 @font-face declarations — Salesforce's enterprise brand-bundle.
• The 30-keyframe library wholesale — borrow the named patterns but write keyframes globally with readable names.
• The "from ⚡ Salesforce" lockup unless the client is genuinely acquired.
• The 4-second max-height transition on every expander — only works for specific calm UX moments.
• 131 image requests on a single page.