SEEN

SEEN's design system embraces a playful, otherworldly aesthetic where vibrant colors are central to its identity. The core visual language is an expressive, gradient-rich fantasy with rounded, organic forms and bold, custom typography. Color is used for soft background washes and as a distinct outline for interactive elements, creating an inviting and whimsical user experience. Always use 'Dreamdust Gradient' (#d49ae2) as the base background, allowing for subtle color shifts and depth. Apply 'Bubblegum Outline' (#683c72) exclusively for interactive elements like button borders, icons, and button text. Use 'Ink' (#000000) for all primary text content to ensure optimal legibility against gradient backgrounds. Maintain a consistent 32px border-radius for all interactive components such as buttons to reinforce the soft, organic aesthetic. Incorporate BB Sans at 16px weight 400 for body text and 14px for smaller captions and labels, avoiding other font families. Implement an 8px base unit for all element spacing, with elements like buttons using 16px horizontal padding. Do not use solid fills for primary backgrounds; always leverage the 'Dreamdust Gradient'. Avoid using 'Bubblegum Outline' (#683c72) as a solid background fill for any interactive element. Do not use highly saturated colors for large areas of text; restrict 'Ink' (#000000) for body and headline text. Avoid sharp or low border-radius values; all elements should adhere to the rounded and soft aesthetic. Do not introduce additional font families or weights outside of BB Sans 400 and 500. Do not use values other than 8px or 16px for element padding and spacing unless explicitly defined for a specific component.