modern-saas-design-principles

name	modern-saas-design-principles
description	Use when designing or evaluating a SaaS marketing site or product UI in 2025+. Covers the canonical modern aesthetic, what's table-stakes, what's overused, and how to make design decisions that age past one trend cycle. Reference for every other skill in this corpus.

Modern SaaS Design Principles

The "current SaaS aesthetic" is real and recognizable. It's also already getting tired. The skills below let you operate inside the genre while avoiding the worst clichés.

Five non-negotiables

1. Dark themes are the default. Light mode is now an option, not the headline. The hero almost always loads in dark.
2. Generous whitespace beats clever layout. A boring layout with great rhythm beats a clever layout with crowded sections.
3. One brand color does most of the work. Three accents max. Most "colorful" sites use 2 + neutrals.
4. Typography carries the brand. Inter, Geist, Söhne, GT America, Söhne Mono — pick one stack and own it across every surface.
5. Motion is taste, not tech. A few well-placed transitions outperform a parallax page.

What's overused (avoid or differentiate)

• Gradient blob backgrounds (every Linear-clone has these)
• "We made AI" generic copy and a chat-bubble screenshot
• Customer logos placed without permission or evidence of usage
• Skeumorphic 3D buttons returning from the dead — they're not aging well yet
• Auto-rotating testimonial carousels (almost always feel dated within a year)
• Hero videos that auto-play with sound (still happens, still bad)

What separates "good" from "great"

Good	Great
Has all the sections	Sections in unconventional but logical order
Pricing table	Pricing table + ROI calculator + comparison
Customer logos	Customer logos + named quote + outcome metric
Dark mode	Dark mode + light mode + an opinion about which is default
Animations	Animations that respond to user input, not just scroll
FAQ	FAQ section that admits drawbacks honestly

Decision framework

When in doubt:

1. Will this read in 5 seconds? If not, the hero is broken.
2. Will the customer believe a real human made this? Test by reading aloud.
3. Does this section earn its scroll? If the user scrolls past it, the page is too long.

Where this fits in X3 Compass

This is the umbrella skill. Every other skill in this corpus inherits from these five non-negotiables.