{"id":"1db2adc9-2f10-4f20-af1b-27fa4b25f729","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","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":"Superintelligence for work","summary":"AI Blueprint on Polished Glass","description":"Sana embodies a high-contrast, polished AI platform aesthetic: a largely white canvas punctuated by deep dark text and occasional vibrant accents. Components are lightweight and confident, favoring rounded shapes and minimal elevation. Typography is distinctive with a custom sans-serif that uses precise letter-spacing for a sophisticated, modern feel. Color appears primarily as functional cues, highlighting calls to action or distinguishing interactive elements within an otherwise achromatic UI.","industry":"ai","colorScheme":"light","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card backgrounds, button backgrounds for ghost/outlined states, text on dark backgrounds","group":"neutral"},{"name":"Ghost Fog","hex":"#efefed","role":"Subtle background for UI sections and elevated cards, providing gentle visual separation from the main canvas","group":"neutral"},{"name":"Midnight Ink","hex":"#090909","role":"Primary text, headings, most iconography, borders, and input text – a core color for content and structure","group":"neutral"},{"name":"Abyssal Black","hex":"#000000","role":"Headings on light backgrounds, filled button backgrounds, and strong accent borders for interactive elements","group":"neutral"},{"name":"Sterling Gray","hex":"#d9d9d9","role":"Subtle borders, dividers, and background elements, especially in footers or less prominent UI areas","group":"neutral"},{"name":"Action Blue","hex":"#0057f3","role":"Primary call-to-action buttons – a vivid, energetic blue that draws immediate attention","group":"brand"},{"name":"Warning Orange","hex":"#ff5102","role":"Orange action color for filled buttons, selected navigation states, and focused conversion moments","group":"accent"}],"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\""}],"typeScale":[{"role":"caption","size":14,"lineHeight":1.49,"letterSpacing":-0.056},{"role":"body","size":16,"lineHeight":1.4,"letterSpacing":-0.064},{"role":"subheading","size":32,"lineHeight":1.1,"letterSpacing":-0.32},{"role":"heading-sm","size":40,"lineHeight":1.1,"letterSpacing":-0.44},{"role":"heading","size":48,"lineHeight":1.1,"letterSpacing":-0.96},{"role":"display","size":83,"lineHeight":0.95,"letterSpacing":-2.49}],"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."]},"components":[{"name":"Main Call to Action Button","role":"Interactive element"},{"name":"Secondary Call to Action Button","role":"Interactive element"},{"name":"Call to Action Button (Dark)","role":"Interactive element"},{"name":"Ghost Button (Book an Intro)","role":"Interactive element"},{"name":"Outlined Button (Watch video)","role":"Interactive element"},{"name":"Feature Card (Subtle BG)","role":"Information display"},{"name":"Feature Card (Large Radius)","role":"Information display"},{"name":"Navigation Link","role":"Interactive element"}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\ntext: #090909\nbackground: #ffffff\nborder: #090909\naccent: #ff5102\nprimary action: #000000 (filled action)\n\n### 3-5 Example Component Prompts\n1. Create a Hero Section: 'Canvas White' (#ffffff) background. Headline 'Superintelligence for work' using Sana Sans 83px, weight 400, 'Abyssal Black' (#000000), letter-spacing -2.49px, line-height 0.95. Subtext 'Give your teams the tools they need to thrive in an AI-first world.' using Sana Sans 16px, weight 400, 'Midnight Ink' (#090909), letter-spacing -0.064px, line-height 1.4. Center both vertically and horizontally.\n2. Create a Primary Action Button: #000000 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.\n3. Create an Outlined Button: Text 'Watch video', 'Canvas White' (#ffffff) background, 'Abyssal Black' (#000000) text, 1px 'Abyssal Black' (#000000) border, Sana Sans 16px, weight 450, 32px border-radius, 10px vertical padding, 16px horizontal padding.\n4. Create a Section Card: 'Ghost Fog' (#efefed) background, 16px border-radius, 64px top padding, 43px horizontal padding. Title 'Sana Learn' Sana Sans 40px, weight 400, 'Midnight Ink' (#090909), letter-spacing -0.44px, line-height 1.1."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777508161966-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777508161966-thumb.jpg"},"similarStyleIds":["5bfbe8b0-de0e-470f-b130-929f50437160","64aadcc7-f884-41ea-9b0b-a90dfc10c9ec","186775da-7568-49e5-8110-4fd0bbc7bbe3","34baa524-5d5b-4165-bbab-d01f05e6d6b9","ddd9ffaa-d831-4cb4-a5bf-a1efce421dca","a6950b49-8ce4-4330-9499-26ca08061599","461da0f0-fde6-46bc-8137-7eca006260a8","62b22816-2d98-4e98-9c17-bf600ddb2fc8","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","f4ef80f4-f6e5-4aea-8045-f99efaf208b8","7b083729-e694-4b66-82a3-befb08451722","db451eca-8de6-43a9-a5d5-35271befdffd","32845f27-6b24-48be-af25-8e664f826b30","29567671-da1e-4f85-ae52-8b611fecc384","9fecf7d6-b717-49ca-8edc-b10d6110b21c","03b3d707-2a30-4f53-a524-347d1b70eb2c","5c94c49f-0612-4261-842c-e1d501f3e13d","75fdb89f-ca64-41b3-af36-7a78bd09448e","d0f65d12-a8e6-4631-99f7-bb7cdcd5b6c5","0ab4c544-6147-4998-8365-3a0f6191e54f"],"exports":{"designMdUrl":"/references/refero/1db2adc9-2f10-4f20-af1b-27fa4b25f729/design.md","tokensJsonUrl":"/references/refero/1db2adc9-2f10-4f20-af1b-27fa4b25f729/tokens.json","tailwindV4Url":"/references/refero/1db2adc9-2f10-4f20-af1b-27fa4b25f729/tailwind-v4.css","cssVariablesUrl":"/references/refero/1db2adc9-2f10-4f20-af1b-27fa4b25f729/tailwind-v4.css"}}