SaaS Product references

24 deeply-analysed saas product sites, 19 flagship-tier. Each carries the design tokens, the do and don't rules, the signature moves and the section anatomy, so an AI builder grounds a saas product brief in how the best sites actually build it (home, pricing, product, about, article, story, services, service detail).

Screenshot of Atlassian

Atlassian

flagship

SaaS Product

The reference for a calm white enterprise SaaS canvas that lets one electric Atlassian Blue (#1868db) and a single chromatic word inside a black 80px display headline carry all the energy.

Screenshot of Basecamp

Basecamp

flagship

SaaS Product

a 2026 Basecamp 5 launch site where every captured colour value is in OKLCH (the most aggressive perceptual-uniform colour-space adoption in the library), Graphik is the sole typeface, two CSS keyframes is the entire animation budget (`blink` + `status`), and the page is composed as a literal product screenshot with bulleted prose navigation in the margin.

Screenshot of Calendly Com

Calendly Com

flagship

SaaS Product

The reference for a calm white-paper SaaS hero that warms up with soft magenta/violet/cyan gradient blobs (#e55cff, #8247f5, #0099ff) layered behind a floating product card, anchored by a heavy navy display headline (#0b3558) and one blue CTA accent (#006bff).

Screenshot of Canva

Canva

flagship

SaaS Product

The reference for full-bleed candy gradient skies (teal #00c4cc into violet #7d2ae8) carrying a white humanist hero, where colour is the product showcase rather than decoration.

Screenshot of Cofounder

Cofounder

strong

SaaS Product

The reference for fusing a pixel-art world-building aesthetic with editorial chapter-based content - a 16-bit hero on a learning-guide body.

Screenshot of Crisp

Crisp

strong

SaaS Product

The reference for AI customer-support brand - bespoke Crisp Aeonik Pro, real chat dashboard hero, link-blue underline emphasis, dark navy announcement banner promoting AI agent.

Screenshot of Dropbox

Dropbox

flagship

SaaS Product

The reference for a 700-million-user product brand at restraint: cream "coconut" backgrounds, one saturated blue CTA, real product UI rendered enormous, and a 13-section page that never raises its voice.

Screenshot of Figma

Figma

flagship

SaaS Product

a white-canvas product site that uses tilted Figma file-cards as the hero imagery, the bespoke variable figmaSans + figmaMono pair at non-integer weights (340, 480, 520, 540), and a 0.16s ease-out motion contract to demonstrate breadth without showing a single screenshot of the actual Figma UI.

Screenshot of Hubspot

Hubspot

flagship

SaaS Product

The reference for warming up enterprise SaaS: a near-white cream canvas (#fcfcfa), a custom editorial serif headline, and one flame orange (#ff4800) used as functional punctuation rather than decoration.

Screenshot of Huly

Huly

flagship

SaaS Product

The reference for a single vertical violet-to-coral aurora beam (#5683da into #ff8964) splitting a near-black hero, with the product UI rising up into the light from the bottom edge.

Screenshot of Intercom

Intercom

flagship

SaaS Product

The reference for an editorial-magazine SaaS hero on warm cream (#faf9f6) with whisper-light weight-300 grotesk display and one electric-violet (#0007cb) accent doing all the chromatic work.

Screenshot of Loom

Loom

flagship

SaaS Product

a post-Atlassian-acquisition SaaS site (now branded "Atlassian Loom") built in Next.js, set in Atlassian's Charlie Text + Charlie Display, anchored by a single Atlassian-blue `#1868db` CTA and a hero video thumbnail that doubles as the product demo - the canonical reference for "absorbed-by-enterprise SaaS that still feels like itself."

Screenshot of Method

Method

niche

SaaS Product

The reference for QuickBooks-niche B2B CRM - clean deep-navy + royal-blue conservative B2B design with yellow-underline accent and customer-photo-driven testimonials.

Screenshot of Openai

Openai

flagship

SaaS Product

The reference for white-canvas restraint: a pure #ffffff page where black #000000 type and a single ChatGPT-style 9999px pill input do all the work, and colour is rationed to editorial imagery alone.

Screenshot of Patreon

Patreon

flagship

SaaS Product

The reference for an editorial-monochrome creator platform where oversized whisper-light Oracle type (weights 250 to 350, tight negative tracking) is set straight over edge-to-edge human photography, and the entire UI recedes to hairline #1a1a1a pills so the only colour on screen is photographic.

Screenshot of Pitch

Pitch

flagship

SaaS Product

a violet-and-yellow presentation-tool flagship that pairs Eina01 + Mark Pro on a warm-navy ink, sparkle keyframes (`sparkL`, `sparkM`, `sparkS`, `sparkHover`), animated cursor pointers, and a numbered four-step "Plan / Build / Pitch / Measure" walkthrough - the canonical reference for "B2B presentation software that earns playfulness."

Screenshot of Plain

Plain

strong

SaaS Product

a Framer-built operational site that turns a bifurcated 80px headline (bright green + dark green) into the whole brand, leaving everything else - cream cards, Geist Mono micro-labels, single-easing colour transitions - in subordinate role.

Screenshot of Shopify

Shopify

flagship

SaaS Product

The reference for a near-black commerce canvas (#02090a) where a single mint signal (#36f4a4) does all the accent work while a high-contrast white pill carries every action, never the green.

Screenshot of Sketch

Sketch

flagship

SaaS Product

The reference for floating one warm editorial serif headline over a near-white canvas washed in a single soft pink-to-lavender gradient, with all the energy concentrated in a dark pill CTA wrapped in a diffused magenta halo.

Screenshot of Slack

Slack

flagship

SaaS Product

a post-Salesforce-acquisition product flagship where the iconic aubergine `#611f69` survives as the primary CTA, Salesforce-Sans replaces Lato, and a 30-keyframe motion library powers the "workspace-people-bump" avatar animations that have always been Slack's brand signature.

Screenshot of Sublime

Sublime

flagship

SaaS Product

The reference for hanging a monumental black geometric-sans headline on a pure-white gallery wall, then letting one photoreal 3D object (a mossy sculpture) crash up into the type as the only colour in the room.

Screenshot of Webflow

Webflow

flagship

SaaS Product

a white-canvas product flagship that is itself built in Webflow - using the bespoke WF Visual Sans Variable + WF Visual Sans Mono, a Webflow-blue `#146ef5` primary, GSAP + ScrollTrigger + Three.js + Swiper all bundled, and a three-card "AI / Template / Scratch" entry hero that mirrors the actual product's onboarding paths.

Screenshot of Wispr Flow

Wispr Flow

strong

SaaS Product

The reference for a butter-cream voice-AI brand at peak typographic confidence - EB Garamond serif hero on lavender-and-evergreen surfaces, with curved-path transcript animations as the signature motion.

Screenshot of wispr-flow

wispr-flow

flagship

SaaS Product

The reference for an editorial-meets-product hero: a two-tone EB Garamond serif headline at 64 to 120px (graphite first clause, ink second) on warm cream paper (#ffffeb), carried by a single soft-lavender CTA pill and orbiting transcribed-speech motion.

Back to the full collection