Plain

Plain's design system evokes a digital workbench aesthetic: a clean white canvas overlaid with distinct, slightly textured surfaces. The typography is precise and functional, favoring mono-spaced and geometric sans-serifs. A single vibrant green serves as the primary accent, activating interactive elements and key information against an otherwise subdued, near-monochromatic palette. Components are lightweight with subtle shadow work, emphasizing information over heavy ornamentation. Use ABC Favorit for all primary text content. Opt for weight 400 for body and 500 for headlines to establish clear hierarchy. Apply Plain Green (#1ad379) strictly for primary calls to action, active states, and small, functional brand accents. Maintain a clear visual hierarchy using the surface progression: Canvas White (#ffffff) as base, Ghost Fog (#f3fbe9) for secondary blocks, and Vanilla Cream (#f9f6f1) for cards. Ensure all buttons and interactive elements utilize a 6px border-radius for a consistent, subtle rounding. Implement 24px as the standard element gap for moderate spacing between distinct UI components. Use Geist Mono (#13px, weight 500) for all code snippets, timestamps, and interface labels requiring a technical, structured feel, applying specialized font features 'ss02' and 'ss06'. Employ System Black (#000000) for hard lines and borders to create sharp, deliberate divisions and structure without relying on heavy shadows. Do not introduce new saturated accent colors outside of Plain Green; rely on the established brand green for all chromatic interactions. Avoid heavy box-shadows or complex elevation styles; prefer clean, flat surfaces or subtle background color changes for depth. Do not use generic system fonts for prominent headings or body copy; ABC Favorit and Geist Mono are essential to the brand's typographic identity. Do not deviate from the specified border-radii of 6px for interactive elements and 9px for cards; inconsistent rounding undermines the visual precision. Do not use color for purely decorative purposes, apply it functionally to highlight interactions, status, or brand identity. Avoid wide, full-bleed content sections; maintain a comfortable maximum content width and centered layout for readability. Do not overuse bold weights in text; the system relies on subtle weight shifts and specific font choices to convey hierarchy and distinction.