Preview image. Unlock full-res
Photographic gallery on architectural black and white. Product precision through high-contrast typography.
This system embodies a utilitarian elegance, pairing stark black and white sections with subdued neutrals to frame product photography. Typography is the primary expressive element, with a high-contrast serif font for arresting headlines that feel established yet contemporary. Subtle button treatments and precise spacing prioritize content clarity and direct interaction, creating a refined, almost stoic, e-commerce experience. Prioritize Absolute Zero (#000000) or Cloud White (#ffffff) for hero section backgrounds to create high-contrast statements. Use Exposure-10 (substitute Playfair Display) for all display and large heading text to convey craftsmanship and gravitas. Apply a 4px border-radius for all interactive elements like buttons and input fields for a subtle softening. Reserve bryant font with its characteristic letter-spacing (e.g., 0.61px at 16px) for uppercase action-oriented text and badges. Maintain a clear product-focused visual hierarchy by placing product images within cards that have 0px internal padding. Utilize Ash Gray (#eef1f0) as a divider or background for secondary UI elements to differentiate without interrupting the high-contrast main scheme. Ensure all body and informational text uses Geist (substitute Inter) at 14px or 16px for optimal legibility. Do not use saturated colors for large background areas; maintain the primary black, white, and neutral palette. Avoid generic button styling; ensure clear differentiation between ghost, solid, and accent button variants. Do not introduce additional serif fonts; Exposure-10 is the singular serif. Do not use generic sans-serifs — stick to Geist and bryant. Avoid complex shadows; prefer flat UI elements or subtle border definitions for depth. Do not break the rigid grid layout with overlapping content or free-form elements; content should be contained and aligned. Do not use decorative elements that distract from the product imagery or strong typography. Do not use bold weights of Geist for normal paragraph text; reserve it for specific UI elements or semantic emphasis.
