PUBLIC REFERENCE
Superintelligence for work
AI Blueprint on Polished Glass
Colors
#ffffff Page backgrounds, card backgrounds, button backgrounds for ghost/outlined states, text on dark backgrounds
#efefed Subtle background for UI sections and elevated cards, providing gentle visual separation from the main canvas
#090909 Primary text, headings, most iconography, borders, and input text – a core color for content and structure
#000000 Headings on light backgrounds, filled button backgrounds, and strong accent borders for interactive elements
#d9d9d9 Subtle borders, dividers, and background elements, especially in footers or less prominent UI areas
#0057f3 Primary call-to-action buttons – a vivid, energetic blue that draws immediate attention
#ff5102 Orange action color for filled buttons, selected navigation states, and focused conversion moments
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.
Don't
- 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.