Preview image. Unlock full-res
Vibrant organized workspace — like a digital desk splashed with colorful sticky notes and neatly arranged tools.
This design system feels like a vibrant, organized digital workspace, balancing playful accents with robust functionality. It uses a very accessible light theme with high-contrast text and a central, vivid violet (#6161ff) to draw attention to primary actions. The abundant use of color, especially in product card backgrounds, creates a rich and dynamic interface, while rounded elements (160px pill buttons, 24px cards) soften the structured grid layout. A diverse set of gradients adds energetic flair and a sense of continuous motion. Do use 'Interactive Violet' (#6161ff) for primary call-to-action buttons, ensuring text is 'Canvas Background' (#ffffff). Do apply a 160px border-radius to all buttons to create a consistent pill shape. Do use Poppins 20px, weight 700 with -0.015em letter spacing for major section headings to maintain legibility and impact. Do utilize the specific accent colors like 'Card Mint' (#bcfe90) and 'Card Sky' (#abf0ff) as backgrounds for feature cards to add visual variety and categorization. Do ensure interactive elements use 'Interactive Graphite' (#535768) for text and 'Border Silver' (#d0d4e4) for subtle borders in neutral states. Do apply the rgba(205, 208, 223, 0.4) 0px 2px 48px 0px shadow for elevated cards to create clear visual hierarchy. Do employ 'elementGap' at 8px for consistent spacing between inline and block elements. Don't use any color other than 'Interactive Violet' (#6161ff) for primary CTA button backgrounds; use outlined or text variants for secondary actions. Don't use square buttons or cards; maintain the established 160px or 24px border-radii for interactive and content elements respectively. Don't deviate from Poppins for any text element; other fonts will appear off-brand. Don't overcrowd sections; maintain a minimum 'sectionGap' of 48px between major content blocks. Don't introduce new shadow values; use the established rgba(205, 208, 223, 0.4) 0px 2px 48px 0px for elevation or no shadow for flat elements. Don't center align body text; prefer left alignment with 'Text Primary' (#333333) for optimal readability.
