Ui

This design system feels like a finely tuned machine, presenting a clean and precise interface with a stark black-and-white aesthetic. The visual mood is serious and functional, achieved through a dominant achromatic palette and very subtle elevation. Geometric balance is created by mixing hard 10-14px radii for cards and inputs with highly rounded (near-pill) buttons and badges, suggesting both structure and approachability. The use of a custom sans-serif font across all elements with meticulous letter-spacing creates a unified, crisp typographic voice. Use Deep Black (#000000) for primary headings and active states to command attention. Apply Subtle Ash (#e5e5e5) for all primary borders and dividers to maintain a subtle visual separation. Ensure input fields and cards consistently use a 10px or 14px border-radius, respectively, for geometric stability. Employ Geist font universally, leveraging its 400, 500, and 600 weights to establish clear hierarchy without introducing new typefaces. Maintain a default element gap of 8px, but use 16px for card inner padding to create adequate breathing room for content. Utilize 9999px or 26px border-radius for all interactive buttons and badges to create a soft, approachable pill shape. Avoid using highly saturated colors; stick to the achromatic scale and the two semantic reds and greens. Do not introduce additional font families; the current choices are sufficient for all typographic needs. Refrain from using strong, multi-directional shadows; rely on minimal 1px shadows or simple borders for elevation. Do not deviate from the established border-radius values; the mix of sharp 0px (in split elements), 10px, 14px, and 9999px is intentional. Don't add excessive padding or margin; the design favors a compact density with specific, calculated spacing. Avoid decorative gradients; the brand's aesthetic is built on flat colors and subtle depth.