SaaS Signature Gradient demo
SaaS Signature Gradient

A quintessential modern SaaS and AI startup aesthetic built around the signature tech gradient, with clean layouts tailored for developer tools, APIs, and B2B products.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 14.7 KB · 1989 words
# CODING-AI SYSTEM PROMPT — LANDING PAGE BUILD: "SAAS SIGNATURE GRADIENT"

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality Landing Page on the first attempt — no drafts, no partial output.

**Objective:** Build a single-page landing site for a fictional SaaS/AI startup product (an AI developer tool — invent ONE product identity and keep all copy consistent with it). The page must contain, in order: **Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.** All user-facing copy must be written in **English**, realistic and cohesive — no lorem ipsum.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML.
* **Class/ID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.
* **Minimal HTML Modifications:** HTML must remain clean, semantic, and styling-agnostic — re-theming the site must require editing only the CSS file, never the markup.

**1.2 CSS Variables (`var(--...)`) & Theme Tokens**
All visual tokens must live in `:root`:

* **Colors:** `--primary: #6C3AED` (Base Purple), `--secondary: #2563EB` (Deep Blue), `--primary-light: #A78BFA` (Light Purple), `--secondary-light: #60A5FA` (Light Blue), `--accent-cyan: #06B6D4` (Highlight Cyan), `--accent-teal: #14B8A6` (Teal).
* **Surfaces:** `--bg-primary: #0B0F1A` (Dark Background), `--bg-secondary: #131A2B` (elevated dark surface), `--glass-bg: rgba(255,255,255,0.05)`, `--glass-border: rgba(255,255,255,0.10)`.
* **Text:** `--text-primary: #F1F5F9` (Text White), `--text-secondary: #94A3B8` (muted slate), `--text-success: #14B8A6`, `--text-error: #F87171`.
* **Borders:** `--border-default: rgba(255,255,255,0.10)`, `--border-error: rgba(248,113,113,0.50)`, `--border-success: rgba(20,184,166,0.50)`.
* **Theme Gradients & Glows:** `--gradient-primary: linear-gradient(135deg, #6C3AED 0%, #2563EB 100%)`, `--gradient-accent: linear-gradient(135deg, #06B6D4 0%, #14B8A6 100%)`, `--glow-purple: 0 0 30px rgba(108,58,237,0.5)`, `--glow-cyan: 0 0 30px rgba(6,182,212,0.3)`, `--text-glow: 0 0 20px rgba(108,58,237,0.5)`.
* **Radius & Shadows:** `--radius-sm: 0.5rem`, `--radius-md: 0.75rem`, `--radius-lg: 1.5rem`, `--shadow-sm: 0 2px 8px rgba(0,0,0,0.35)`, `--shadow-md: 0 8px 24px rgba(0,0,0,0.45)`.
* **Spacing & Transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
* **Elevation/Stacking:** `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100` (plus any extras such as `--z-nav`, `--z-decorative`) to prevent overlap conflicts between layered components.
* **Contrast Pairing:** Dark background tokens pair exclusively with light text tokens. Never use `--primary`/`--secondary` as text color on dark backgrounds for readable copy — use `--primary-light`/`--secondary-light` for colored text. If any near-white surface is ever introduced, use `#fefefe`, never `#ffffff`.

**1.3 Mandatory Dark Mode (Dark-Only Theme)**
* This theme is **full dark mode**: all `:root` tokens above ARE the dark palette (`#0B0F1A` background, `#F1F5F9` text). `prefers-color-scheme` must never switch the page to a light palette — it renders dark for every user.
* Theming must remain 100% CSS-variable-driven so a future light theme could be added via a class override with zero HTML restructuring.
* **Exception:** The theme specification mandates a dark-only experience (no light variant), so the visible theme toggle and localStorage persistence requirements are waived for this build — do not add a theme switcher.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with **Flexbox** (`display: flex` / Tailwind flex utilities).
* **Default Alignment Rule:** Every flex container must default to `align-items: center` (`items-center`) unless an exception is explicitly justified in a CSS comment.
* **Mobile-Friendly First:** All flex rows must collapse to columns at appropriate breakpoints; zero horizontal scrolling at any viewport from 320px upward; fluid sizing throughout.

**1.5 Framework Default & Tailwind CSS Integration**
* Use Tailwind CSS (CDN script acceptable) for layout utilities; define all custom components as reusable classes (`.btn`, `.card`, `.input-group`) in `@layer components` or `style.css`, always mapping back to the CSS variables above. Never hardcode a hex value in a utility where a token exists.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* **Text:** Load **Inter** and **Plus Jakarta Sans** from Google Fonts via `<link>` tags; bind to `--font-base: 'Inter', 'Plus Jakarta Sans', sans-serif` (Plus Jakarta Sans for headings, Inter for body).
* **Icons:** Use **Google Material Symbols (Rounded)** via the Google Fonts link — every icon rendered as `<span class="material-symbols-rounded">icon_name</span>`. Raw inline SVGs and local icon files are forbidden for icons.
* **Exception:** The theme's required feTurbulence noise texture is the single permitted SVG — it must be embedded exclusively as a CSS `background-image` data-URI (`data:image/svg+xml,...`), never as inline `<svg>` markup in the HTML.

