{"id":"e26cb9b0-f876-41ff-9f24-fd67a6b9776c","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/e26cb9b0-f876-41ff-9f24-fd67a6b9776c","originalSiteUrl":"https://slack.com","capturedAt":"2026-04-13T18:33:51.895Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Slack","summary":"Vibrant digital workbench.","description":"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.","industry":"productivity","colorScheme":"light","colors":[{"name":"Canvas Ice","hex":"#fefbff","role":"Primary page background, expansive neutral space for content.","group":"neutral"},{"name":"Surface Frost","hex":"#ffffff","role":"Elevated card backgrounds, component containers.","group":"neutral"},{"name":"Whisper Cloud","hex":"#f9f0ff","role":"Subtle background for UI elements, light hovered states.","group":"neutral"},{"name":"Active Lavender","hex":"#f2defe","role":"Background for active navigation items, subtle highlights.","group":"neutral"},{"name":"Charcoal Black","hex":"#000000","role":"Primary text color for headings, body, and high-emphasis elements.","group":"neutral"},{"name":"Carbon Gray","hex":"#1d1c1d","role":"Secondary text and icon color, slightly softer than Charcoal Black.","group":"neutral"},{"name":"Pewter","hex":"#696969","role":"Tertiary text, muted labels, helper text.","group":"neutral"},{"name":"Cement Gray","hex":"#757575","role":"Informational text, list item details.","group":"neutral"},{"name":"Slate Border","hex":"#edeaed","role":"Subtle borders and dividers for UI separation.","group":"neutral"},{"name":"Medium Gray","hex":"#808080","role":"Placeholder text, disabled states, default icon color.","group":"neutral"},{"name":"Icon Gray","hex":"#5e5d60","role":"Specific icon color within navigation and utility areas.","group":"neutral"},{"name":"Dark Plum","hex":"#481a54","role":"Primary brand color, used for key UI components like navigation backgrounds and interactive elements.","group":"brand"},{"name":"Purple Heart","hex":"#611f69","role":"Primary button background, active states, and emphasized UI elements.","group":"brand"},{"name":"Dark Violet","hex":"#730394","role":"Accent text, links within dark backgrounds, and subtle branding elements.","group":"brand"},{"name":"Deep Aubergine","hex":"#3d0157","role":"Text color for buttons with transparent backgrounds, emphasizing interaction.","group":"brand"},{"name":"Grape Jelly","hex":"#2e0039","role":"Darkest brand shade, used for subtle backgrounds in branded sections.","group":"brand"},{"name":"Electric Blue","hex":"#1264a3","role":"Primary link color, secondary interactive elements, and highlight indicator for certain actions.","group":"accent"},{"name":"Orchid Glow","hex":"#d17dfe","role":"Accent text and graphic elements, drawing attention in a playful manner.","group":"accent"},{"name":"Vivid Amethyst","hex":"#9602c7","role":"Bright accent for special iconography or decorative elements.","group":"accent"},{"name":"Pale Orchid","hex":"#eac8fe","role":"Light accent border for subtle interaction states.","group":"accent"},{"name":"Magic Dust Gradient","hex":"#000000","role":"Hero background gradient, creating a vibrant, dynamic backdrop for key messages.","group":"brand","gradient":"linear-gradient(104deg, rgb(0, 0, 0) 9.56%, rgb(186, 1, 255) 102.66%)"},{"name":"Rainbow Wash Bottom Left (pink)","hex":"#ff6496","role":"Decorative radial gradient, contributing to the site's playful atmosphere, bottom-left emphasis.","group":"accent","gradient":"radial-gradient(20vw at 10% 70%, rgba(255, 100, 150, 0.25), rgba(0, 0, 0, 0))"},{"name":"Rainbow Wash Mid Left (blue)","hex":"#6496ff","role":"Decorative radial gradient, contributing to the site's playful atmosphere, mid-left emphasis.","group":"accent","gradient":"radial-gradient(20vw at 30% 70%, rgba(100, 150, 255, 0.25), rgba(0, 0, 0, 0))"},{"name":"Rainbow Wash Mid Right (green)","hex":"#64ff96","role":"Decorative radial gradient, contributing to the site's playful atmosphere, mid-right emphasis.","group":"accent","gradient":"radial-gradient(20vw at 65% 70%, rgba(100, 255, 150, 0.25), rgba(0, 0, 0, 0))"},{"name":"Rainbow Wash Bottom Right (yellow)","hex":"#ffff64","role":"Decorative radial gradient, contributing to the site's playful atmosphere, bottom-right emphasis.","group":"accent","gradient":"radial-gradient(20vw at 90% 70%, rgba(255, 255, 100, 0.25), rgba(0, 0, 0, 0))"},{"name":"Purple Aura Gradient","hex":"#83388a","role":"Subtle background gradient for specific content blocks, adding a soft brand touch.","group":"brand","gradient":"linear-gradient(102deg, rgba(131, 56, 138, 0.8) 0%, rgba(211, 137, 231, 0.8) 100%)"}],"typography":[{"role":"Used for all body text, navigation items, buttons, and detailed descriptive content, providing clarity and an approachable tone across all UI elements.","sizes":"12px, 14px, 15px, 16px, 18px","family":"Salesforce-Sans","weight":"300, 400, 600, 700","lineHeight":"1.20, 1.29, 1.30, 1.38, 1.40, 1.43, 1.56","substitute":"Open Sans, Arial, sans-serif","letterSpacing":"-0.004em, -0.002em, -0.001em, 0.007em, 0.012em, 0.013em, 0.057em"},{"role":"Reserved for headlines and high-impact textual elements, where its distinctive character creates a strong brand presence and visual hierarchy.","sizes":"18px, 21px, 22px, 24px, 32px, 50px, 58px, 64px, 76px, 96px","family":"Salesforce-Avant-Garde","weight":"400, 600, 700","lineHeight":"0.97, 1.00, 1.08, 1.11, 1.12, 1.20, 1.25, 1.33, 1.50","substitute":"Montserrat, Georgia, serif","letterSpacing":"-0.012em, -0.008em, -0.004em, -0.001em"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.4,"letterSpacing":0.057},{"role":"body-sm","size":14,"lineHeight":1.29,"letterSpacing":0.013},{"role":"body","size":16,"lineHeight":1.3,"letterSpacing":0.007},{"role":"subheading","size":18,"lineHeight":1.4,"letterSpacing":-0.002},{"role":"heading-sm","size":22,"lineHeight":1.08,"letterSpacing":-0.001},{"role":"heading","size":32,"lineHeight":1.12,"letterSpacing":-0.004},{"role":"heading-lg","size":58,"lineHeight":1,"letterSpacing":-0.008},{"role":"display","size":96,"lineHeight":0.97,"letterSpacing":-0.012}],"spacing":{"radius":{"cards":"16px","pills":"90px","inputs":"4px","buttons":"4px","default":"8px"},"elementGap":"16px","sectionGap":"98px","cardPadding":"16px"},"radius":{"cards":"16px","pills":"90px","inputs":"4px","buttons":"4px","default":"8px"},"shadows":{"surfaces":[{"hex":"#fefbff","name":"Canvas Ice","level":0,"purpose":"Base page background or main content area."},{"hex":"#ffffff","name":"Surface Frost","level":1,"purpose":"Standard interactive cards, elevated containers on the Canvas Ice background."},{"hex":"#f9f0ff","name":"Whisper Cloud","level":2,"purpose":"Very light hover states, subtle background accents, or contained UI elements slightly raised from Surface Frost."}]},"guidelines":{"do":["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."],"dont":["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."]},"components":[{"name":"CTA Button Group","role":""},{"name":"AI Features Tab Selector","role":""},{"name":"Pill Tab Navigation Selector","role":""},{"name":"Primary Filled Button","role":"Call to action"},{"name":"Ghost Button","role":"Secondary action"},{"name":"Navigation Link","role":"Navigation, in-text link"},{"name":"Text Only Button","role":"Utility action"},{"name":"Content Card","role":"Information display"},{"name":"Hero Section Gradient Background","role":"Thematic background"},{"name":"Trusted By Logo Grid","role":"Social proof"},{"name":"Annoucement Banner","role":"Global alert"},{"name":"Tab Navigation Item","role":"Content filtering"}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text (Primary): #000000\n- Background (Canvas): #fefbff\n- CTA (Primary): #611f69\n- Links/Accent: #1264a3\n- Borders (Subtle): #edeaed\n\n### 3-5 Example Component Prompts\n1. Create a Hero Section: Background uses `Magic Dust Gradient`. Headline text `All your people and AI agents working together.` with `display` role, `Charcoal Black` color. Subtext `Slack connects your team. Slackbot multiplies what they can do.` with `body` role, `Pewter` color. Include two buttons: filled `Primary Filled Button` (text `Get Started`) and ghost `Ghost Button` (text `Find your plan`).\n2. Create a Feature Card: Background `Surface Frost`. Border radius `cards`. Padding `cardPadding`. Heading `Meet Slackbot` using `Salesforce-Sans` weight 700 at 22px, `Charcoal Black`. Body text `Slack isn't just any AI...` using `body` role, `Pewter`. Include a link `Learn more about Slackbot` using `Electric Blue`.\n3. Create a Primary Navigation Bar: Background `Surface Frost`. Height 80px. Left-aligned Slack logo (SVG color `Dark Plum`). Right-aligned `Primary Filled Button` (`Get started`) and `Ghost Button` (`Request a demo`). Navigation links use `Salesforce-Sans` weight 400 at 16px, `Pewter` color, with `Electric Blue` on hover."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776105200786-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776105200786-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/e26cb9b0-f876-41ff-9f24-fd67a6b9776c-1777555711618-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/e26cb9b0-f876-41ff-9f24-fd67a6b9776c-1777555711618-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/e26cb9b0-f876-41ff-9f24-fd67a6b9776c-1777555711618-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/e26cb9b0-f876-41ff-9f24-fd67a6b9776c-1777555711618-preview-detail-poster.jpg"},"similarStyleIds":["ced1c98f-d489-48f7-a01f-1fa59a07b706","9946887b-ffa9-4276-af81-ae6352795afb","3281b445-805b-4dc7-933f-42b544a6d798","2b41e7c4-1e8c-4ea2-a87f-51e24c57886e","5b90e218-b325-4901-a1c5-ea1134339826","f4ef80f4-f6e5-4aea-8045-f99efaf208b8","123a15b8-4e17-4812-83ec-899cce45db5b","47c9e353-bed3-4d6c-8316-63a2db5cc377","b5ca4e9a-2322-4796-b4c5-3b3bf194821f","efcb73cb-b84a-4ae7-9a2b-e1116f79f130","607c2098-bbbb-40bb-b23e-adf2b72c63dd","9342e89b-c2fe-4acf-9993-53b44e0c13b5","4caadb3c-3865-4a4d-9e1a-46478ac71078","3e5c272b-8d68-40d8-9726-b4d6914b4b16","2eab438d-32cd-40c2-b160-1e4127dac569","12255b63-e506-4bc1-a4cd-d05487de32f3","d7fb1721-1878-4cbb-a24b-051800557c75","357e6fee-72db-40cf-b858-254b802018bd","f240ed7d-d466-478e-bbce-6c93420dfd1c","c14bfde7-6f08-4b54-bd9b-39989d10cfef"],"exports":{"designMdUrl":"/references/refero/e26cb9b0-f876-41ff-9f24-fd67a6b9776c/design.md","tokensJsonUrl":"/references/refero/e26cb9b0-f876-41ff-9f24-fd67a6b9776c/tokens.json","tailwindV4Url":"/references/refero/e26cb9b0-f876-41ff-9f24-fd67a6b9776c/tailwind-v4.css","cssVariablesUrl":"/references/refero/e26cb9b0-f876-41ff-9f24-fd67a6b9776c/tailwind-v4.css"}}