saas-product-graphics

name	saas-product-graphics
description	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.

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

/* 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, , );

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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630">
  <defs>
    <!-- Gradients -->
    <linearGradient id="bg-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#fafbfc"/>
      <stop offset="100%" stop-color="#f0f4f8"/>
    </linearGradient>

    <linearGradient id="accent-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#8b5cf6"/>
    </linearGradient>

    
    
      
      
    

    
    
      
      
    

    
    
      
    

    
    
      
    
  

  
  

  
  

  
  
    
    
  

  
  
    
    
      
      
    

    
    
      
      
    

    
    
      
      
    
  

  
  

---

Component Library

Panel / Card

<!-- Basic panel with shadow -->
<g filter="url(#panel-shadow)">
  <rect x="100" y="100" width="300" height="200" rx="12" fill="#fff"/>
  <!-- Optional border -->
  <rect x="100" y="100" width="300" height="200" rx="12" fill="none" stroke="#e5e7eb" stroke-width="1"/>
</g>

<!-- Panel with header -->
<g filter="url(#panel-shadow)">
  <rect x="100" y="100" width="300" height="200" rx="12" fill="#fff"/>
  <!-- Header bar -->
  <rect = = = = = =/>
  
  
  Panel Title
  
  
  
  

Buttons

<!-- Primary button -->
<g>
  <rect x="100" y="100" width="120" height="36" rx="6" fill="#3b82f6"/>
  <text x="160" y="123" font-family="InterVariable, Inter, sans-serif" font-size="13" font-weight="500" fill="#fff" text-anchor="middle">Button</text>
</g>

<!-- Secondary button -->
<g>
  <rect x="100" y="100" width="120" height="36" rx="6" fill="#fff" stroke="#d1d5db" stroke-width="1"/>
  <text x="160" = = = = = =>Button




  
  Button




  
  Button

Input Fields

<!-- Text input -->
<g>
  <rect x="100" y="100" width="200" height="36" rx="6" fill="#fff" stroke="#d1d5db" stroke-width="1"/>
  <text x="112" y="123" font-family="InterVariable, Inter, sans-serif" font-size="13" fill="#9ca3af">Placeholder text...</text>
</g>

<!-- Focused input -->
<g>
  <rect x="100" y="100" width="200" height="36" rx="6" fill="#fff" stroke="#3b82f6" stroke-width="2"/>
  <text x="112" = = = =>User input




  
  
  
  
  Search...

List Items

<!-- Simple list item -->
<g>
  <rect x="100" y="100" width="250" height="44" rx="6" fill="#fff"/>
  <circle cx="124" cy="122" r="12" fill="#e5e7eb"/>
  <text x="148" y="118" font-family="InterVariable, Inter, sans-serif" font-size="13" font-weight="500" fill="#1e293b">List Item Title</text>
  <text x="148" y="134" font-family="InterVariable, Inter, sans-serif" font-size="11" fill="#6b7280">Description text</text>
</g>

<!-- List item with icon -->
<>
  
  
  
  A
  Text




  
  
  Selected Item

Dropdown Menu

<g filter="url(#panel-shadow)">
  <rect x="100" y="100" width="180" height="160" rx="8" fill="#fff"/>

  <!-- Menu items -->
  <g>
    <rect x="108" y="108" width="164" height="32" rx="4" fill="#f3f4f6"/>
    <text x="120" y="129" font-family="InterVariable, Inter, sans-serif" font-size="13" fill="#1e293b">Option 1</text>
  </g>
  <g>
    <text x="120" y="161" font-family="InterVariable, Inter, sans-serif" font-size= =>Option 2
  
  
    Option 3
  
  
    Option 4
  

Tags / Badges

<!-- Solid badge -->
<g>
  <rect x="100" y="100" width="60" height="22" rx="4" fill="#dbeafe"/>
  <text x="130" y="115" font-family="InterVariable, Inter, sans-serif" font-size="11" font-weight="500" fill="#1d4ed8" text-anchor="middle">Badge</text>
</g>

<!-- Pill badge -->
<g>
  <rect x="100" y="100" width="60" height="22" rx="11" fill="#f3f4f6"/>
  <text x="130" y="115" font-family="InterVariable, Inter, sans-serif" = = = =>Label




  
  
  Active

Icons (Simplified)

<!-- Menu icon (hamburger) -->
<g stroke="#6b7280" stroke-width="2" stroke-linecap="round">
  <line x1="100" y1="108" x2="120" y2="108"/>
  <line x1="100" y1="115" x2="120" y2="115"/>
  <line x1="100" y1="122" x2="120" y2="122"/>
</g>

<!-- Checkbox (unchecked) -->
<rect x="100" y="100" width="18" height="18" rx="4" fill="#fff" stroke="#d1d5db" stroke-width="1.5"/>

<!-- Checkbox (checked) -->
<g>
  
  







  
  




  
  




  
  




  
  




  
  

Charts (Simplified)

<!-- Bar chart -->
<g>
  <rect x="110" y="160" width="30" height="60" rx="4" fill="#3b82f6"/>
  <rect x="150" y="140" width="30" height="80" rx="4" fill="#3b82f6"/>
  <rect x="190" y="100" width="30" height="120" rx="4" fill="#3b82f6"/>
  <rect x="230" y="130" width="30" height="90" rx="4" fill="#3b82f6"/>
</g>

<!-- Line chart -->
<g>
  
  
  
  
  
  
  
  
  




  
  
  60%

Selection Indicator

<!-- Dashed selection box -->
<rect x="100" y="100" width="200" height="100" rx="8"
      fill="rgba(59, 130, 246, 0.05)"
      stroke="#3b82f6" stroke-width="2" stroke-dasharray="8 4"/>

<!-- With resize handles -->
<g>
  <rect x="100" y="100" width="200" height="100" rx="8"
        fill="rgba(59, 130, 246, 0.05)"
        stroke="#3b82f6" stroke-width="2" stroke-dasharray="8 4"/>
  <!-- Corner handles -->
  <circle cx="100" cy="100" r="4" fill="#fff" stroke="#3b82f6" stroke-width="2"/>
  < = = = = = =/>
  
  




  

---

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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 700">
  <defs>
    <!-- Background gradient -->
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#fafbfc"/>
      <stop offset="100%" stop-color="#f0f4f8"/>
    </linearGradient>

    <!-- Blue accent gradient -->
    <linearGradient id="blue-accent" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#3b82f6"/>
      <stop offset="100%" stop-color="#60a5fa"/>
    </>

    
    
      
      
    

    
    
      
      
    

    
    
      
    
  

  
  
  

  
  
  

  
  
    

    
    Create new form

    
    
      
      
        
        
        +
        Blank Form
        Create a new view from scratch
      

      
      
        
        
        Survey and Polls
        11 templates | 6 available
        
      

      
      
        
        
        Users info
        11 templates | 4 available
        
      

      
      
        
        
        Listings
        11 templates
        
      

      
      
        
        
        Calculators
        11 templates
        
      
    
  

  
  
    

    
    
      
        A
        Text
      
      
        
        Checkbox
      
      
        
        
        Dropdown
      
      
        @
        Email
      
      
        
        
        Time
      
      
        
        
        Toggle
      
    
  

  
  
    

    
      A
      Paragraph

      
        
        
        Radio Buttons
      
    
  

  
  
    

    
    
      
      
      

      
      
    

    
    
      

      
      
      

      
      
        
      
    

    
    
      
      
        
        
      
      
        
        
      
      
        
        
        
      
      
        
        
      
    
  

  
  
    
    
    🏠
    Real estate
    11 templates
  

  
  
    
    
    Payments
    11 templates
  

---

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