---

## 2. THEME VISUAL DIRECTION — "SAAS SIGNATURE GRADIENT"

**2.1 Base & Mesh Background**
* Page background: `#0B0F1A` with extremely smooth purple-to-blue mesh as the base: `background-image: radial-gradient(ellipse at 20% 50%, rgba(108,58,237,0.3) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(37,99,235,0.2) 0%, transparent 50%);`
* Mesh-gradient **blobs** built from multiple overlapping radial-gradients at varying positions and colors (purple, blue, cyan, teal).

**2.2 Floating Orbs & Blobs**
* Create 3–5 decorative **orbs** — soft 3D spheres via `radial-gradient` with `filter: blur(60px–100px)` (typically `blur(80px)`), 300–600px in size, positioned inside a fixed, full-viewport background layer with `pointer-events: none`, `aria-hidden="true"`, and a `z-index` below all content.
* Animate drift with: `@keyframes float-orb { 0%,100% { transform: translate(0,0) } 50% { transform: translate(30px,-20px) } }` — slow durations (20s–40s) with staggered delays per orb for organic motion.
* Edge fade on every orb/blob: `mask-image: radial-gradient(circle, black 40%, transparent 70%)` (include `-webkit-mask-image`) so opacity dissolves at the edges.
* **Interactivity:** Add subtle pointer-parallax — on `pointermove`, the orb layer translates a few pixels toward/away from the cursor via JS transforms (requestAnimationFrame-throttled); fully disabled under `prefers-reduced-motion: reduce`.

**2.3 Noise Texture**
* Full-viewport fixed overlay using SVG `feTurbulence` with `baseFrequency="0.65"` at **3–5% opacity**, implemented as a CSS data-URI background (per the 1.6 exception), `pointer-events: none`, `aria-hidden="true"` — producing a grainy/frosted texture over backgrounds and glass surfaces.

**2.4 Glassmorphism**
* All cards/panels: `background: var(--glass-bg)` (rgba(255,255,255,0.05)), `backdrop-filter: blur(20px)` plus `-webkit-backdrop-filter`, 1px `var(--glass-border)`, `var(--radius-lg)` corners.

**2.5 Simulated Neon Glow**
* Key headings and gradient text: `text-shadow: 0 0 20px rgba(108,58,237,0.5)`.
* Key interactive elements (primary buttons, featured pricing tier): `box-shadow: 0 0 30px rgba(6,182,212,0.3)`, intensifying on hover.
* Glow is always decorative reinforcement — never the sole indicator of any state.

**2.6 Visual Rhyme (Mandatory Cohesion)**
* Repeat the same gradient family (purple→blue with cyan/teal accents) and the same curved shape language across the logo mark, buttons, card corners, icon containers, step connectors, and decorative elements.
* Logo mark: built with CSS only (gradient rounded/orb shape or a Material Symbol inside a gradient container) — no image files, no inline SVG.
* Gradient text on hero headline keywords: `background-clip: text; -webkit-background-clip: text; color: transparent;` over `--gradient-primary`.

**2.7 Reduced Motion**
* Under `@media (prefers-reduced-motion: reduce)`: orbs freeze, parallax is disabled, and transitions/animations are reduced to essentials.

---

## 3. COMPONENT DESIGN SPECIFICATIONS

**3.1 Button Component**
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — minimum touch target 44×44px. Variants: `.btn--primary` (gradient background, white text, cyan glow), `.btn--secondary` (glass background + border), `.btn--danger` (visually distinct red treatment, defined in the stylesheet).
* **Hover:** brightness/shadow shift with intensified glow, `cursor: pointer`.
* **Focus:** distinct focus ring via `outline`/`box-shadow` using CSS variables, clearly visible on the dark background.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading:** disables interactions, prevents double-clicks, renders a CSS spinner or animated Google Icon without distorting button dimensions.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** temporary feedback styles driven by `--text-success` / `--text-error`.

**3.2 Card Component (Glass)**
* **Default:** flexible Flexbox layout, `--glass-bg`, `--glass-border`, `--radius-lg`, subtle elevation.
* **Hover:** `transform: translateY(-2px)` plus shadow/glow shift.
* **Focus-within:** card border highlights when a child link/button receives focus.
* **Loading (Skeleton):** shimmer animation class defined in CSS to prevent layout jumps.
* **Empty State:** structured fallback layout with a Google Icon and clear guidance text (define the classes).

