A spacious, clean layout with ample white space, prioritizing readability and clear content hierarchy.
07
Motion & Interaction
250msmicro
500mssmall
1000msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing
Fade-in and fade-out for UI elements · Smooth transitions for state changes · Subtle movement for interactive feedback
Subtle changes in border color or background opacity, maintaining a refined feel. · Immediate visual feedback with slight scale or opacity shifts, followed by a transition back to the base state.
08
Components
buttonMinimalist pill-shaped buttons with light borders or solid purple backgrounds, using uppercase text.
cardSimple containers with soft rounded corners and subtle shadows, often used for grid layouts.
chipMinimal rectangular elements with thin borders, typically used for navigation or filters.
inputClean form fields with light borders and rounded corners, focusing on functional clarity.
heroFull-width or large format imagery overlaid with bold, clean typography and a single clear call-to-action.
09
Voice & Don'ts
ToneFriendly, helpful, and professional.
HeadlinesDirect, clear, and often uses a mix of standard and bold weights for emphasis.
CTAsAction-oriented and concise, often using uppercase text in pill-shaped buttons.
Don't use heavy drop shadows — the screenshot shows very subtle, low-opacity shadows for depth.
Don't apply bright, clashing colors — the palette is restrained to whites, greys, and a single purple accent.
Don't use overly decorative fonts — the typography is clean, functional, and highly readable.
Don't clutter the layout with excessive elements — the design uses ample white space and a clear hierarchy.
Don't use sharp, aggressive corners — the design favors soft, rounded corners (5px to 8px) or fully rounded pills.
Don't ignore accessibility — the interface includes a dedicated, comprehensive accessibility options panel.
Captured from the live site · real computed styles
11
System prompt
A refined, accessible e-commerce site for premium lifestyle products. Key colors are crisp white (#FFFFFF), deep ink (#212121), and a functional purple accent (#574CD5). Typography is humanist-sans (Neue Haas Unica) at a 16px base with a tight 1.2 line height. The layout is spacious, using a 4px base grid and subtle shadows. Critical donts: don't use heavy drop shadows, don't apply clashing colors, and don't clutter the layout. This system is designed for clarity, refinement, and inclusive access.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
