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:
1---2name: saas-landing-theme3description: Generate modern, light-themed SaaS landing pages with a warm editorial aesthetic, conversion-focused layout, and polished UI. Use this skill whenever the user asks to create a SaaS website, landing page, marketing site, startup homepage, product page, or any professional web page for a software product or service. Also trigger when the user mentions "landing page", "marketing site", "SaaS site", "startup website", "product homepage", "pricing page", "saas theme", or wants a professional light-themed web design with hero sections, feature grids, pricing tables, testimonials, or CTA sections. This skill produces production-ready HTML or React (JSX) with the full design system baked in.4---56# SaaS Landing Theme78Generate 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.910## When to Use This Skill1112- User wants a SaaS landing page, marketing site, or product homepage13- User asks for a startup website, pricing page, or feature showcase14- User wants a professional light-themed web page with modern aesthetics15- User is building a SaaS product and needs a marketing presence16- User references "the SaaS theme" or "landing page skill" from prior conversations1718## Design Philosophy1920This 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.2122### Anti-Patterns to Avoid23- Purple gradients on white (the #1 "AI slop" pattern)24- Inter, Roboto, Arial, or system fonts as primary typeface25- Generic hero illustrations with abstract blobs26- Cookie-cutter layouts with no spatial tension27- Flat, lifeless color palettes with no accent pop2829## Design System3031Before writing any code, read the full design system reference:32→ `references/design-system.md` — Contains all CSS variables, typography, color palette, spacing scale, component patterns, and animation specifications.3334Before writing template code, read the full template reference:35→ `references/template-structure.md` — Contains the canonical section ordering, HTML structure for each section, and component markup patterns.3637## Output Modes3839### Mode 1: Full Landing Page (default)40When 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:41421. **Nav** — Sticky, glass-morphism on scroll432. **Hero** — Headline, subhead, CTAs, social proof, product screenshot443. **Logo Marquee** — Scrolling client/partner logos454. **Features** — 6-card grid with icon, title, description465. **Bento Grid** — Mixed-size cards showing metrics, workflows, stats476. **Pricing** — 3-tier cards (Starter / Professional / Enterprise)487. **Testimonials** — 3-card grid with quotes and author info498. **CTA** — Dark background, strong closing headline509. **Footer** — 4-column layout with links5152### Mode 2: Section-Only53When 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.5455### Mode 3: React/JSX56When the user specifies React, Next.js, or JSX, output a single `.jsx` file using:57- Tailwind utility classes (no custom CSS files)58- React hooks for interactivity (scroll detection, intersection observer)59- Lucide React for icons60- The same design tokens translated to Tailwind config6162## Workflow63641. **Read references** — Always read `references/design-system.md` and `references/template-structure.md` before generating code652. **Gather context** — Ask the user (if not already clear):66 - Product name and tagline67 - Target audience (CPA firms, startups, developers, etc.)68 - Key features to highlight (3-6)69 - Pricing tiers (if applicable)70 - Any brand colors to incorporate713. **Generate** — Write the full HTML/JSX file following the design system724. **Customize** — Apply user's brand name, copy, features, and colors735. **Deliver** — Save to `/mnt/user-data/outputs/` and present to the user7475## Customization Points7677When the user provides brand-specific information, map it to the design system:7879| User Provides | Maps To |80|---------------------|----------------------------------------------|81| Brand color | `--accent` and `--accent-soft` CSS variables |82| Product name | `.logo` text and page `<title>` |83| Tagline | Hero `<h1>` and `<p>` content |84| Features list | `.feature-card` content in features grid |85| Pricing tiers | `.pricing-card` content and prices |86| Testimonials | `.testimonial-card` quotes and author info |87| Screenshot/mockup | `.hero-screenshot` content area |8889If the user provides a brand color, derive the full accent palette:90- `--accent`: The provided color91- `--accent-soft`: The color at 8% opacity on white92- `--accent-hover`: The color darkened ~10%9394## Quality Checklist9596Before delivering, verify the output meets these standards:9798- [ ] Uses Instrument Serif + General Sans (not Inter/Roboto/Arial)99- [ ] Warm off-white background (`#FAFAF7`), not pure white100- [ ] Accent color has sufficient contrast and a soft variant101- [ ] Noise texture overlay is present (`body::before`)102- [ ] Nav has glass-morphism effect on scroll103- [ ] Hero has perspective tilt on product screenshot104- [ ] Scroll-triggered fade-up animations on cards105- [ ] All interactive elements have hover states with transitions106- [ ] Responsive breakpoints at 1024px and 640px107- [ ] No generic placeholder text — use realistic, contextual copy108- [ ] Floating stat cards animate with `float` keyframe109- [ ] CTA section uses dark background with radial gradient glow110- [ ] Footer includes location flag (contextual to user's region)
theepan