**3.3 Form & Input Requirements** (newsletter form in footer; email capture inside the modal)
* **States:** Empty, Focused (outline ring), Filled, Valid (success border + icon), Invalid (error border, error text, error icon), Disabled, Read-only.
* **Structure:** flex container wrapping a label, input field, and a dedicated error feedback container with `aria-live="polite"`.
* Validation feedback must never rely on color alone — always pair icon + text.

**3.4 FAQ Accordion**
* Semantic trigger buttons with `aria-expanded` + `aria-controls`, fully keyboard operable (Enter/Space), chevron Material Symbol rotating on toggle, smooth CSS height transition, independent toggle per item.

**3.5 Modal / Popup** (opened by Final CTA and pricing "Get started" buttons)
* **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions.
* **UX Features:** centered flex container (`align-items: center`), blurred backdrop overlay, Material Symbol close button, keyboard focus trapping, close via `Esc` and overlay click, `role="dialog"` + `aria-modal="true"`, focus returned to the trigger on close. Success state shows a check icon with `--text-success`; error state uses `--text-error`.

**3.6 Toast** (form/newsletter feedback): stacked at `--z-toast`, inside an `aria-live` region, auto-dismissing, glass styling, success/error variants.

---

## 4. PAGE STRUCTURE & REQUIRED SECTIONS

**Global Chrome:** Fixed glass navbar (gradient logo mark + wordmark, anchor links, CTA button) collapsing to a keyboard-accessible mobile menu (`aria-expanded`, Material Symbol hamburger); smooth anchor scrolling via CSS `scroll-behavior: smooth` (respecting reduced motion); skip-to-content link; fixed decorative background layer (orbs, mesh, noise) behind all content.

* **4.1 Hero:** badge pill, H1 with gradient-text keyword + neon text glow, subheadline, two CTAs (primary "Start free trial" → opens modal; glass secondary "See how it works" → smooth scroll), social-proof row, and a glassmorphism product mockup panel built purely with CSS shapes (bars, mini-cards) — no external image assets anywhere on the page.
* **4.2 Features:** exactly 3 glass cards — Material Symbol icon in a gradient-tinted rounded container, H3 title, description; hover lift per 3.2; flex row → column on mobile.
* **4.3 How It Works:** exactly 3 steps with gradient numerals (01/02/03), icon, title, text, connected by a curved gradient line on desktop (visual rhyme); vertical stack on mobile.
* **4.4 Testimonials:** 3 glass cards with quote, 5-star rating via Material Symbols, avatar as a gradient circle with initials (CSS only), name, and role.
* **4.5 Pricing:** exactly 3 tiers (Starter, Pro, Enterprise) with check-icon feature lists and per-tier CTAs; middle tier featured ("Most popular" badge, gradient border, glow, slight elevation); monthly/yearly billing toggle with `aria-pressed`, animated price updates announced via `aria-live`.
* **4.6 FAQ:** 5–6 realistic English Q&As using the 3.4 accordion.
* **4.7 Final CTA:** full-width glass panel with gradient border and glow, headline, subcopy, primary CTA opening the modal.
* **4.8 Footer:** logo + tagline, secondary link columns (Product, Company, Resources, Legal), newsletter form per 3.3 with toast feedback, social icons (Material Symbols), and a copyright bar. Secondary links may use `href="#"` for non-existent pages but must show full hover/focus states.

---

## 5. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** fluid sizing and breakpoints with zero horizontal overflow from 320px up.
* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes, respecting `prefers-reduced-motion`.
* **Accessibility (a11y):** WCAG-sufficient contrast against `#0B0F1A` in every component; never rely solely on color to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, strict `h1`–`h3` hierarchy); correct ARIA roles/labels on all custom widgets (accordion, modal, mobile menu, billing toggle); logical DOM/focus order; full keyboard operability; `aria-live` regions for all dynamic feedback (form errors, toasts, pricing changes, loading states).
* **Mandatory Visual Feedback:** every click, hover, and submission must trigger a visible state change.
* **Destructive Actions:** `.btn-danger` must be visually distinct on the dark theme (defined even if unused in this page).

---

## 6. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** Separate, complete `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond one deferred `<script src="script.js" defer></script>` entry point; no inline CSS; no inline SVG markup (noise data-URI lives in CSS only).
* **Naming Convention:** One consistent convention — **BEM** (`.card`, `.card__title`, `.card--featured`) for all custom components, with Tailwind utilities reserved for layout only. Never mix conventions.
* **No Unrequested Placeholders:** No lorem ipsum or Latin filler — write real, cohesive English copy for the fictional product; `placeholder` attributes are allowed only as genuine input affordances.
* **Output:** Deliver the complete final code for all three files in a single response, fully functional when opened directly in a browser, on the first attempt.