{"id":"5bfbe8b0-de0e-470f-b130-929f50437160","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/5bfbe8b0-de0e-470f-b130-929f50437160","originalSiteUrl":"https://sana.ai","capturedAt":"2026-04-11T18:37:23.190Z","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":"Sana Agents","summary":"Architectural blueprint on white marble.  Sharp, expansive white spaces frame meticulously placed elements, with occasional flashes of neon green illuminating key interactions.","description":"This design system projects a clean, authoritative presence through a stark black-on-white palette, punctuated by a single vibrant accent. The large, elegant serif headlines create a sense of established gravitas, while the rounded corners and vibrant lime green call-to-action offer a touch of approachable modernism. This creates a balanced aesthetic where seriousness meets accessible innovation, making complex AI feel intuitive.","tags":["minimalist","professional","high-contrast","modern","clean","grid-based","serif-headline","accent-color"],"industry":"ai","colorScheme":"light","colors":[{"name":"Tarmac","hex":"#0a1217","role":"Primary text, dark backgrounds for feature cards, active states. This near-black serves as the dominant dark tone contrasting against the pervasive white background.","group":"neutral"},{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card surfaces, primary button backgrounds. Expansive and dominant, it provides a sense of spaciousness and clarity.","group":"neutral"},{"name":"Limestone","hex":"#e4eff7","role":"Subtle background for secondary sections or hover states on light elements, offering a minimal visual lift from Canvas White.","group":"neutral"},{"name":"Jet Black","hex":"#000000","role":"Secondary text, specific interactive elements like input text. Used sparingly to ensure maximum contrast and legibility.","group":"neutral"},{"name":"Cloud Gray","hex":"#85898b","role":"Muted body text and secondary information, providing a softer contrast than Tarmac.","group":"neutral"},{"name":"Steel Gray","hex":"#6c7174","role":"Subtle text elements, navigational links, and less prominent headings, maintaining readability without overpowering.","group":"neutral"},{"name":"Bio-Luminescent Green","hex":"#cdfe00","role":"Primary call-to-action buttons, indicating action and drawing immediate attention with its vivid contrast against the neutral palette.","group":"accent"}],"typography":[{"role":"Display headings. The single 72px size and serif face at weight 400 make a strong, non-shouting statement, conveying established authority.","sizes":"72px","family":"Sana Serif","weight":"400","weights":[400],"lineHeight":"1.10","substitute":"Playfair Display","letterSpacing":"normal"},{"role":"Body text, navigation, buttons, and most interactive elements. Its varied weights provide flexibility for hierarchy while maintaining a clean, modern feel across interface elements.","sizes":"13px, 14px, 16px, 20px","family":"Sana Sans","weight":"400, 450, 500","weights":[400,450,500],"lineHeight":"1.20, 1.40, 1.43, 1.50","substitute":"Inter","letterSpacing":"normal","fontFeatureSettings":"\"lnum\" on, \"tnum\" on"}],"typeScale":[{"role":"caption","size":13,"lineHeight":1.4},{"role":"body","size":16,"lineHeight":1.5},{"role":"subheading","size":20,"lineHeight":1.2},{"role":"display","size":72,"lineHeight":1.1}],"spacing":{"radius":{"pill":"9999px","input":"24px","buttons":"24px"},"elementGap":"8px","sectionGap":"62px","cardPadding":"","pageMaxWidth":"1305px"},"radius":{"pill":"9999px","input":"24px","buttons":"24px"},"guidelines":{"do":["Use Sana Serif for display headlines at 72px, weight 400, to establish authority.","Apply Tarmac (#0a1217) for primary text and dark surface backgrounds to maintain strong contrast.","Utilize Bio-Luminescent Green (#cdfe00) exclusively for primary call-to-action buttons, drawing clear attention.","Employ 24px border-radius for all primary buttons and input fields to ensure a consistent contemporary feel.","Maintain a clear page structure with 62px vertical spacing between major sections.","Use Sana Sans (lnum, tnum) across all body text, navigation, and interactive elements for numeral consistency and legibility.","Ensure all interactive elements have sufficient padding: 8px 16px for buttons, 8px 18px for inputs."],"dont":["Do not use highly saturated colors other than Bio-Luminescent Green (#cdfe00); the palette is intentionally restrained.","Avoid decorative shadows or complex gradients; the aesthetic is flat and crisp.","Do not introduce additional font families; Sana Serif and Sana Sans are the only approved typefaces.","Do not deviate from the established border radii; 24px and 9999px are the only sanctioned options for interactive elements.","Do not vary paragraph line-height aggressively; keep it within the 1.2-1.5 range to maintain reading comfort.","Avoid using Jet Black (#000000) for large blocks of text; reserve it for specific accents or input fields.","Do not use small padding values; minimum 8px padding ensures adequate tap targets and visual breathing room."]},"components":[{"name":"Product Cards — Sana Agents & Sana Learn","role":""},{"name":"Sign Up Form — Try for free with your work email","role":""},{"name":"Button Group — Primary, Secondary & Outline variants","role":""},{"name":"Pill Outline Button","role":"Secondary action button, often for navigation or subtle interactions."},{"name":"Dark Filled Button","role":"Primary action button within dark contexts or for prominent interactions."},{"name":"Light Filled Button","role":"Secondary action button in light contexts or for less prominent interactions."},{"name":"Feature Card","role":"Container for introducing product features, often in a grid."},{"name":"Form Input Field","role":"Standard user input field for text."}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text (primary): Tarmac #0a1217\n- Background (page): Canvas White #ffffff\n- Background (dark card): Tarmac #0a1217\n- CTA (primary): Bio-Luminescent Green #cdfe00\n- Border (input): rgba(10, 18, 23, 0.15)\n- Text (secondary): Cloud Gray #85898b\n\n### 3-5 Example Component Prompts\n1. Create a hero section: Canvas White background. Headline 'Superintelligence for work' using Sana Serif, 72px, weight 400, #0a1217. Subtext 'AI agents for every team' using Sana Sans, 20px, weight 400, #0a1217. Both centered, with 62px sectionGap from previous/next elements.\n2. Design a product feature card: Tarmac background (#0a1217), 24px border-radius, 24px 32px padding. Include a light-filled button 'Explore' (Canvas White background, Tarmac text, 24px border-radius, 8px 16px padding) and a pill outline button 'Book an intro' (transparent, Tarmac text, 9999px border-radius, 10px padding).\n3. Generate a 'Sign in' button for the navigation: Dark Filled Button variant – Tarmac background (#0a1217), Canvas White text (#ffffff), 24px border-radius, 8px 16px padding.\n4. Create an email input field: Canvas White background (#ffffff), Jet Black text (#000000), borderTopColor=rgba(10, 18, 23, 0.15), 24px border-radius, 8px 18px padding. Placeholder text should be Cloud Gray (#85898b).\n5. Lay out a footer section: Canvas White background. Use Sana Sans, 14px, weight 400, #85898b for general links and copyright text. Links should be Tarmac (#0a1217) by default. Arrange content in a multi-column grid within the 1305px max-width, with 62px padding from the bottom of the previous section."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775932624961-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775932624961-thumb.jpg"},"similarStyleIds":["1db2adc9-2f10-4f20-af1b-27fa4b25f729","461da0f0-fde6-46bc-8137-7eca006260a8","626ae2de-c402-4805-b859-2c6adca41022","ddd9ffaa-d831-4cb4-a5bf-a1efce421dca","186775da-7568-49e5-8110-4fd0bbc7bbe3","68d18deb-bb09-4258-8024-001af9c844c0","12255b63-e506-4bc1-a4cd-d05487de32f3","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","dc541737-8bf2-4b31-b729-0352f696e82f","8f623d19-51f6-4da2-bc45-05573cc98283","7b083729-e694-4b66-82a3-befb08451722","c521be99-14af-4d57-8f8f-34c76c9ade61","a6950b49-8ce4-4330-9499-26ca08061599","9342e89b-c2fe-4acf-9993-53b44e0c13b5","5c94c49f-0612-4261-842c-e1d501f3e13d","62b22816-2d98-4e98-9c17-bf600ddb2fc8","ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0","75fdb89f-ca64-41b3-af36-7a78bd09448e","a76ec6ba-20b3-495c-9d89-1e58281e79e7","537641a0-5a24-4203-ae9b-cd29516aa3f8"],"exports":{"designMdUrl":"/references/refero/5bfbe8b0-de0e-470f-b130-929f50437160/design.md","tokensJsonUrl":"/references/refero/5bfbe8b0-de0e-470f-b130-929f50437160/tokens.json","tailwindV4Url":"/references/refero/5bfbe8b0-de0e-470f-b130-929f50437160/tailwind-v4.css","cssVariablesUrl":"/references/refero/5bfbe8b0-de0e-470f-b130-929f50437160/tailwind-v4.css"}}