Mage

Mage.ai presents a clear, functional interface resembling an architectural blueprint on a light canvas. The visual style prioritizes information and direct interaction through subtle surface variations and a single primary blue accent color. Typography is precise and organized, creating clear hierarchy without excessive embellishment. Components are lightweight with defined edges and moderate rounded corners, contributing to an overall structured and modern feel. Always use Ink Black (#000000) for primary headlines and body text to ensure maximum readability and brand consistency. Utilize Greige Canvas (#f7f7f1) for alternating section backgrounds and Canvas White (#ffffff) for primary page backgrounds and cards to create clear visual separation. Reserve Ocean Blue (#244cff) exclusively for primary call-to-action button backgrounds and active states to guide user interaction. Apply 6px border radius for generic cards and content containers, 17px for buttons, and 100px for pill-shaped elements. Employ 10px as the default elementGap for horizontal and vertical spacing between small UI elements, establishing a comfortable density. Maintain 40px padding within cards and for major section gaps to give content adequate breathing room. Use Inter Variable at larger sizes for headings to leverage its precise shaping and expressive range. Do not use Ocean Blue (#244cff) for decorative elements or non-interactive text; its purpose is strictly functional for actions. Avoid arbitrary color choices for backgrounds; stick to Canvas White, Greige Canvas, Sky Tint, or Pale Aqua for content surfaces. Do not use letter-spacing on body text or standard links; maintain normal letter-spacing for these elements. Do not introduce sharp corners or excessively large radii; adhere to the 6px, 17px, and 100px radii for a consistent, approachable feel. Avoid cluttering the layout; maintain 40px section gaps and 10px element gaps for comfortable content presentation. Do not use generic system fonts for critical UI elements if Inter or Geist are available, as they define the brand's typographic tone. Do not deviate from the established type scale; respect predefined size and lineHeight for each text role to maintain hierarchy.