| 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
- Dark themes are the default. Light mode is now an option, not the headline. The hero almost always loads in dark.
- Generous whitespace beats clever layout. A boring layout with great rhythm beats a clever layout with crowded sections.
- One brand color does most of the work. Three accents max. Most "colorful" sites use 2 + neutrals.
- Typography carries the brand. Inter, Geist, Söhne, GT America, Söhne Mono — pick one stack and own it across every surface.
- 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:
- Will this read in 5 seconds? If not, the hero is broken.
- Will the customer believe a real human made this? Test by reading aloud.
- 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.
