Shupatto

Shupatto's design system is a study in minimalist elegance, prioritizing abundant negative space and a clean, typographic hierarchy. Its muted palette features primary charcoal and white, punctuated by a single vivid violet for functional highlights. This creates a serene, almost art-book like experience, where compact, widely tracked typography carries primary emphasis, allowing products to breathe and take center stage without visual clutter. Components are understated, often borderless, and integrate seamlessly into the expansive white canvas. Prioritize Canvas White (#ffffff) for backgrounds to maintain an open, minimalist aesthetic. Use Charcoal Text (#2d2d2d) for primary text and Deepest Ink (#000000) for strong emphasis, employing Slate Gray (#878887) for secondary content. Apply wide letter-spacing (0.071em to 0.180em) consistently across all typography to reinforce the brand's spacious, editorial feel. Utilize Highlight Violet (#738ae5) exclusively for functional accents such as active navigation items, badges, or subtle hover states. Maintain 0px border-radius for buttons, badges, and most UI elements, reserving 3px for very specific, minor 'other' elements as detected. Employ Gill Sans Nova Book (weight 500) for core body content and Gill Sans Nova Semibold (weight 800) for all headings and prominent labels, ensuring visual harmony across different hierarchical levels. Keep components visually lightweight, often using transparent backgrounds or minimal borders, allowing the typography and spacing to define them. Avoid using saturated colors other than Highlight Violet (#738ae5); all other hues should be achieved through tints and shades of neutral colors. Do not introduce heavy shadows or gradients; rely on contrasting typography, spacing, and subtle border lines for hierarchy. Refrain from using tight letter-spacing; the brand identity is built on generous character spacing that feels artistic. Do not use generic button styles; buttons should be either ghost-like (text-only) or monochromatic text with subtle box model cues, never fully filled with a neutral color as a primary actionable. Avoid content-packed layouts; ensure ample negative space around every element to maintain the site's airy and premium feel. Do not use highly decorative imagery or illustrations; imagery should be minimal and complement the clean UI, often product-focused or abstract. Do not deviate from the specified font families; their distinctive widespread tracking and weights are critical to the brand's typographic identity.