Render

Render, clean, minimal

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.

Palette
#ffffff
#0d0d0d
#272727
#4d4d4d
#6b6b6b
#e3e3e3
#e6daff
#e0f4ff
#8a05ff
#d67f2
#009e7a
#48008c

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.

More like this