{"id":"0ab4c544-6147-4998-8365-3a0f6191e54f","name":"Workable","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/0ab4c544-6147-4998-8365-3a0f6191e54f","originalSiteUrl":"https://www.workable.com","capturedAt":"2026-04-30T00:53:19.070Z","colors":[{"name":"Canvas Porcelain","hex":"#fff5ee","role":"Page background, primary light surface","group":"neutral","cssVariable":"--color-canvas-porcelain"},{"name":"White","hex":"#ffffff","role":"Card backgrounds, elevated UI elements","group":"neutral","cssVariable":"--color-white"},{"name":"Midnight Ink","hex":"#0f161e","role":"Primary text, strong headings, dark UI elements","group":"neutral","cssVariable":"--color-midnight-ink"},{"name":"Harbor Mist","hex":"#333942","role":"Subtle text, muted links, secondary information","group":"neutral","cssVariable":"--color-harbor-mist"},{"name":"Forest Canopy","hex":"#012620","role":"Dark section backgrounds, hero background, decorative fills","group":"brand","cssVariable":"--color-forest-canopy"},{"name":"Deep Teal","hex":"#004038","role":"Primary text color for navigation and headings, outlined button borders, active states","group":"brand","cssVariable":"--color-deep-teal"},{"name":"Fresh Teal","hex":"#00f5dc","role":"Card backgrounds, tag backgrounds, vibrant accents; Key product graphic fills, vibrant UI elements","group":"accent","gradient":"linear-gradient(90deg, rgb(0, 245, 220), rgb(213, 255, 77) 48.5%, rgb(183, 115, 255))","cssVariable":"--color-fresh-teal"},{"name":"Muted Sage","hex":"#00544c","role":"Secondary text, sub-brand accents, borders","group":"brand","cssVariable":"--color-muted-sage"},{"name":"Soft Peach","hex":"#fde8ce","role":"Informational card backgrounds, subtle highlight surfaces","group":"accent","cssVariable":"--color-soft-peach"},{"name":"Muted Mandarin","hex":"#ffdcbf","role":"Accent card backgrounds","group":"accent","cssVariable":"--color-muted-mandarin"},{"name":"Sky Haze","hex":"#bee9f4","role":"Accent card backgrounds","group":"accent","cssVariable":"--color-sky-haze"},{"name":"Lime Glow","hex":"#d5ff4d","role":"Decorative stroke, vibrant highlighting in illustrations","group":"accent","cssVariable":"--color-lime-glow"},{"name":"Spring Bud","hex":"#7edcaf","role":"Highlight text, decorative fills and borders","group":"accent","cssVariable":"--color-spring-bud"}],"typography":[{"role":"Primary UI typeface for all content including navigation, body text, headings, and buttons. Its clean, sans-serif structure provides clarity and a modern feel.","sizes":"16px, 18px, 20px, 24px, 32px, 56px, 72px","family":"Proxima Nova","weight":"400, 700","weights":[400,700],"lineHeight":"1.00, 1.13, 1.14, 1.17, 1.20, 1.22, 1.25, 1.38, 1.50, 1.56, 1.75","substitute":"Open Sans","letterSpacing":"normal"},{"role":"Used sparingly for specific body copy elements, offering a contrasting serif touch.","sizes":"24px","family":"Source Serif Pro","weight":"400","weights":[400],"lineHeight":"1.50","substitute":"Merriweather","letterSpacing":"normal"}],"spacing":{"radius":{"cards":"16px","badges":"25px","buttons":"16px","navigation":"8px"},"elementGap":"8px","sectionGap":"32px","cardPadding":"32px"},"radius":{"cards":"16px","badges":"25px","buttons":"16px","navigation":"8px"},"shadows":{"surfaces":[{"hex":"#fff5ee","name":"Canvas Porcelain","level":0,"purpose":"Base page background"},{"hex":"#ffffff","name":"White","level":1,"purpose":"Primary card and elevated component background"},{"hex":"#fde8ce","name":"Soft Peach","level":2,"purpose":"Accentuated card backgrounds for differentiation"},{"hex":"#ffdcbf","name":"Muted Mandarin","level":3,"purpose":"Secondary accent card background"},{"hex":"#bee9f4","name":"Sky Haze","level":4,"purpose":"Tertiary accent card background"}]},"guidelines":{"do":["Use Proxima Nova for all text elements to maintain typographic consistency.","Apply 16px border-radius to all cards and buttons for a unified, soft edge.","Utilize Forest Canopy (#012620) for dark section backgrounds and Deep Teal (#004038) for primary action outlines or filled navigation buttons.","Employ 32px padding for internal card content and around main section elements.","Maintain an 8px elementGap between smaller UI components for comfortable dense layouts.","Prioritize Canvas Porcelain (#fff5ee) as the primary page background to create a clean, light base.","Use Fresh Teal (#00f5dc) and Soft Peach (#fde8ce) as background tints for cards to visually group or highlight content."],"dont":["Avoid arbitrary color usage; reserve brand and accent colors for functional roles or distinct highlights, not general decoration.","Do not introduce complex shadows or extreme elevation; the design favors flat surfaces and subtle distinctions.","Refrain from using overly decorative fonts; stick to Proxima Nova and Source Serif Pro for a clear, modern appearance.","Do not deviate from the established 16px and 8px border-radii; random smaller or larger radii will break visual cohesion.","Avoid dense, unbroken blocks of text; break content with headings, lists, and visual components.","Do not use dark backgrounds for general page content; restrict them to hero sections or distinct visual breaks.","Refrain from using system default link colors; ensure all links use either Midnight Ink (#0f161e) or Harbor Mist (#333942) unless an explicit accent link style is defined."]}}