Taskora SaaS Hero
Dark SaaS hero with background video at opacity-50 and gradient overlay fading to background color. Ideal for produtos saas, plataformas de gestão de projetos, ferramentas de produtividade, dashboards analíticos. AI-ready template.
Use case: Produtos SaaS, Plataformas de gestão de projetos, Ferramentas de produtividade, Dashboards analíticos
Historical Context
The dark-mode SaaS hero with a floating dashboard mockup didn't appear out of nowhere — it was a slow convergence of several forces. Around 2018-2019, tools like Linear, Notion, and Vercel started shipping dark interfaces as their primary brand expression, not as an accessibility toggle. The message was clear: dark means professional, focused, built for people who actually use software all day. The dashboard mockup sitting at an angle below the headline became the visual proof that replaced generic stock photography. By 2021, this pattern had calcified into the default B2B SaaS hero. Every productivity tool, every dev platform, every analytics dashboard adopted the same formula: bold sans-serif headline, one-liner value prop, CTA button with a subtle glow, and a perspective-shifted screenshot floating on a dark gradient. It works because it answers the buyer's first question — "what does this thing actually look like?" — without requiring them to sign up. The pattern persists because it's honest. Unlike lifestyle imagery or abstract illustrations, a real product screenshot signals confidence. You're showing the work. The dark background creates natural contrast hierarchy and makes the UI feel premium, even when the product itself is still rough around the edges.
When to Use
Deploy this pattern when your product has a visually compelling interface worth showing. It's ideal for B2B SaaS, productivity tools, developer platforms, and analytics products where the UI itself is the selling point. Works best when you need to establish credibility fast — the dashboard mockup acts as social proof without testimonials. Avoid it if your product is content-heavy or visually simple; a screenshot of a text editor rarely impresses. Also skip it if your brand is warm, playful, or consumer-facing — dark mode heroes signal seriousness and technical sophistication.
Design Principles
- Contrast hierarchy is everything — the mockup should be the brightest element on screen, pulling the eye down from the headline naturally
- Use real UI, not fabricated screenshots. Fake dashboards with perfect data destroy trust the moment someone recognizes the pattern
- Restrain the glow effects — one subtle radial gradient behind the mockup is atmosphere, three is a gaming peripheral ad
- Typography needs weight. Thin fonts disappear on dark backgrounds. Go bold on headlines, medium on body, and give everything generous letter-spacing
- The perspective tilt on the mockup should be subtle (8-12° max). Anything steeper feels like a PowerPoint transition from 2014
Technical Specs
Colors
Primary
Secondary
Effects
VÍDEO: Vídeo abstrato escuro com partículas luminosas ou formas geométricas flutuantes em tons de azul e roxo sobre fundo preto. Movimento sutil e orgânico criando atmosfera tecnológica e sofisticada. Exibido com opacity 50% e gradient overlay (black/60 para #050505) que funde suavemente o vídeo no fundo escuro da página. | EFEITOS CSS: Vídeo de fundo com opacity-50 e gradient overlay (black/60 para #050505), navbar flutuante pill glassmorphism (bg-white/10, backdrop-blur-md), animações staggered de entrada (fade-up + slide) via Framer Motion, headline massiva com palavra em Instrument Serif italic, dashboard mockup light mode contrastando com hero dark, badge pill com ícone estrela gradiente azul
Light/Dark
✗ Not Recommended / ✓ Full
Related
Last synced: 4/1/2026