PlanetScale

This design system presents as a 'technical monochrome' with sharp angles and a restrained color palette. High contrast black, white, and a range of achromatic grays define the structure, accented sparingly by electric blue and a warm orange, creating focused visual hierarchy. Monospaced typography is a core identifier, lending a precise, computational feel to all text elements. The overall impression is one of efficiency and understated authority, suitable for a developer-centric product. Use ui-monospace with a letter-spacing of -0.006em for all text elements to maintain the consistent technical aesthetic. Prioritize Cloud White (#fafafa) for background surfaces and Ash Black (#000000) for primary headlines to establish clear visual hierarchy. Apply Electric Blue (#0b6ec5) exclusively to interactive text elements like links and hover states to guide user interaction. Employ Flame Orange (#f35815) sparingly for urgent calls-to-action or promotional banners to maximize its impact. Maintain a strict 0px border-radius for all primary UI elements like buttons, input fields, and cards to reinforce the sharp, precise design language. Utilize the 8-pixel base unit for all spacing, particularly 24px for component padding and 96px for section gaps, to create a comfortable yet structured density. Render all third-party logos in #414141 (Steel Gray) on a Cloud White (#fafafa) background to integrate them into the monochrome palette. Do not introduce any curved forms beyond the 9999px radius for tags; all other elements must maintain sharp, 0px corners. Avoid using drop shadows or complex gradients; rely on color contrast and solid borders for definition and depth. Do not deviate from the ui-monospace font; introducing other font families will compromise the core identity. Refrain from using Electric Blue (#0b6ec5) for purely decorative purposes, as it is reserved for interactive states and primary links. Do not use background colors other than Cloud White (#fafafa) or the defined neutral grays for main content areas; maintain the light theme. Avoid excessive use of Flame Orange (#f35815) in non-CTA contexts, as its impact is dependent on its limited application.