{"id":"0ab4c544-6147-4998-8365-3a0f6191e54f","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","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":"Workable","summary":"Clean canvas, purposeful accents","description":"Workable employs a direct and dynamic visual language, built on a clean canvas with a distinctive teal and dark forest green palette. Components are designed to be lightweight, with rounded corners that soften the strong typographic choices. Color is used purposefully for clear accents, interactive states, and to differentiate content blocks, while maintaining an overall sense of order and professionalism. The system balances functional clarity with subtle visual interest, avoiding heavy ornamentation.","industry":"saas","colorScheme":"light","colors":[{"name":"Canvas Porcelain","hex":"#fff5ee","role":"Page background, primary light surface","group":"neutral"},{"name":"White","hex":"#ffffff","role":"Card backgrounds, elevated UI elements","group":"neutral"},{"name":"Midnight Ink","hex":"#0f161e","role":"Primary text, strong headings, dark UI elements","group":"neutral"},{"name":"Harbor Mist","hex":"#333942","role":"Subtle text, muted links, secondary information","group":"neutral"},{"name":"Forest Canopy","hex":"#012620","role":"Dark section backgrounds, hero background, decorative fills","group":"brand"},{"name":"Deep Teal","hex":"#004038","role":"Primary text color for navigation and headings, outlined button borders, active states","group":"brand"},{"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))"},{"name":"Muted Sage","hex":"#00544c","role":"Secondary text, sub-brand accents, borders","group":"brand"},{"name":"Soft Peach","hex":"#fde8ce","role":"Informational card backgrounds, subtle highlight surfaces","group":"accent"},{"name":"Muted Mandarin","hex":"#ffdcbf","role":"Accent card backgrounds","group":"accent"},{"name":"Sky Haze","hex":"#bee9f4","role":"Accent card backgrounds","group":"accent"},{"name":"Lime Glow","hex":"#d5ff4d","role":"Decorative stroke, vibrant highlighting in illustrations","group":"accent"},{"name":"Spring Bud","hex":"#7edcaf","role":"Highlight text, decorative fills and borders","group":"accent"}],"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"}],"typeScale":[{"role":"body-sm","size":16,"lineHeight":1.5,"letterSpacing":0},{"role":"body","size":18,"lineHeight":1.5,"letterSpacing":0},{"role":"subheading","size":20,"lineHeight":1.25,"letterSpacing":0},{"role":"heading-sm","size":24,"lineHeight":1.22,"letterSpacing":0},{"role":"heading","size":32,"lineHeight":1.17,"letterSpacing":0},{"role":"heading-lg","size":56,"lineHeight":1.13,"letterSpacing":0},{"role":"display","size":72,"lineHeight":1,"letterSpacing":0}],"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."]},"components":[{"name":"Primary Ghost Button","role":"Call to action with minimal visual weight"},{"name":"Secondary Ghost Button","role":"Outlined action with rounded corners"},{"name":"Default Card","role":"Content container for features or information blocks"},{"name":"Highlight Card - Soft Peach","role":"Emphasized content container with a warm background tint"},{"name":"Highlight Card - Fresh Teal","role":"Emphasized content container with a vivid background tint"},{"name":"Highlight Card - Muted Mandarin","role":"Emphasized content container with a warm orange background tint"},{"name":"Ghost Badge","role":"Informational tag or label"},{"name":"Navigation Link Button","role":"Actionable link within navigation"},{"name":"Contained Navigation Button","role":"The primary call to action in the navigation bar"}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\ntext: #0f161e\nbackground: #fff5ee\nborder: #0f161e\naccent: #00f5dc\nprimary action: #004038 (outlined action border)\n\n### 3-5 Example Component Prompts\n1. Create a hero section with a Forest Canopy (#012620) background. Headline 'The future-ready HR platform' using Proxima Nova, size 56px, weight 700, color white, lineHeight 1.13. Subtext 'Redefining HR...' using Proxima Nova, size 18px, weight 400, color white, lineHeight 1.5. Include a ghost button 'Request a demo' (background transparent, text #0f161e, 0px radius) and a contrasting filled button 'Start a free trial' (background #004038, text white, 16px radius, padding 11px 24px).\n2. Design a feature card: Default Card (background #ffffff, 16px radius, 32px padding). Heading 'Talent CRM database' using Proxima Nova, size 24px, weight 700, color #0f161e. Body text 'Manage your talent pool...' using Proxima Nova, size 16px, weight 400, color #333942.\n3. Implement a navigation bar: Background transparent. Logo in Deep Teal (#004038). Navigation links ('Product', 'Pricing') text in Midnight Ink (#0f161e), Proxima Nova, size 16px, weight 400. 'Log in' button as a secondary ghost button (background transparent, text #0f161e, 16px radius, padding 12px 24px). 'Request a demo' button as a secondary ghost button (background transparent, text #0f161e, 16px radius, padding 12px 24px). 'Start a free trial' button as a contained navigation button (background #004038, text white, 16px radius, padding 12px 24px).\n4. Create a highlight card showing an applicant: Highlight Card - Soft Peach (background #fde8ce, 16px radius, 32px padding). Text 'Applicant tracking system' using Proxima Nova, size 16px, weight 700, color #0f161e. Use an image of a person (16px radius)."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777510372271-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777510372271-thumb.jpg"},"similarStyleIds":["736830b5-90b1-47b0-99dd-d79454a0d22a","3e5c272b-8d68-40d8-9726-b4d6914b4b16","47c9e353-bed3-4d6c-8316-63a2db5cc377","88a00b3e-1c1e-49d3-ae0f-9fbc1f35ad99","1eee9aa2-1e23-4675-9f6e-fb98c93969bd","2eab438d-32cd-40c2-b160-1e4127dac569","376baf20-9ace-405d-bf4a-086016f2b1e3","721d4954-389e-4003-91e3-efff373f0f0f","ced1c98f-d489-48f7-a01f-1fa59a07b706","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","f4ef80f4-f6e5-4aea-8045-f99efaf208b8","75fdb89f-ca64-41b3-af36-7a78bd09448e","ad529e8a-3427-4152-bed9-6ec5097f25b6","66eb1c37-a8e5-4e6c-b17f-a75385b462e7","62b22816-2d98-4e98-9c17-bf600ddb2fc8","9501cfdc-3eb3-4b64-90f6-9afdded48945","d7fb1721-1878-4cbb-a24b-051800557c75","9342e89b-c2fe-4acf-9993-53b44e0c13b5","18e2c0b4-f29c-4e84-90b0-1d8066b59409","1ae4bcfe-c613-42fc-aab7-f9583381e7cc"],"exports":{"designMdUrl":"/references/refero/0ab4c544-6147-4998-8365-3a0f6191e54f/design.md","tokensJsonUrl":"/references/refero/0ab4c544-6147-4998-8365-3a0f6191e54f/tokens.json","tailwindV4Url":"/references/refero/0ab4c544-6147-4998-8365-3a0f6191e54f/tailwind-v4.css","cssVariablesUrl":"/references/refero/0ab4c544-6147-4998-8365-3a0f6191e54f/tailwind-v4.css"}}