SaaS Landing Theme

Generate production-grade, light-themed SaaS landing pages with a warm editorial aesthetic that avoids generic AI design patterns. Every page should feel intentionally designed, conversion-focused, and memorable.

When to Use This Skill

User wants a SaaS landing page, marketing site, or product homepage
User asks for a startup website, pricing page, or feature showcase
User wants a professional light-themed web page with modern aesthetics
User is building a SaaS product and needs a marketing presence
User references "the SaaS theme" or "landing page skill" from prior conversations

Design Philosophy

This theme follows a warm editorial direction: clean but not sterile, professional but not corporate, modern but not trendy. The goal is a page that looks like it was designed by a top-tier agency, not generated by AI.

Anti-Patterns to Avoid

Purple gradients on white (the #1 "AI slop" pattern)
Inter, Roboto, Arial, or system fonts as primary typeface
Generic hero illustrations with abstract blobs
Cookie-cutter layouts with no spatial tension
Flat, lifeless color palettes with no accent pop

Design System

Before writing any code, read the full design system reference: → references/design-system.md — Contains all CSS variables, typography, color palette, spacing scale, component patterns, and animation specifications.

Before writing template code, read the full template reference: → references/template-structure.md — Contains the canonical section ordering, HTML structure for each section, and component markup patterns.

Output Modes

Mode 1: Full Landing Page (default)

When the user asks for a "landing page", "SaaS site", or "marketing page" without specifying sections, generate the full page with all sections in canonical order:

Nav — Sticky, glass-morphism on scroll
Hero — Headline, subhead, CTAs, social proof, product screenshot
Logo Marquee — Scrolling client/partner logos
Features — 6-card grid with icon, title, description
Bento Grid — Mixed-size cards showing metrics, workflows, stats
Pricing — 3-tier cards (Starter / Professional / Enterprise)
Testimonials — 3-card grid with quotes and author info
CTA — Dark background, strong closing headline
Footer — 4-column layout with links

Mode 2: Section-Only

When the user asks for specific sections (e.g., "just a pricing section" or "hero + features"), generate only those sections but still include the full design system CSS variables and base styles.

Mode 3: React/JSX

When the user specifies React, Next.js, or JSX, output a single .jsx file using:

Tailwind utility classes (no custom CSS files)
React hooks for interactivity (scroll detection, intersection observer)
Lucide React for icons
The same design tokens translated to Tailwind config

Workflow

Read references — Always read references/design-system.md and references/template-structure.md before generating code
Gather context — Ask the user (if not already clear):
- Product name and tagline
- Target audience (CPA firms, startups, developers, etc.)
- Key features to highlight (3-6)
- Pricing tiers (if applicable)
- Any brand colors to incorporate
Generate — Write the full HTML/JSX file following the design system
Customize — Apply user's brand name, copy, features, and colors
Deliver — Save to /mnt/user-data/outputs/ and present to the user

Customization Points

When the user provides brand-specific information, map it to the design system:

User Provides	Maps To
Brand color	`--accent` and `--accent-soft` CSS variables
Product name	`.logo` text and page `<title>`
Tagline	Hero `<h1>` and `<p>` content
Features list	`.feature-card` content in features grid
Pricing tiers	`.pricing-card` content and prices
Testimonials	`.testimonial-card` quotes and author info
Screenshot/mockup	`.hero-screenshot` content area

If the user provides a brand color, derive the full accent palette:

--accent: The provided color
--accent-soft: The color at 8% opacity on white
--accent-hover: The color darkened ~10%

Quality Checklist

Before delivering, verify the output meets these standards:

saas-landing-theme