
Preview image. Unlock full-res
Stationery storefront on paper
Mishmash projects a playful, product-centric aesthetic through a stark monochrome UI punctuated by an array of vibrant product photography. The design features a light theme with crisp, neutral surfaces, allowing the colorful stationery products to be the focal point. Typography is compact and precise, conveying information efficiently, while rounded elements add a touch of softness to an otherwise structured layout. This system prioritizes visual clarity and product showcase over decorative complexity. Always use Circular for all typographic elements to maintain brand consistency. Utilize Midnight Ink (#171717) for primary text and critical UI elements to ensure high contrast and legibility. Apply Cloud Canvas (#ffffff) and Fog Gray (#f2f2f2) as dominant background colors to support the light theme and provide visual hierarchy. Employ a 12px border radius for interactive elements like buttons and an 16px radius for cards to add softness. Restrict padding to values from the spacing scale (2px, 4px, 6px, 8px, 12px, 14px, 16px, 20px, 24px, 32px, 40px, 48px) for consistent rhythm. Feature product photography prominently, using vibrant, full-color images against neutral UI elements. Use Sunset Gold (#f9cb86) sparingly for promotional badges or discrete CTA fills, contrasting with the dominant neutrals. Avoid introducing additional saturated colors unless they are part of product photography, maintaining a neutral UI palette. Do not use heavy shadows or gradients on UI elements; the system prioritizes flat modern surfaces. Refrain from altering the letter-spacing of the Circular typeface, it is inherently normal for this brand. Do not use dark backgrounds for main content sections; this system operates strictly on a light theme. Avoid decorative strokes or borders around cards unless for a specific interaction state; cards should generally be ghosted or have solid light backgrounds. Do not use overly large or decorative display fonts; maintain the compact, functional nature of Circular.









