Slack

The Slack design system evokes a sense of vibrant, collaborative professionalism, grounded in a playful yet authoritative use of color. Deep purples and a vivid blue serve as primary brand identifiers, balanced against a clean, near-white canvas. Subtle gradients and distinct radial color washes provide depth and visual interest without overwhelming the functional UI, while custom typography maintains a unique, approachable voice. Prioritize Salesforce-Avant-Garde for all headings and large display text to maintain brand voice. Use Purple Heart (#611f69) for primary call-to-action buttons, ensuring a visible contrast against white or near-white backgrounds. Apply a 4px border-radius to all functional buttons and input fields for a consistent interactive element shape. Use Charcoal Black (#000000) for primary body text and headings on light backgrounds to ensure AAA contrast. Utilize Electric Blue (#1264a3) exclusively for interactive links and secondary accents, reserving it for clear action points. Maintain a comfortable elementGap of 16px for spacing between most UI elements, and cardPadding of 16px for internal card content. Implement the Magic Dust Gradient (linear-gradient(104deg, rgb(0, 0, 0) 9.56%, rgb(186, 1, 255) 102.66%)) sparingly, typically for hero sections or significant brand statements. Do not use generic system fonts; always map to Salesforce-Sans or Salesforce-Avant-Garde with appropriate substitutes. Avoid using multiple shades of purple for primary actions; stick to Purple Heart (#611f69) for consistency. Do not introduce sharp corners; maintain 4px or 16px border-radius based on component type, or 90px for pill shapes. Refrain from using Electric Blue (#1264a3) for large blocks of text; it is an accent and link color, not a primary text color. Do not neglect the subtle radial gradients in hero backgrounds; they contribute significantly to the playful brand feel. Avoid arbitrary elevation shadows; use the defined rgba(0, 0, 0, 0.1) 0px 0px 32px 0px for elevated elements.