Offten

Offten's design system evokes a glitch-art, digital-native aesthetic, intentionally breaking common UI conventions. It features a stark monochromatic palette of black and white, punctuated by vivid green for interactive elements and deep orange for decorative accents. Typography is heavily tracked and often letter-spaced, creating a distinct, fragmented visual rhythm. Surfaces are minimal, relying on subtle backgrounds and borders rather than strong elevation to define elements. The overall feel is raw and experimental, prioritizing visual impact over traditional interface smoothness. Prioritize Midnight Ink for all primary text and UI outlines to maintain a stark monochromatic core. Use Signal Green exclusively for outlined interactive elements and critical icons to ensure visual emphasis. Apply nh font with its distinct letter-spacing for all text elements; ensure tracking is consistent across sizes. Implement the 22.5px border-radius consistently for card-like surfaces to create a uniform soft edge. Employ a base unit of 6px for all spacing decisions, especially for micro-padding and element gaps. Utilize Translucent Smoke (rgba(0,0,0,0.1)) subtly for card backgrounds, avoiding strong, opaque surface differences. Ensure headings use increased letter-spacing to enhance the signature 'fragmented' typographic style. Avoid using drop shadows or heavy elevation; surfaces should remain flat or rely on subtle background tints. Do not introduce additional background or accent colors beyond Canvas White, Midnight Ink, Signal Green, and the orange tones. Do not use standard sans-serif fonts; the unique nh typeface is fundamental to the brand's identity. Do not deviate from the specified letter-spacing values, as they are integral to the typographic impression. Avoid using large, filled buttons; all primary actions should be represented by the outlined Signal Green variant. Do not round corners excessively on elements other than cards; buttons and badges should mostly be sharp or pill-shaped. Avoid generic imagery or illustrations; instead, favor abstract, glitch-like, or heavily processed visuals.