Notion

A SaaS product landing page using dark navy hero with floating UI mockups and colorful accent dots, transitioning to light-background feature sections with left-aligned text paired to right-side interface screenshots.

Colors

Industry

Mood

Screen type

Type style

Visual details

How it works

hero:: Full-width dark navy background with centered white headline and subtext, flanked by animated floating circular UI previews in coral, purple, and teal; diagonal accent line runs from upper left, positioning a yellow dot at entry point.
layout:: Hero takes full width; below, alternating 50/50 left-text/right-image pairs for 4 feature sections, each with distinct colored accent bar; middle section uses 4-column icon grid; pricing section displays 3 columns of stat/cost pairs; testimonials run as single-column text blocks; footer uses multi-column link structure.
type:: Bold sans-serif for headlines (60-72pt), regular weight for body copy; numerical stats displayed in 3xl weight for emphasis; fine gray subtext (12-14pt) under feature titles; consistent left-aligned heading position across all feature blocks.
colors:: Dark navy dominates hero and navigation; accent colors (coral orange, purple, teal, yellow, green) appear as circular badges and UI element highlights throughout mockups; light gray/white backgrounds separate feature sections; colored left borders (teal, coral, blue) frame individual feature cards.
distinctive:: Floating circular UI component previews with glowing soft-shadow effects in the hero, creating depth and motion without animation indicators—these dot-positioned mockups immediately signal a multi-feature product ecosystem.