# Saas Landing Theme

> 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.

- Skill: `theepan/saas-landing-theme` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add theepan/saas-landing-theme`
- Raw SKILL.md: https://api.skillmd.com/api/skills/theepan/saas-landing-theme/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: theepan (https://skillmd.com/u/theepan)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/theepan/saas-landing-theme

---


# 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:

| 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:

- [ ] 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)