
Preview image. Unlock full-res
Architectural blueprint on white marble.
This design system evokes the precision of an architectural blueprint, meticulously rendered against stark white. Clarity is paramount, achieved through high contrast and an almost clinical absence of chromatic color. The unique use of near-invisible, outline-only components creates an airy lightness, making every element feel deliberately placed while maintaining a clean, spacious aesthetic. Prioritize Inter font at weights 400, 500, and 600 for all text elements to maintain a unified typographic voice. Utilize Type Ink (#000000) for primary text and Canvas White (#ffffff) for backgrounds to ensure AAA contrast ratios. Apply 9999px border-radius to all buttons and tags to consistently achieve a soft, pill-like shape. Employ Outline Ash (#e5e7eb) for all borders, creating a subtle, almost invisible visual separation. Maintain generous spacing, with section gaps and large paddings often aligning to 32px or 40px, for an airy and comfortable density. Use Subtle Gray (#232323) or Whisper Gray (#a7a7a7) for secondary content to create clear visual hierarchy without harshness. Avoid strong, saturated chromatic colors in the UI; vibrant gradients are reserved only for illustrative, non-interactive elements. Do not use heavy, solid backgrounds for interactive components; instead, leverage transparent fills and subtle borders. Refrain from deviating from the Inter font family or its specified weights (400, 500, 600) for any content. Do not introduce sharp corners; the soft 16px or 9999px radii are a defining characteristic. Avoid excessive use of borders or visual dividers beyond the subtle Outline Ash, as it compromises the minimalist aesthetic. Do not reduce primary body text below 16px (Inter 400, 16px, 1.5 lineHeight) to ensure readability.









