
Preview image. Unlock full-res
Raw Concrete Canvas — Bold typography and rich textures anchor a tactile, achromatic experience.
Escape Coffee Company presents a rugged, textural commerce experience. High-contrast typography emphasizes bold statements, while a carefully curated achromatic palette allows rich product photography and content backgrounds to dominate. Interaction elements are minimal and integrated, often appearing as subtle outlines or text against dark neutral backgrounds, preserving a raw, authentic feel. Use Graphite Ink (#151515) for all primary text content to maintain strong contrast against lighter backgrounds. Apply Canvas White (#f5f4f2) as the default page background and for subtle UI element borders. Prioritize TWK Lausanne for all body copy and standard headings, adjusting weight and letter spacing according to the type scale for functional variation. Reserve Molitor for large, impactful headlines (e.g., hero sections) to create significant visual presence. Ensure all interactive elements, like buttons, maintain a minimum border-radius of 7px, with product cards using 16px, for subtle softening without appearing overly rounded. Utilize 10px as the standard element gap for arranging items within cards or small groupings. Employ the Ghost Button variant (transparent background, Graphite Ink border, no radius) for secondary actions or navigation links to maintain a light UI footprint. Do not introduce new saturated colors; the palette is strictly achromatic with minimal, functional color accents for specific text states. Avoid applying heavy drop shadows; elevation is primarily achieved through background color shifts and subtle borders. Do not use Molitor or Garaje for body text; their distinct characteristics are intended for display and emphasis only. Refrain from using border-radii smaller than 3px or deviating from the established 7px (buttons), 10px (badges), 16px (cards), and 50% (circular) values. Do not use generic padding values; adhere to the 16px card padding and 10px element gap for consistent content density. Avoid dense, information-heavy sections; ensure comfortable spacing and visual breaks between content blocks.









