{"id":"e26cb9b0-f876-41ff-9f24-fd67a6b9776c","name":"Slack","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","colors":[{"name":"Canvas Ice","hex":"#fefbff","role":"Primary page background, expansive neutral space for content.","group":"neutral","cssVariable":"--color-canvas-ice"},{"name":"Surface Frost","hex":"#ffffff","role":"Elevated card backgrounds, component containers.","group":"neutral","cssVariable":"--color-surface-frost"},{"name":"Whisper Cloud","hex":"#f9f0ff","role":"Subtle background for UI elements, light hovered states.","group":"neutral","cssVariable":"--color-whisper-cloud"},{"name":"Active Lavender","hex":"#f2defe","role":"Background for active navigation items, subtle highlights.","group":"neutral","cssVariable":"--color-active-lavender"},{"name":"Charcoal Black","hex":"#000000","role":"Primary text color for headings, body, and high-emphasis elements.","group":"neutral","cssVariable":"--color-charcoal-black"},{"name":"Carbon Gray","hex":"#1d1c1d","role":"Secondary text and icon color, slightly softer than Charcoal Black.","group":"neutral","cssVariable":"--color-carbon-gray"},{"name":"Pewter","hex":"#696969","role":"Tertiary text, muted labels, helper text.","group":"neutral","cssVariable":"--color-pewter"},{"name":"Cement Gray","hex":"#757575","role":"Informational text, list item details.","group":"neutral","cssVariable":"--color-cement-gray"},{"name":"Slate Border","hex":"#edeaed","role":"Subtle borders and dividers for UI separation.","group":"neutral","cssVariable":"--color-slate-border"},{"name":"Medium Gray","hex":"#808080","role":"Placeholder text, disabled states, default icon color.","group":"neutral","cssVariable":"--color-medium-gray"},{"name":"Icon Gray","hex":"#5e5d60","role":"Specific icon color within navigation and utility areas.","group":"neutral","cssVariable":"--color-icon-gray"},{"name":"Dark Plum","hex":"#481a54","role":"Primary brand color, used for key UI components like navigation backgrounds and interactive elements.","group":"brand","cssVariable":"--color-dark-plum"},{"name":"Purple Heart","hex":"#611f69","role":"Primary button background, active states, and emphasized UI elements.","group":"brand","cssVariable":"--color-purple-heart"},{"name":"Dark Violet","hex":"#730394","role":"Accent text, links within dark backgrounds, and subtle branding elements.","group":"brand","cssVariable":"--color-dark-violet"},{"name":"Deep Aubergine","hex":"#3d0157","role":"Text color for buttons with transparent backgrounds, emphasizing interaction.","group":"brand","cssVariable":"--color-deep-aubergine"},{"name":"Grape Jelly","hex":"#2e0039","role":"Darkest brand shade, used for subtle backgrounds in branded sections.","group":"brand","cssVariable":"--color-grape-jelly"},{"name":"Electric Blue","hex":"#1264a3","role":"Primary link color, secondary interactive elements, and highlight indicator for certain actions.","group":"accent","cssVariable":"--color-electric-blue"},{"name":"Orchid Glow","hex":"#d17dfe","role":"Accent text and graphic elements, drawing attention in a playful manner.","group":"accent","cssVariable":"--color-orchid-glow"},{"name":"Vivid Amethyst","hex":"#9602c7","role":"Bright accent for special iconography or decorative elements.","group":"accent","cssVariable":"--color-vivid-amethyst"},{"name":"Pale Orchid","hex":"#eac8fe","role":"Light accent border for subtle interaction states.","group":"accent","cssVariable":"--color-pale-orchid"},{"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%)","cssVariable":"--color-magic-dust-gradient"},{"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))","cssVariable":"--color-rainbow-wash-bottom-left-pink"},{"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))","cssVariable":"--color-rainbow-wash-mid-left-blue"},{"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))","cssVariable":"--color-rainbow-wash-mid-right-green"},{"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))","cssVariable":"--color-rainbow-wash-bottom-right-yellow"},{"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%)","cssVariable":"--color-purple-aura-gradient"}],"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"}],"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."]}}