
Preview image. Unlock full-res
Crisp canvas, gradient fireworks. A bright, white backdrop that provides contrast for a constellation of colorful gradients and powerful typography.
This design system is a light, airy canvas punctuated by bold, evocative gradients and a vibrant, expansive color palette. The combination of clean, modern sans-serifs and a striking, multi-color gradient usage creates a dynamic yet professional atmosphere. Text is predominantly dark charcoal against a pristine white background, allowing the rich accent colors and gradients to highlight key information and interactive elements, giving the impression of a sophisticated, high-performance platform.
Use Charcoal Text (#0d0d0d) for all primary text against white backgrounds to ensure AAA contrast.
Apply borderRadius: 0px for all standard buttons and cards to maintain a sharp, modern aesthetic.
Utilize Roobert for all headlines with negative letter spacing (-0.03em to -0.01em) to create a signature tight, impactful look.
Employ the Grape Glow (#8a05ff) as the primary accent for interactive elements and key numerical highlights.
Incorporate the linear brand gradients (e.g., linear-gradient(to right, rgb(138, 5, 255), rgb(214, 127, 46))) for high-impact headlines or distinctive background sections.
Maintain a clear visual hierarchy by consistently using PPNeueMontreal for body text and UI elements, with 16px as a base font size.
Ensure all interactive elements have a clear hover state, typically darkening the text or background subtly as seen on navigation items.
Do not introduce rounded corners other than 937px for specific pill-shaped tags to maintain the sharp aesthetic.
Avoid using additional bright, highly saturated colors for backgrounds; reserve them for accents and gradients.
Do not deviate from the specified font families; PPNeueMontreal and Roobert define the typographic voice.
Do not use generic box shadows; elevation is primarily achieved through background color shifts and borders.
Avoid overuse of the vivid accent colors; their power comes from strategic placement to highlight key information.
Do not apply letterSpacing: 0 to large headlines; the distinctive negative letter spacing of Roobert is crucial.
Do not use a solid background color for the 'apps & agents' portion of the main hero headline; it must retain its gradient fill.









