TOMO

TOMO's design system is a collage-like, intentionally raw aesthetic, reminiscent of a zine or found-art compilation. It layers unconstrained imagery with stark, high-contrast typography and a simple, limited color palette focused on black, white, and a distinctive background tint. Visual elements often break traditional layout norms, appearing as cut-outs or overlapping pieces, eschewing typical component styling like consistent borders or backgrounds for a more deconstructed feel. The system prioritizes texture and visual surprise over smooth predictability, with text blocks often treated as separate, unaligned artifacts. Use Found Paper (#eee2d4) as the primary page background color to establish the warm, aged base. Employ Ink Black (#000000) for all primary text and critical UI borders for maximum contrast and graphic impact. Set all border-radius values to 0px to maintain the sharp, cut-out aesthetic; avoid rounded corners entirely. Utilize Recife font for headlines and prominent text, varying between 300 and 400 weights for subtle hierarchy at 26px or 32px size and 1.0-1.3 line height. Apply a 1px solid Ink Black (#000000) border to interactive elements and text blocks when a distinct visual separation or highlight is needed. Treat content sections less as structured blocks and more as overlapping or adjacent cutout elements, allowing for varied bottom padding values. Keep utilitarian buttons visually understated with Button Gray (#efefef) background and Ink Black (#000000) text and border. Do not use any shadows for elevation; rely on overlaps, borders, and position for visual hierarchy. Avoid gradients anywhere in the UI; the system is built on solid color blocks and photographic textures. Do not introduce additional background or accent colors that deviate from the established neutral and single semantic red palette. Refrain from using consistent grid structures or even spacing across major content sections; embrace a deliberately 'unaligned' feel. Do not use letter-spacing other than 'normal' except where explicitly specified by type data. Avoid any visually 'smooth' or 'modern' components (e.g., pill buttons, soft shadows, subtle color ramps); prioritize a raw, artisanal feel. Do not use system fonts for prominent display text; adhere strictly to Recife for its distinct character.