Gradient is the transition-driven interface: color flows continuously across the page, with magenta (#E60076) to violet (#990FFA) fading like a dusk sky. Gradients carry atmosphere, emphasis, and division, giving static layouts motion. Made for brand sites, creative products, and visual storytelling that must flow.
CreativeVibrant
Prompt Template
Base Template
Design a Gradient-inspired interface. Colors: #E60076, #16A34A, #D97706, #DC2626 with #E60076 accent. Typography: #990FFA.
Variant Prompts
📱 Mobile
Design a mobile app with Gradient aesthetics. Use Gradient color identity with #E60076 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Gradient style. Use Gradient color identity with #E60076 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Gradient design language. Use Gradient color identity with #E60076 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Gradient visual identity. Use Gradient color identity with #E60076 accents. Compelling, conversion-focused.
Usage Examples
Gradient App
WebBuild a web app with Gradient design language and #E60076 color system.
Gradient Dashboard
DashboardCreate a dashboard using Gradient style with data visualization and #990FFA typography.
✅ Best For
- Effects
- Modern product websites
- Creative event pages
❌ Avoid For
- Minimal black-and-white tools
- Solemn data back offices
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.