Preview image. Unlock full-res
Architectural Blueprint; Grid-based precision with sparse, functional color accents.
This design system presents as a highly structured, data-driven interface, echoing the precision required in AI systems. Its palette is almost entirely achromatic, with a deliberate and minimal use of vivid orange and moderate blue to highlight interactive elements and key information. The signature move is the pairing of a classic humanist sans-serif with a mono-spaced font, creating an aesthetic that feels both approachable and technically rigorous. Underlying the visual clarity are subtle shadows and crisp borders, conveying a sense of engineered robustness.
Prioritize Charcoal Black (#181818) for all primary headings and body text, ensuring high readability against light backgrounds.
Use Ignite Orange (#fb631b) exclusively for primary calls-to-action to maximize visual impact and direct user attention.
Apply Light Concrete (#e5e5e5) for all non-functional borders and dividers to maintain a discreet, structured appearance.
Maintain 8px as the base unit for all spacing, including cardPadding, elementGap, and sectionGap multiples, to ensure rhythm and consistency.
Employ the ftSystemMono font for all technical data, code snippets, and UI toggles like 'Human/Machine' to reinforce the platform's technical nature.
Utilize borderRadius: 4px for primary buttons and elevated cards, and borderRadius: 2px for smaller controls and elements for a consistent, subtle softening of edges.
Do not introduce new saturated colors outside of Ignite Orange (#fb631b) and Sky Blueprint (#0d6ea5) to preserve the system's focused chromatic palette.
Avoid large, soft shadows; stick to the specified subtle box-shadows rgba(0, 0, 0, 0.02) 0px 13px 8px 0px for elevation, or thin borders for definition.
Do not deviate from the gerstnerProgramm and ftSystemMono font families, as their interplay is central to the brand's identity.
Refrain from using Sky Blueprint (#0d6ea5) for primary calls-to-action; its role is for secondary interactive elements and links.
Do not use borderRadius: 0px on interactive elements unless it is specifically a Ghost Button or part of a component designed for a stark, flat look.
Avoid dense sections of text; use Medium Ash (#858483) for secondary content and ensure adequate line-heights (e.g., 1.5 for body text) to maintain readability within the compact density.
