{"id":"1db2adc9-2f10-4f20-af1b-27fa4b25f729","name":"Superintelligence for work","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/1db2adc9-2f10-4f20-af1b-27fa4b25f729","originalSiteUrl":"https://sanalabs.com","capturedAt":"2026-04-30T00:16:29.666Z","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card backgrounds, button backgrounds for ghost/outlined states, text on dark backgrounds","group":"neutral","cssVariable":"--color-canvas-white"},{"name":"Ghost Fog","hex":"#efefed","role":"Subtle background for UI sections and elevated cards, providing gentle visual separation from the main canvas","group":"neutral","cssVariable":"--color-ghost-fog"},{"name":"Midnight Ink","hex":"#090909","role":"Primary text, headings, most iconography, borders, and input text – a core color for content and structure","group":"neutral","cssVariable":"--color-midnight-ink"},{"name":"Abyssal Black","hex":"#000000","role":"Headings on light backgrounds, filled button backgrounds, and strong accent borders for interactive elements","group":"neutral","cssVariable":"--color-abyssal-black"},{"name":"Sterling Gray","hex":"#d9d9d9","role":"Subtle borders, dividers, and background elements, especially in footers or less prominent UI areas","group":"neutral","cssVariable":"--color-sterling-gray"},{"name":"Action Blue","hex":"#0057f3","role":"Primary call-to-action buttons – a vivid, energetic blue that draws immediate attention","group":"brand","cssVariable":"--color-action-blue"},{"name":"Warning Orange","hex":"#ff5102","role":"Orange action color for filled buttons, selected navigation states, and focused conversion moments","group":"accent","cssVariable":"--color-warning-orange"}],"typography":[{"role":"All textual elements on the site, from large display headings to fine print. The custom Sana Sans ensures a distinct brand voice through precise tracking and varied weights, establishing authority without formality. The tight letter-spacing on larger sizes creates a sense of precision and modernism.","sizes":"14px, 15px, 16px, 32px, 40px, 48px, 83px","family":"Sana Sans","weight":"400, 450, 500","weights":[400,450,500],"lineHeight":"0.95, 1.00, 1.10, 1.23, 1.40, 1.49, 1.60","substitute":"Inter","letterSpacing":"-0.0300em (at 83px), -0.0200em (at 48px), -0.0110em (at 40px), -0.0100em (at 32px), -0.0040em (at 16px)","fontFeatureSettings":"\"kern\""}],"spacing":{"radius":{"cards":"16px","buttons":"32px","navigation":"6px","largeFeatures":"24px","specialButtons":"36px"},"elementGap":"16px","sectionGap":"64px","cardPadding":"40px"},"radius":{"cards":"16px","buttons":"32px","navigation":"6px","largeFeatures":"24px","specialButtons":"36px"},"guidelines":{"do":["Prioritize 'Midnight Ink' (#090909) and 'Abyssal Black' (#000000) for all primary text and headings, ensuring high contrast against light backgrounds.","Use 'Canvas White' (#ffffff) as the default page background and for ghost-style interactive elements.","Apply 'Ghost Fog' (#efefed) for secondary section backgrounds or cards to create a subtle depth layer without shadows.","Reserve 'Action Blue' (#0057f3) for the primary call-to-action buttons, maximizing urgency and visibility.","Maintain a clear visual hierarchy with distinct font sizes and precise letter-spacing from the Sana Sans typography scale, especially for larger headings.","Employ rounded corners consistently: 32px for most buttons and 16px for cards, giving elements a soft, approachable character.","Utilize 16px as the primary value for horizontal and vertical spacing between related elements and for internal component padding to maintain comfortable density."],"dont":["Avoid arbitrary color usage; limit chromatic colors strictly to 'Action Blue' (#0057f3) and 'Warning Orange' (#ff5102) for interactive elements.","Do not introduce strong shadows or complex elevation schemes; the design relies on subtle background color shifts for depth.","Do not deviate from the defined Sana Sans font family, weights, and letter-spacing values to preserve the brand's typographic precision.","Do not use sharp corners; maintain the rounded aesthetic across all interactive and content-containing components.","Avoid overly dense layouts; ensure ample 'Ghost Fog' (#efefed) or 'Canvas White' (#ffffff) space between content blocks and sections.","Do not use dark backgrounds for large content areas; the system is designed for a light-themed interface with dark typography.","Do not use generic system fonts; the custom Sana Sans is integral to the brand's visual identity."]}}