Touchy Coffee

Touchy Coffee's design system evokes the feeling of a friendly, DIY publication with a strong personality. It uses a limited, somewhat desaturated color palette with a vivid accent program and a striking, custom logotype that's soft and rounded. The layout is structured but playful, featuring hand-drawn elements and a slightly retro, analog feel. Typography relies on a monospaced sans-serif for high legibility and a distinct voice. Prioritize Apercu Mono for almost all text elements, relying on weight 400 for body and weight 700 for emphasis, always with 'normal' letter spacing. Utilize Muted Sage (#788c8c) as the primary canvas color for large background areas, establishing a subdued base. Apply 100px border-radius to all interactive buttons and small tags for a soft, friendly pill shape. Use 20px border-radius on cards, images, and larger container elements to maintain consistent rounded corners. Employ Graphite (#000000) for all primary body text and strong outlines against lighter backgrounds. Incorporate Burnt Sienna (#9f4920) or Forest Green (#5b9133) as vivid accent colors for decorative details, specific statuses, or when a strong, yet warm, visual pop is needed. Maintain a clear visual hierarchy by limiting shadows and keeping component surfaces flat or outlined. Avoid using highly saturated, primary colors outside of the defined accent palette (Burnt Sienna, Forest Green, Periwinkle Mist). Do not introduce sharp corners or square elements for interactive components or cards; leverage the curved radii consistently. Refrain from using complex gradients or drop shadows, as the system emphasizes flat surfaces and outlines. Do not deviate from Apercu Mono; introducing other typefaces would break the distinctive brand voice. Avoid dense, compact layouts. Strive for comfortable density with 20px element spacing and 80px section gaps. Don't add custom padding to buttons; adhere to the 10px/20px or 15px/20px padding specifications for consistent sizing. Never use blue for links outside of the Periwinkle Mist accent; all link text should be Graphite or White as context dictates.