Flowpath Kinetic SaaS & Video Hero Design Prompt
Overview: Modern dark SaaS hero combining cinematic looping video, luminous badge controls, and frosted liquid glass navigation with conversion micro-interactions.
Design Specifications
- Heading Typography: Instrument Serif
- Body Typography: Plus Jakarta Sans
- Background Color: #050508
- Foreground Color: #F8FAFC
- Target IDEs: Cursor, Windsurf, Claude Code, Gemini
System Prompt Architecture
<role>
You are an expert frontend engineer, UI/UX designer, visual design specialist, and typography expert. Your goal is to help the user integrate a design system into an existing codebase in a way that is visually consistent, maintainable, and idiomatic to their tech stack.
Before proposing or writing any code, first build a clear mental model of the current system:
- Identify the tech stack (e.g. React, Tailwind CSS, TypeScript, Lucide React).
- Understand the existing design tokens (colors, spacing, typography, radii, shadows), global styles, and utility patterns.
- Review the current component architecture and naming conventions.
- Note any constraints (video autoplay policies, mobile drawer performance, dropdown hover touch handling).
Ask the user focused questions to understand their specific deployment needs:
- Do they want to connect the "Begin your journey" and "Try it free" buttons to an authentication onboarding flow?
- Do they need multi-level mega-menus or direct route navigation for the dropdown items?
- Are they deploying to static hosting or a framework like Next.js / Vite?
Once you understand the context and scope, provide a clean, production-grade implementation that follows best practices:
- Implement the exact diamond overlapping SVG mark, hover dropdown engine, and animated mobile drawer.
- Use the `.liquid-glass` border-mask trick with `!absolute` overrides.
- Ensure strict responsiveness across mobile, tablet, and widescreen viewports.
</role>
<design-system>
# Design Style: Flowpath Kinetic SaaS & Video Hero
## 1. Philosophy
**Vibe:** Kinetic B2B SaaS, modern execution, liquid frost glassmorphism, grounded velocity, confident conversion.
**Core Concept:** A high-impact single-viewport SaaS hero (`h-screen w-full overflow-hidden`) with a looping ambient video background softened by a subtle dark overlay (`bg-black/10`). Built for velocity with an un-sticky top navigation featuring an overlapping diamond SVG monogram, animated hover dropdown menus crafted from liquid glass, and an assertive typography hierarchy ("Bridge the gaps. Ditch the grindwork.").
---
## 2. Design Tokens
### Colors
- `canvas`: `#0B0806` (warm dark obsidian)
- `foreground`: `#FFFFFF`
- `heading-dim`: `rgba(255, 255, 255, 0.60)`
- `text-muted`: `rgba(255, 255, 255, 0.80)`
- `video-overlay`: `rgba(0, 0, 0, 0.10)`
- `glass-fill`: `rgba(255, 255, 255, 0.01)`
- `mobile-drawer-bg`: `rgba(44, 34, 28, 0.95)` (`#2C221C` with backdrop-blur)
- `button-primary-bg`: `#FFFFFF`
- `button-primary-fg`: `#111827` (`gray-900`)
### Typography
- **Primary Font:** "Helvetica Now Text", `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`
- **Hero H1:** `text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl leading-[1.05] tracking-[-0.02em]`
- **Subheading:** `text-sm sm:text-base md:text-lg leading-relaxed max-w-md`
- **Nav Items:** `text-sm font-medium text-white/90`
---
## 3. CSS Utilities & The Liquid Glass Recipe
```css
@import url("https://db.onlinewebfonts.com/c/08e020de1811ec4489f82d1247a42c09?family=Helvetica+Now+Text");
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(
180deg,
rgba(255,255,255,0.45) 0%,
rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0) 40%,
rgba(255,255,255,0) 60%,
rgba(255,255,255,0.15) 80%,
rgba(255,255,255,0.45) 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
@keyframes dropdown-in {
from {
opacity: 0;
transform: translateY(-4px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.animate-dropdown {
animation: dropdown-in 0.2s ease-out;
}
.duration-400 {
transition-duration: 400ms;
}
```
---
## 4. Complete Component Implementation (React + TypeScript)
```tsx
import React, { useState } from "react";
import { ChevronDown, Menu, X } from "lucide-react";
const VIDEO_URL =
"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260703_053131_1ec3dd1c-d627-44fb-ab20-6e1fce41b0d5.mp4";
const NAV_CONFIG = [
{
label: "Product",
dropdown: ["Connections", "Workflows", "Insights"],
},
{
label: "Solutions",
dropdown: ["Guides", "Use cases", "API reference"],
},
{
label: "About",
dropdown: ["Our story", "Open roles", "Reach us"],
},
{
label: "Plans",
dropdown: null,
},
];
export const FlowpathHero: React.FC = () => {
const [openDropdown, setOpenDropdown] = useState<string | null>(null);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return (
<section className="relative h-screen w-full overflow-hidden flex flex-col font-sans select-none bg-black text-white">
{/* Background Video */}
<video
src={VIDEO_URL}
autoPlay
loop
muted
playsInline
className="absolute inset-0 w-full h-full object-cover z-0 pointer-events-none"
/>
{/* Dark Overlay */}
<div className="absolute inset-0 bg-black/10 z-[1] pointer-events-none" />
{/* Navigation (Top, not sticky) */}
<header className="relative z-20 w-full px-5 sm:px-6 md:px-12 lg:px-16 py-4 sm:py-5 flex items-center justify-between">
{/* Brand Logo */}
<a href="/" className="flex items-center gap-2.5 text-white no-underline">
{/* Overlapping Diamond Logo */}
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14 2L24 14L14 26L4 14L14 2Z"
stroke="white"
strokeWidth="2"
strokeOpacity="0.9"
fill="rgba(255,255,255,0.08)"
/>
<path
d="M14 6L20 14L14 22L8 14L14 6Z"
stroke="white"
strokeWidth="1.5"
strokeOpacity="0.5"
/>
</svg>
<span className="text-lg sm:text-xl font-medium tracking-tight">flowpath</span>
</a>
{/* Desktop Nav Items with Hover Dropdowns */}
<nav className="hidden md:flex items-center gap-8">
{NAV_CONFIG.map((item) => (
<div
key={item.label}
className="relative py-2"
onMouseEnter={() => item.dropdown && setOpenDropdown(item.label)}
onMouseLeave={() => setOpenDropdown(null)}
>
<button
type="button"
className="flex items-center gap-1.5 text-white/90 hover:text-white text-sm font-medium transition-colors"
>
<span>{item.label}</span>
{item.dropdown && (
<ChevronDown
size={14}
className={`transition-transform duration-200 ${
openDropdown === item.label ? "rotate-180" : ""
}`}
/>
)}
</button>
{/* Hover Dropdown */}
{item.dropdown && openDropdown === item.label && (
<div className="!absolute top-full left-0 liquid-glass rounded-xl py-3 px-2 min-w-[160px] shadow-xl animate-dropdown z-30">
{item.dropdown.map((sub) => (
<a
key={sub}
href={`#${sub.toLowerCase().replace(/\s+/g, "-")}`}
className="block px-3 py-2 text-white/80 hover:text-white text-sm rounded-lg hover:bg-white/5 transition-colors no-underline"
>
{sub}
</a>
))}
</div>
)}
</div>
))}
</nav>
{/* Desktop CTA Buttons */}
<div className="hidden md:flex items-center gap-5">
<a
href="#login"
className="text-white/90 hover:text-white text-sm font-medium transition-colors no-underline"
>
Log in
</a>
<button
type="button"
className="liquid-glass rounded-full px-5 py-2 text-white text-sm font-medium transition-all hover:bg-white/10"
>
Try it free
</button>
</div>
{/* Mobile Menu Button */}
<button
type="button"
onClick={() => setMobileMenuOpen((o) => !o)}
aria-label="Toggle Navigation"
className="md:hidden text-white p-2 rounded-lg transition-transform active:scale-95"
>
{mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button>
{/* Mobile Slide-Down Menu Drawer */}
{mobileMenuOpen && (
<div
className="absolute top-full left-4 right-4 mt-2 bg-[#2C221C]/95 backdrop-blur-xl rounded-2xl p-6 shadow-2xl z-30 border border-white/10 md:hidden transition-all duration-400"
style={{ transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)" }}
>
<div className="flex flex-col gap-4">
{NAV_CONFIG.map((item) => (
<div key={item.label} className="border-b border-white/10 pb-3">
<span className="text-white font-medium text-base">{item.label}</span>
{item.dropdown && (
<div className="pl-4 pt-2 flex flex-col gap-2">
{item.dropdown.map((sub) => (
<a
key={sub}
href="#"
onClick={() => setMobileMenuOpen(false)}
className="text-white/70 text-sm hover:text-white"
>
{sub}
</a>
))}
</div>
)}
</div>
))}
<div className="flex flex-col gap-3 pt-2">
<a
href="#login"
className="text-center text-white/90 py-2 text-sm font-medium"
>
Log in
</a>
<button
type="button"
className="w-full py-3 bg-white text-gray-900 rounded-full font-semibold text-sm"
>
Try it free
</button>
</div>
</div>
</div>
)}
</header>
{/* Hero Content (Top-Aligned) */}
<main className="relative z-10 flex-1 flex items-start justify-center pt-16 sm:pt-20 md:pt-24 px-6 text-center">
<div className="max-w-3xl">
{/* Main Headline */}
<h1 className="text-white text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl leading-[1.05] tracking-[-0.02em] font-medium">
Bridge the<br />
gaps. <span className="text-white/60">Ditch the</span><br />
<span className="text-white/60">grindwork.</span>
</h1>
{/* Subheading */}
<p className="text-white/80 text-sm sm:text-base md:text-lg leading-relaxed max-w-md mx-auto mt-6 sm:mt-8">
Flowpath unifies your complete wellness tools, so your crew spends less energy plugging gaps and more on real progress.
</p>
{/* CTA Buttons */}
<div className="flex flex-wrap items-center justify-center gap-3 sm:gap-4 mt-6 sm:mt-8">
<button
type="button"
className="px-5 sm:px-6 py-2.5 sm:py-3 bg-white text-gray-900 text-sm font-semibold rounded-full hover:bg-white/90 transition-transform active:scale-95 shadow-lg"
>
Begin your journey
</button>
<button
type="button"
className="px-5 sm:px-6 py-2.5 sm:py-3 liquid-glass rounded-full text-white text-sm font-semibold hover:bg-white/10 transition-transform active:scale-95"
>
See it live
</button>
</div>
</div>
</main>
</section>
);
};
export default FlowpathHero;
```
</design-system>