Preview image. Unlock full-res
Abstract digital canvas, illuminated.
This design system feels like a tech conference where abstract ideas are made tangible. Its light theme and ample white space convey clarity and openness, while a spectrum of vibrant violet-to-pink gradients and sharp vector illustrations infuse it with a futuristic, playful energy. The interplay between strong, almost black headings and lighter grey body text, anchored by a prominent purple accent, creates a sophisticated yet dynamic informational aesthetic. Rounded corners on interactive elements provide a friendly counterpoint to predominantly straight lines in graphics. Use Electric Violet (#6c24e0) exclusively for primary calls-to-action and active states to maintain visual hierarchy. Employ the Inter font at weight 900 for all display and large headings (48px, 60px, 64px) to convey authority and impact. Apply Lavender Bloom (#ece0ff) for background sections that need a branded, soft distinction from the main Cloud White canvas. Ensure generous padding, primarily 16px for content blocks and 32px for larger structural elements, to create an airy, spacious feel. Utilize 8px border-radius for primary buttons to give a modern, approachable feel, offsetting the sharper aesthetic of core UI elements. Implement the background radial gradient for hero sections or key interstitial blocks to introduce visual depth and brand mood. Do not use multiple contrasting accent colors in a single area; prioritize Electric Violet, reserving Fuchsia Burst and Indigo Orb for secondary illustration details. Avoid box-shadow on cards that are meant to be simple content containers; maintain the flat aesthetic unless elevation is explicitly required by interaction. Refrain from using more than two distinct font families; Inter and IBM Plex Mono are sufficient for all content and UI needs. Do not vary paragraph text size excessively; stick to 16px for body and 14px for captions for consistent readability. Avoid applying tight letter-spacing; all text should maintain 'normal' letter-spacing except where specific display styles are defined by the type scale.
