# Saas Product Graphics
> Create polished SaaS product UI showcase graphics in SVG. Floating panels, soft shadows, modern gradients, clean typography. Use for landing pages, feature showcases, product marketing, app store screenshots, and hero sections. Output professional, modern visuals that look like Figma/Sketch exports.
- Skill: `wpgaurav/saas-product-graphics` (Agent Skill)
- Install (CLI): `npx skillmds@latest add wpgaurav/saas-product-graphics`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wpgaurav/saas-product-graphics/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: wpgaurav (https://skillmd.com/u/wpgaurav)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wpgaurav/saas-product-graphics
---
# SaaS Product Graphics
Create SVG graphics that showcase product UI with floating panels, soft shadows, and modern SaaS aesthetics. Think Notion, Linear, Figma marketing pages.
**Key principle**: Clean, professional, intentionally designed. Every shadow, gradient, and spacing choice is deliberate.
## When to Use
- Product landing page heroes
- Feature showcase sections
- App store screenshots
- Product Hunt graphics
- Blog featured images (product-focused)
- Social media product announcements
- Investor deck visuals
- Documentation hero images
- Changelog graphics
- Onboarding illustrations
Best for showing **product UI, features, or workflows** in marketing context.
## Quick Reference
| Pattern | Use Case | Key Elements |
|---------|----------|--------------|
| Floating Panels | Feature showcase | Multiple overlapping UI panels at angles |
| App Screenshot | Hero section | Single prominent UI with subtle background |
| Feature Grid | Multiple features | Grid of UI snippets with labels |
| Workflow | Process visualization | Connected UI states with arrows |
| Before/After | Transformation | Side-by-side UI comparison |
| Dashboard | Data/analytics | Charts, metrics, data visualization |
---
## Core Visual Rules
### Canvas
- Light gradient background (subtle warm or cool tones)
- Optional: faint dot grid or line grid pattern
- Optional: abstract geometric shapes (circles, blobs) in background
- Clean, spacious composition
- Typical sizes: 1200x630 (OG), 1920x1080 (hero), 800x600 (feature)
### Color Palette
**Default: Site Theme.** Use these unless the user specifies otherwise:
| Element | Colors | Notes |
|---------|--------|-------|
| Background | `#FFFFFC` to `#f0f4f8` | Off-white to light neutral gradient |
| Background accent | `#e8f4fd`, `#fef3e8` | Subtle colored regions |
| Panel background | `#ffffff` | Pure white for UI panels |
| Panel border | `#DDDDDD`, `#d1d5db` | Subtle borders |
| Primary accent | `#C0392B` | Brand red — CTAs, emphasis |
| Secondary accent | `#2563EB` | Blue — links, interactive elements |
| Tertiary accent | `#16A085` | Teal — success, positive |
| Text dark | `#212121`, `#2D3748` | Headings, primary text |
| Text muted | `#6b7280`, `#9ca3af` | Secondary text, labels |
| Shadow | `rgba(0,0,0,0.08)` to `rgba(0,0,0,0.15)` | Soft, diffuse shadows |
| Selection | `#2563EB` with `0.1` opacity fill | Blue dashed border |
### Shadow System
```css
/* Floating panel shadow - soft and diffuse */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
/* Elevated panel shadow - more prominent */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -4px rgba(0, 0, 0, 0.1);
/* Card hover shadow */
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 8px 10px -6px rgba(0, 0, 0, 0.1);
```
### Typography
- **Font**: InterVariable/Inter — matches site theme
- Primary: `'InterVariable', 'Inter', sans-serif`
- Monospace: `'SF Mono', 'Fira Code', monospace`
- **Weights**: 400 (regular), 500 (medium), 600 (semibold). InterVariable supports variable weights.
- **Sizes**:
- Panel title: 14-16px
- Body text: 12-14px
- Labels: 10-12px
- Small: 9-10px
### Border Radius
| Element | Radius |
|---------|--------|
| Large panels | 12-16px |
| Cards | 8-12px |
| Buttons | 6-8px |
| Inputs | 4-6px |
| Tags/badges | 4px or full (pill) |
---
## SVG Structure Template
```svg
```
---
## Component Library
### Panel / Card
```svg
Panel Title
```
### Buttons
```svg
Button
Button
Button
Button
```
### Input Fields
```svg
Placeholder text...
User input
Search...
```
### List Items
```svg
List Item Title
Description text
A
Text
Selected Item
```
### Dropdown Menu
```svg
Option 1
Option 2
Option 3
Option 4
```
### Tags / Badges
```svg
Badge
Label
Active
```
### Icons (Simplified)
```svg
```
### Charts (Simplified)
```svg
60%
```
### Selection Indicator
```svg
```
---
## Layout Patterns
### Floating Panels (Hero Style)
```
+---------------------------+
| Main Product UI Panel |
| |
+---------------------------+
/ \
+-------+ +-------+
| Menu | | Side |
| Panel | | Panel |
+-------+ +-------+
```
- Main panel is largest, centered, elevated shadow
- Secondary panels overlap edges, smaller shadows
- Panels at slight angles (1-3 degrees rotation)
- Space for breathing room between elements
### App Screenshot (Clean)
```
+------------------------------------------+
| Browser chrome / app frame |
+------------------------------------------+
| |
| Product UI Content |
| |
| |
+------------------------------------------+
```
- Optional browser chrome (URL bar, buttons)
- Full-width panel with elevated shadow
- Content fills the frame
- Subtle background gradient behind
### Feature Grid
```
+--------+ +--------+ +--------+
| Feat 1 | | Feat 2 | | Feat 3 |
+--------+ +--------+ +--------+
+--------+ +--------+ +--------+
| Feat 4 | | Feat 5 | | Feat 6 |
+--------+ +--------+ +--------+
```
- Equal-sized panels in grid
- Consistent spacing (24-32px gaps)
- Each panel shows a UI snippet
- Optional labels below each panel
### Workflow Visualization
```
+--------+ +--------+ +--------+
| Step 1 | -----> | Step 2 | -----> | Step 3 |
+--------+ +--------+ +--------+
```
- Panels connected with arrows or lines
- Gradient or colored connector lines
- Sequential left-to-right or top-to-bottom
- Progress indicators optional
---
## Complete Example: Form Builder Showcase
```svg
```
---
## Quality Checklist
Before finalizing:
- [ ] Background has subtle gradient (not flat white)
- [ ] All panels have appropriate shadow filters
- [ ] Typography uses consistent font family and weights
- [ ] Border radius is consistent across similar elements
- [ ] Colors follow the defined palette
- [ ] Sufficient whitespace and breathing room
- [ ] Visual hierarchy is clear (size, shadow, position)
- [ ] Interactive elements look clickable
- [ ] Selection indicators use brand blue with dashed borders
- [ ] Overall composition is balanced
**Automatic rejection if:**
- Panels have no shadows (looks flat)
- Inconsistent border radius
- Text is not readable (too small, wrong color)
- Cramped layout with no whitespace
- Clashing colors outside the palette
- Looks like a wireframe instead of polished UI
---
## Mobile-Friendly SVG Rules
All SVGs must render well on mobile (375px width and up):
1. **Always use `viewBox`** — never fixed `width`/`height`. Let SVGs scale responsively.
2. **Minimum text size**: 12px equivalent at viewBox scale. Smaller text becomes unreadable on mobile.
3. **Test at 375px wide**: Verify panel labels and key text remain legible at mobile width.
4. **Prefer horizontal layouts** for OG/hero images. Tall compositions shrink too much on mobile.
5. **Responsive embed**: Use `width="100%" height="auto"` or CSS `max-width: 100%` in HTML.
6. **Simplify for small screens**: Reduce number of floating panels if the composition gets crowded at mobile widths.
## Execution Steps
1. **Define the message** - What product feature/workflow to showcase?
2. **Choose layout pattern** - Floating panels, screenshot, grid, workflow?
3. **Set canvas size** - 1200x630 for OG, 1920x1080 for hero, etc.
4. **Create background** - Gradient + optional dot grid + accent blobs
5. **Build primary panel** - Main UI content with elevated shadow
6. **Add secondary panels** - Supporting UI elements, smaller shadows
7. **Create UI components** - Buttons, inputs, lists using component library
8. **Add selection indicators** - Dashed boxes, cursors if showing interaction
9. **Apply typography** - Headers, labels, body text
10. **Add floating badges** - Category labels, feature tags if needed
11. **Final composition** - Ensure balance, whitespace, visual flow
12. **Export** - SVG for web, PNG for social media