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:

1. Nav — Sticky, glass-morphism on scroll
2. Hero — Headline, subhead, CTAs, social proof, product screenshot
3. Logo Marquee — Scrolling client/partner logos
4. Features — 6-card grid with icon, title, description
5. Bento Grid — Mixed-size cards showing metrics, workflows, stats
6. Pricing — 3-tier cards (Starter / Professional / Enterprise)
7. Testimonials — 3-card grid with quotes and author info
8. CTA — Dark background, strong closing headline
9. 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

1. Read references — Always read references/design-system.md and references/template-structure.md before generating code
2. 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
3. Generate — Write the full HTML/JSX file following the design system
4. Customize — Apply user's brand name, copy, features, and colors
5. 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:

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:

• Uses Instrument Serif + General Sans (not Inter/Roboto/Arial)
• Warm off-white background (#FAFAF7), not pure white
• Accent color has sufficient contrast and a soft variant
• Noise texture overlay is present (body::before)
• Nav has glass-morphism effect on scroll
• Hero has perspective tilt on product screenshot
• Scroll-triggered fade-up animations on cards
• All interactive elements have hover states with transitions
• Responsive breakpoints at 1024px and 640px
• No generic placeholder text — use realistic, contextual copy
• Floating stat cards animate with float keyframe
• CTA section uses dark background with radial gradient glow
• Footer includes location flag (contextual to user's region)