Design for AI

AI startup gradient glow: UI design prompt

Palette, type rules and a pasteable prompt for ai startup gradient glow. Also called AI landing page style, purple gradient SaaS, generic AI aesthetic, gradient glow dark mode, v0 default look, AI slop design. 2022-2025 (ChatGPT wave; every AI wrapper landing page).

Traits

  • dark navy or black page with a purple-to-blue or purple-to-pink gradient glow behind the hero
  • gradient text on the headline ("Supercharge your workflow"), sparkle emoji or star icons
  • glass cards with 1px gradient borders, a grid or dot pattern fading into the background
  • three-column feature cards with gradient icon badges, a logo wall, a pricing table with a "popular" glow
  • Inter everywhere, 48-64px headline, "Get started for free" pill button with a gradient
  • floating orbs, blurred blobs, subtle animated grid, a fake product screenshot with a glow
  • it is what every AI tool generates when no style is specified

Palette

#0a0a1a page, #ffffff text, #a1a1aa muted, #7c3aed violet, #3b82f6 blue, #ec4899 pink, rgba(255,255,255,0.05) glass

Type

Geist (always), headings 700 at 56-64px with -0.02em, gradient-filled; body 400 at 18px; buttons 600 at 16px in pills

Do

  • recognise it: if the page has a purple glow, gradient headline text, three glass cards and a sparkle icon, it is this style
  • to avoid it, change at least three of these: the font (use a serif or a grotesk with character), the background (light, warm or true colour), the gradient (delete it), the card grid (use a list, a table or prose), the accent (one flat colour)
  • if a client insists on it, at least ground it: real screenshots, real numbers, one glow, one gradient, no sparkles

Don't

  • do not ship it by default; it signals "no designer, no decisions" to anyone who has seen ten AI landing pages
  • do not use gradient text on more than one word; it hurts legibility and dates instantly
  • do not add sparkle or star icons next to "AI"; the word already says it

Known for it: thousands of AI wrapper landing pages 2023-2025, default v0 and Lovable outputs, most "Launch your SaaS" templates

CSS seed
:root {
  --bg: #0a0a1a;
   --fg: #ffffff;
   --muted: #a1a1aa;
   --accent: #7c3aed;
   --accent2: #3b82f6;
   --glass: rgba(255,255,255,0.05);
   --radius: 16px;
   --glow: 0 0 80px rgba(124,58,237,0.4);
   --font: 'Geist',sans-serif
}
Prompt

Build the site in the AI startup gradient glow style, but on purpose and restrained (this is the default look most AI tools produce; use it only if the brief demands it). Background #0a0a1a with a single radial glow behind the hero (rgba(124,58,237,0.35), 70vw, blur(120px)) and a 32px dot grid at 4% white fading out below the fold. Text #ffffff, muted #a1a1aa. Font Geist: h1 700 at 60px with -0.02em, gradient text (linear-gradient(90deg, #7c3aed, #3b82f6)) on one word only; body 400 at 18px. Primary button: pill, gradient #7c3aed to #3b82f6, white text, 48px tall; secondary: 1px rgba(255,255,255,0.15) outline. Cards: rgba(255,255,255,0.05) fill, 1px rgba(255,255,255,0.1) border, radius 16px, no gradient borders, no sparkles. One real product screenshot with a 1px border and the same violet glow at 20%. Pricing: three columns, the middle one with a violet border, no glow. Motion: 400ms fade-up on scroll. Limit: one glow, one gradient, zero emoji.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in the AI startup gradient glow style, but on purpose and restrained (this is the default look most AI tools produce; use it only if the brief demands it). Background #0a0a1a with a single radial glow behind the hero (rgba(124,58,237,0.35), 70vw, blur(120px)) and a 32px dot grid at 4% white fading out below the fold. Text #ffffff, muted #a1a1aa. Font Geist: h1 700 at 60px with -0.02em, gradient text (linear-gradient(90deg, #7c3aed, #3b82f6)) on one word only; body 400 at 18px. Primary button: pill, gradient #7c3aed to #3b82f6, white text, 48px tall; secondary: 1px rgba(255,255,255,0.15) outline. Cards: rgba(255,255,255,0.05) fill, 1px rgba(255,255,255,0.1) border, radius 16px, no gradient borders, no sparkles. One real product screenshot with a 1px border and the same violet glow at 20%. Pricing: three columns, the middle one with a violet border, no glow. Motion: 400ms fade-up on scroll. Limit: one glow, one gradient, zero emoji.

## Tokens
:root { --bg:#0a0a1a; --fg:#ffffff; --muted:#a1a1aa; --accent:#7c3aed; --accent2:#3b82f6; --glass:rgba(255,255,255,0.05); --radius:16px; --glow:0 0 80px rgba(124,58,237,0.4); --font:'Geist',sans-serif }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.