Prompt Genie
Ultra‑Premium SaaS Landing Page in React and Tailwind
Create a world-class, ultra-premium SaaS website with a sophisticated design aesthetic inspired by Linear, Mercury, and Wealthsimple. The website should feel expertly crafted by a top-tier design agency. Design Philosophy Visual Identity:
Embrace minimalism with intentional whitespace and breathing room
Use a refined, limited color palette with a sophisticated primary brand color (deep purple, midnight blue, or emerald green)
Implement subtle gradients and glass morphism effects sparingly for depth
Create a sense of premium quality through restraint rather than excess
Typography:
Primary font: Modern sans-serif like Inter, Satoshi, or General Sans
Font sizes should follow a clear hierarchical scale (80px+ for hero headlines, scaling down logically)
Use generous line-height (1.6-1.8) for readability
Implement tight letter-spacing (-0.02em to -0.04em) for headlines to feel premium
Color Strategy:
Background: Pure white or very subtle off-white (gray-50)
Text: Deep charcoal or true black for maximum contrast and clarity
Accent: One sophisticated brand color used sparingly
Subtle grays for borders and secondary elements (gray-200, gray-300)
Page Structure Hero Section
Full-height viewport with centered content
Punchy, confident headline (6-8 words max) that states the core value proposition
Subheadline in muted gray expanding on the benefit
Single prominent CTA button with your brand color
Secondary ghost button for "View Demo" or similar
Subtle animated background gradient or floating geometric shapes
Optional: Product screenshot or abstract 3D illustration below the fold
Feature Sections Create 3-4 feature sections with alternating layouts: Section 1 - Image Left, Text Right:
Large feature image with subtle shadow or border radius
Concise headline describing the benefit
2-3 short paragraphs explaining the feature
Bullet points with checkmark icons for key capabilities
Section 2 - Text Left, Image Right:
Reverse the layout for visual rhythm
Use a different visual treatment (maybe a UI mockup, dashboard screenshot, or abstract illustration)
Section 3 - Centered Content:
Full-width section with centered text
Grid of 3-4 sub-features with icons
Each sub-feature has an icon, headline, and brief description
Social Proof Section
Clean grid of customer logos in muted grayscale
Testimonial cards with subtle borders, customer photo, quote, name, and company
Use a carousel or static grid of 3 testimonials
Include metrics if available (10,000+ users, $50M+ managed, etc.)
Pricing Section
3-tier pricing table with the middle tier highlighted
Each tier in a card with subtle hover effects
Clear feature comparison list
Prominent CTA buttons on each tier
Toggle for monthly/annual pricing with a savings badge
CTA Section
Bold, centered headline asking for the conversion
Brief value reinforcement
Large primary CTA button
Include trust signals (security badges, compliance logos)
Footer
Clean, organized link sections (Product, Company, Resources, Legal)
Social media icons in monochrome
Newsletter signup field
Copyright and legal links
Micro-Interactions & Animations
Subtle hover effects on buttons (slight scale or color shift)
Smooth scroll-triggered fade-ins for sections (use intersection observer)
Gentle parallax on hero background
Magnetic cursor effect on primary CTAs (button slightly moves toward cursor)
Loading states with skeleton screens
Smooth transitions between all states (0.2s-0.3s ease-in-out)
Component Details Buttons:
Primary: Solid brand color with white text, subtle shadow, 12-16px padding
Secondary: Ghost button with brand color border and text
Hover states: Slight darkening or glow effect
Border radius: 8-12px for modern feel
Cards:
Background: White with subtle border (1px solid gray-200)
Border radius: 16-24px
Padding: 32-48px
Hover: Subtle lift with shadow (0 10px 30px rgba(0,0,0,0.08))
Inputs:
Clean, minimal styling with focus states
Border: 1px solid gray-300, focus: brand color
Height: 48-52px for comfortable interaction
Border radius: 8px
Icons:
Use a consistent icon library (Lucide React)
Size: 24px for feature icons, 20px for UI elements
Color: Match text color or use brand accent
Technical Requirements
Fully responsive across mobile, tablet, and desktop
Mobile-first approach with breakpoints at 768px and 1024px
Accessibility: proper heading hierarchy, alt text, ARIA labels
Performance: lazy load images, optimize assets
Smooth scrolling behavior
Fast page load with optimized assets
Specific Design Treatments Linear-Inspired Elements:
Sharp, geometric shapes
Subtle grid patterns in backgrounds
Precise alignment and spacing
Monochromatic with accent purple
Mercury-Inspired Elements:
Clean, finance-forward aesthetic
Trust-building visual hierarchy
Sophisticated data visualizations
Premium feel through negative space
Wealthsimple-Inspired Elements:
Friendly yet professional tone
Colorful but restrained illustrations
Clear, benefit-focused copy
Approachable design that doesn't sacrifice elegance
Copy Tone
Confident and clear, never salesy
Focus on customer benefits, not features
Short sentences and paragraphs
Active voice throughout
Include specific metrics where possible
Build this as a single-page React component using Tailwind CSS for styling. The final result should feel polished, professional, and indistinguishable from a website built by a top design agency.
Prompt Genie
Ultra‑Premium SaaS Landing Page Blueprint in React and Tailwind
Project Overview & Core Aesthetic Project Name: [Your SaaS Name, e.g., 'Nexus Analytics'] Product Focus: [A single, concise description, e.g., 'A modern, collaborative platform for financial portfolio management.'] Goal: Build a single-page marketing website (landing page) that feels ultra-premium, highly trustworthy, and minimalist. It must convey sophistication and build immediate trust with a professional audience.
Aesthetic & Style Reference:
Primary Inspiration: Linear, Mercury, and Wealthsimple.
Linear: Focus on meticulous detail, subtle micro-interactions, perfect alignment, and a dark/light mode option.
Mercury: Clean, financial-grade trustworthiness, liberal use of negative space, and a refined, exclusive feel.
Wealthsimple: Approachable yet sophisticated, utilizing a crisp typography hierarchy and subtle, intentional color accents.
Tone: Professional, Confident, Minimalist, Meticulous.
Key Design Principles:
High Contrast & Readability: Strict adherence to accessibility standards.
Generous Negative Space: Use whitespace as a design element to let content breathe and emphasize key elements.
Subtle Fidelity: All interactions (hovers, clicks, transitions) must be buttery-smooth, fast, and subtle, never distracting.
Information Hierarchy: Use typography (size, weight, case) and color contrast as the primary tools for organizing information.
Technical & Structural Requirements Tech Stack (Implicit/Preferred): Use modern, high-performance web standards. Assume React + Tailwind CSS (Lovable's default) for maximum performance and design flexibility. Color Palette:
Primary Background: Pure White (#FFFFFF) for Light Mode, Near-Black (#111111 or similar dark charcoal) for Dark Mode.
Accent Color: A single, reserved, professional color (e.g., a deep indigo, a muted emerald, or a refined gold).
Neutral Palette: A sophisticated gradient of 5-7 grayscale values for backgrounds, borders, and subtle shadows/depth effects. Typography:
Font Choice: A clean, modern sans-serif with excellent weight variety (e.g., Inter, Geist Sans, or a similar high-quality system font).
Usage: Use only 2-3 weights (e.g., Light/Regular for body, Semibold/Bold for headings). Ensure large, impactful headings. Responsiveness: Perfect responsiveness across Desktop, Tablet, and Mobile. Mobile view must prioritize speed and vertical flow without sacrificing the premium feel.
Required Sections & Content Structure The website must be a single-page experience and include the following sections in order:
A. Header & Navigation Left: Simple Logo (Text-based, non-flair, using the primary font in bold).
Center: Minimalist Navigation Links (e.g., Features, Pricing, Testimonials). Text should be small, high-contrast, and perfectly spaced.
Right:
Theme Toggle: A small, elegant button (sun/moon icon) to switch between Light and Dark mode.
Primary CTA: A refined button: "Start Free Trial" (using the Accent Color as a subtle fill or outline).
B. Hero Section (The Statement) Headline: Huge, centered, multi-line, and highly impactful. Must clearly state the value proposition. (Example: "The Future of Financial Operations is Here. Finally.")
Subhead: A single, concise sentence below the headline, explaining how it works. (Example: "Unify portfolio data, automate compliance, and onboard clients in a fraction of the time.")
CTAs:
Primary: "Start Free Trial" (Prominent button, accented).
Secondary: "Book a Demo" (Subtle text link or outlined button).
Visual Element: A realistic, high-fidelity mockup of the SaaS dashboard. This should be a static image with subtle, Linear-style shadows/borders to suggest depth and quality, placed centrally below the text. Do not use cartoon graphics or 3D illustrations.
Social Proof: A horizontal strip of 3-5 minimalist grayscale logos of "trusted by" companies (logos should fade/be low opacity).
C. Feature Breakdown (Meticulous Detail) Layout: A three-column grid. Each column should feature:
Small Icon: Simple, monochromatic (Accent Color) SVG icon.
Feature Title: Bold, concise.
Description: 1-2 sentences of elegant, light-weight body text.
Focus: The entire section should have a clean, border-defined (or subtly shadowed) card layout to separate features, emphasizing structure.
D. "Deep Dive" Feature Showcase Layout: A unique, asymmetrical layout (like Linear's grid of boxes or Mercury's layered card style).
Content: A single, powerful feature explained in depth.
Left Column: A compelling feature video/GIF or an interactive code block (if applicable) showcasing the UI.
Right Column:
Headline: "Built for the Modern [Target User]."
Key Benefits: A bulleted list of 3-4 benefits using small checkmarks or dashes, focusing on efficiency and quality.
E. Testimonials / Social Proof Layout: A horizontal, continuously scrolling carousel of 3-5 testimonials or a simple grid of card quotes.
Content: Each card must include: Quote (in italics), Name, Title, and a small, circular avatar image. The cards should have a thin, subtle border, distinguishing them from the background without feeling heavy.
F. Pricing (Clarity & Trust) Layout: A simple, side-by-side comparison of 3 plans (Basic, Pro, Enterprise).
Design: Use a high-contrast background (light gray or inverted dark mode color) to separate this section. The "Pro" plan should be slightly emphasized with the Accent Color border or a subtle tag.
Details: Clear pricing, feature bullet points, and a prominent CTA button for each plan.
G. Footer Structure: Minimalist two-column layout.
Left: Logo and a short copyright notice.
Right: Quick links (e.g., Company, Legal, Contact) in small, non-bold text.
Interaction & Micro-Interaction Directives This is critical for the "ultra-premium" feel. Implement the following:
Smooth Scrolling: Use smooth scrolling between anchor links in the navigation.
Button Hover: Primary CTAs should have a very quick, subtle lift/shadow on hover (100ms transition) or a color shift that is elegant, not jarring.
Card/Feature Hover: Cards in Section C and E should have a minimal, almost imperceptible background color change on hover to indicate interactivity.
Dark/Light Mode: Ensure a seamless transition between modes. All colors must be perfectly inverted to maintain contrast and readability.
Prompt Genie
Ultra-Premium SaaS Marketing Site Design and Build
You are a world-class Senior Product Designer + Creative Director building a modern SaaS marketing site with the same level of craft and polish as Linear, Mercury, and Wealthsimple.
OBJECTIVE: Design and build an ultra-premium SaaS website that feels:
Clean
Confident
Luxury-minimal
Highly legible
Conversion-optimized
Crisp and fast
The site must LOOK like it was designed by an elite design studio — not auto-generated.
Every detail should express:
precision
restraint
clarity
modern typography
controlled use of gradients & motion
flawless spacing
REFERENCE BRANDS:
linear.app (layout clarity + typography polish)
mercury.com (soft gradients + layered depth + premium feel)
wealthsimple.com (bold type hierarchy + confident simplicity)
DESIGN PRINCIPLES:
• Strong grid + visual rhythm
• Clear vertical spacing between sections
• No clutter — every element must breathe
• Bold type headlines with restrained letter spacing
• Subtle transitions and hover effects (no flashy motion)
• Use layered surfaces and soft shadows to create depth
• Maintain premium white space at all times
COLOR SYSTEM:
Primary:
Charcoal Black / Near-black background (#0C0F14)
Clean White text (#FFFFFF)
Soft off-white surfaces (#F7F8FA)
Accent:
Electric blue / indigo gradient highlights
Soft purple edge glow
Subtle cyan for micro-accents
Gradients must be:
restrained
low-opacity
used for borders, glows, and hero elements only
TYPOGRAPHY:
Font: Inter or Neue Haas Grotesk style
Headline Style:
Tight leading
Slight negative letter-spacing (-2 to -4)
Bold or extra-bold weight
Body Copy:
Medium / Regular weight
Large comfortable reading size
High contrast on dark backgrounds
UI Text:
Crisp
Small uppercase labels
Minimal tracking
UI SURFACES:
• Cards should look frosted or softly elevated
• Corners rounded (12px - 16px radius)
• Borders should be subtle and hairline thin
• Shadow use minimal and precise
SECTION LAYOUT:
Build the following pages:
HERO SECTION
Above-the-fold must include:
Ultra-strong value headline (benefit driven)
Short subheading that clearly explains what the product does
Primary CTA: "Get Started"
Secondary CTA: "View Demo"
Product UI mockup graphic or placeholder device frame
Subtle animated gradient glow behind hero visuals
TRUST SIGNALS
Grid of:
Logos
Media mentions
Testimonials
Style:
Quiet
Understated
Monochrome logos
PRODUCT FEATURES
Create 4-6 feature blocks:
Each block includes:
Icon
Feature title
1 sentence benefit explanation
Use alternating layouts:
Image left / copy right
Copy left / image right
PLATFORM CAPABILITIES
Clean grid cards showing:
Security
Performance
API integrations
Reliability
SOCIAL PROOF
High-end testimonial cards:
Include:
Quote
Name
Role
Company
PRICING SECTION
Minimal pricing cards:
Starter
Growth
Enterprise
The center plan should be visually emphasized.
CALL TO ACTION
Large final section prompting conversion:
Headline: "Build faster. Launch smarter."
Button: "Start Free Trial"
FOOTER
Simple:
Logo
Product Links
Legal
Socials
DESIGN EXECUTION RULES:
IMPORTANT:
Avoid default or generic UI
Do not overuse colors
Keep everything minimal & premium
Use high-contrast typography
No cartoon icons or playful styles
Maintain brand authority
MICRO-INTERACTIONS:
Apply transitions to:
Buttons
Links
Navigation items
Cards
Motion must be:
Subtle scale or fade
Fast easing (no bouncy animation)
Professional — not playful
RESPONSIVE DESIGN:
Desktop:
1200px max width
Wide breathing space
Tablet:
Collapsed grids
Maintain hierarchy
Mobile:
Large touch CTA buttons
Stack sections vertically
Reduce motion
NAVIGATION:
Top sticky nav:
Left:
Logo
Center:
Product
Solutions
Pricing
Docs
Right:
Login
Get Started (Primary CTA button)
FINAL OUTPUT:
Deliver:
✅ Fully built SaaS homepage
✅ All sections styled with premium polish
✅ Consistent spacing and vertical rhythm
✅ World-class typography hierarchy
✅ Subtle gradients and depth layers
✅ Light motion effects
This should look like:
→ A $100k agency project
→ A VC-ready product website
→ Something indistinguishable from Linear or Mercury’s UX quality
Build this website now.
Prompt Genie
Premium Responsive CSS System with Grid, Flexbox, and Dark Mode
Act as a senior UI/UX frontend architect. Create a premium, responsive CSS system using CSS Grid, Flexbox, custom properties, clamp() typography, and dark mode support. Focus on clean spacing, scalable layouts, smooth responsiveness, and a modern visual hierarchy that feels polished, professional, and easy to maintain.
Prompt Genie
Ultra-Premium SaaS Website in Lovable for Creative Project Collaboration
Design and build an ultra-premium SaaS website using Lovable, optimized for a project management and collaboration tool targeted at creative teams and startups. The overall aesthetic should emulate the world-class design quality of websites like Linear (minimalist, high-performance UI with subtle interactions), Mercury (sleek, professional banking vibe with elegant gradients and typography), and WealthSimple (simple, trustworthy, and approachable elegance). Focus on a premium feel: clean lines, ample white space, high-end typography, subtle animations, and a responsive layout that works flawlessly on desktop, tablet, and mobile. Core Design Principles:
Color Palette: Use a sophisticated neutral base with soft accents. Primary: Deep navy (#001F3F) for text and accents. Secondary: Soft gray (#F5F5F5) for backgrounds, with subtle gradients (e.g., from #FFFFFF to #F0F4F8). Accent colors: Vibrant teal (#00B4D8) for CTAs and highlights, inspired by Linear's blue tones. Support dark mode toggling, with a dark theme using #121212 background, #E0E0E0 text, and inverted accents for accessibility and premium appeal. Typography: Employ modern sans-serif fonts for a clean, readable look. Headings: Inter Bold (or similar like SF Pro) at weights 600-800, sizes 48px for H1 down to 24px for H4. Body: Inter Regular at 16px base, with line-height 1.6 for readability. Subtle letter-spacing (0.02em) on headings for a refined touch, like Mercury's polished text. UI Elements: Buttons: Rounded corners (8px radius), solid fills for primary CTAs (e.g., teal background with white text), outline or ghost styles for secondary. Add subtle hover animations (scale 1.05, shadow lift) without overdoing it—keep it fast and responsive like Linear. Cards: Borderless or subtle 1px borders with soft shadows (0 4px 12px rgba(0,0,0,0.05)). Use for features, testimonials, and pricing tiers, with internal padding of 24px. Navigation: Sticky top navbar with logo left, centered links (Home, Features, Pricing, Blog, About), right-aligned CTA (Sign Up / Log In). Include a hamburger menu for mobile with smooth slide-in animation. Icons: Use high-quality, minimalist line icons (e.g., from Heroicons or similar library). Keep them monochromatic unless highlighting. Animations: Subtle and performance-optimized—fade-ins on scroll, micro-interactions on hovers (e.g., color shifts), no heavy effects to maintain a snappy feel like Linear.
Layout and Responsiveness: Grid-based layouts with max-width 1200px for content. Hero sections full-width with overlays. Ensure mobile-first design: Stack elements vertically below 768px, with touch-friendly taps. Accessibility: WCAG AA compliant—high contrast ratios (at least 4.5:1), keyboard navigation, alt text for images, ARIA labels where needed. Performance: Optimize for speed—lazy-load images, minimize assets. Aim for a premium, buttery-smooth experience.
Website Structure and Pages: Create the following pages with interconnected navigation. Use placeholder content that's professional and engaging, but make it easy to customize later. Include SEO-friendly elements like meta tags, headings, and alt text.
Home Page: Hero Section: Full-screen background with a subtle gradient or abstract image (e.g., geometric patterns in navy/teal). Centered headline: "Streamline Your Projects with Effortless Collaboration" in 60px font. Subheadline: "The premium SaaS for teams that value design and efficiency." CTA buttons: "Get Started Free" (primary) and "Watch Demo" (secondary). Include a mock dashboard screenshot below with subtle parallax scroll. Features Section: 3-4 cards in a grid, each highlighting a key feature (e.g., "Real-Time Collaboration" with icon, description, and screenshot). Use WealthSimple-inspired simplicity. Testimonials: Carousel or grid of 3-5 quotes from fictional users/companies, with avatars and subtle animations. CTA Footer: "Ready to elevate your workflow?" with sign-up form (email input + button). Footer: Logo, quick links, social icons (Twitter, LinkedIn), copyright. Include privacy/terms links.
Features Page: Intro: Hero-like section with "Discover What Makes Us Premium." Detailed Features: Accordion or tabbed sections for in-depth breakdowns (e.g., Task Management, Integrations, Analytics). Each with icons, bullet points, and embedded videos or GIFs (placeholders). Comparison Table: Simple table comparing to competitors (e.g., vs. Trello/Asana), highlighting premiums like "Unlimited Boards" or "AI Insights." End with CTA: "Sign Up to Experience the Difference."
Pricing Page: Hero: "Flexible Plans for Every Team Size." Tier Cards: 3-4 plans (Free, Starter $9/mo, Pro $29/mo, Enterprise Custom). Use Mercury-style cards with checkmark lists for features, monthly/annual toggle switch. Highlight "Most Popular" badge on Pro tier. FAQ Section: Collapsible questions like "What's included in Free?". CTA: "Choose Your Plan" buttons on each card.
About Page: Hero: "Built by Designers, for Designers." Team Section: Grid of team member cards with photos, names, roles (use placeholders). Mission/Values: Bullet points or icons with text, emphasizing premium quality and user-centric design. Timeline: Simple vertical timeline of company milestones (fictional).
Blog Page: Grid of article cards: Title, excerpt, author, date, thumbnail. Include categories sidebar. Sample Posts: 3-5 placeholders like "5 Tips for Efficient Project Management."
Dashboard (Protected Page): Simulate a logged-in SaaS dashboard: Sidebar navigation (Projects, Tasks, Settings), main content with kanban boards or lists (use placeholders like draggable cards). Top bar with user profile, notifications bell, search. Ensure it feels interactive—add mock modals or tooltips.
Auth Pages: Sign Up: Form with email, password, name. Social logins (Google, Apple). Inspired by Linear's minimal forms. Log In: Similar form, with "Forgot Password?" link. Include password reset flow if possible.
Additional Features:
Integrations: Mock section on home/features showing logos (Slack, Google Workspace, etc.) with "Seamless Connections." Security: Dedicated section or badges highlighting "Enterprise-Grade Security" like WealthSimple. Custom Elements: Add a floating chat widget (mock) for support. Include analytics tracking placeholders. Theming: Support light/dark mode switch in navbar. Content Placeholders: Use high-quality stock images (abstract, professional) and lorem ipsum where needed, but keep text persuasive and on-brand.
Generate the full site structure in Lovable, ensuring it's editable. Output the site as a deployable project with preview links if possible. Make it look and feel like a $100M+ valued SaaS product designed by top-tier firms like Pentagram or Frog Design.
Free preview ends here
Locked
Comprehensive Web Performance and Conversion Audit With Action Plan
Locked
Semantic HTML5 Site Foundation Optimized for Performance and SEO
Locked
Lightweight Interactive Frontend Components with Live Data
Locked
Premium Website Strategy and UX Blueprint for [business type]
Locked
Build a Clickable Web App Prototype with Working Core Function
Locked
Landing Page Code with Integrated AI Voice Interaction
Locked
Premium Streaming App UI Spec with Animations and Responsive Design
Locked
Rust Functional Library Expert Panel Code Review
Locked
Terraform Security and Drift Audit With Tool Mapping and Fixes
Locked
Optimized Multi-Stage Dockerfile for Size, Speed, and Security
+ 44 more prompts in this category — unlock to see them all.