← Back to Skills / Marketplace / modern-saas
SKL · 09● FREE

ModernSaaS.

Clean, confident, and instantly trustworthy. The visual language behind Linear, Vercel, and Notion — for products that need to look funded without being funded.

● Live preview · Modern SaaS demo
● This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

Modern SaaS is what people picture when they say "I want my app to look legit." It's the visual language of Linear, Vercel, Loom, and Notion — clean without being cold, structured without feeling rigid. You've probably seen a hundred sites built this way without noticing, because that's kind of the point. It makes your product look like a funded team built it, even when it was just you on a weekend.

● Looks Like
LinearVercelLoomNotionClerkResendRaycast's websiteThe top 20 products on Product Hunt in any given month
02 · Best For / Avoid If
＋ Best For
+SaaS products at any stage — from landing page to full product
+Developer tools and technical products that need to feel trustworthy
+B2B apps where credibility directly affects conversion
+Startup websites that need to look funded without being funded
+Any product being shown to investors, clients, or potential users for the first time
× Avoid If
×You want a strong, distinctive personality — this style is intentionally neutral
×Your audience is primarily consumers who respond better to warmth and character
×You're building in creative or entertainment verticals where standing out visually is the whole game
03 · Design Philosophy
01

Neutral is a choice

Modern SaaS uses a deliberately restrained palette — white or very light gray backgrounds, one brand color, blacks and grays for everything else. This isn't laziness. It's a signal that the product is confident enough in what it does to not compete with its own interface. The design gets out of the way so the product can do the talking.

02

Every element has a clear state

Default, hover, focus, active, disabled, loading, error — all of them defined, all of them visually distinct. This completeness is what separates a designed product from an assembled one. Users feel it even when they can't name it: everything responds, nothing surprises them, every edge case is handled.

03

The grid is doing the heavy lifting

The quality of a Modern SaaS layout comes from grid discipline, not decoration. Consistent column widths, consistent spacing, consistent component sizing throughout. When everything answers to the same underlying structure, the whole thing reads as professional regardless of what specific font or color you picked.

04 · Use With Claude / Cursor
Claude
01Open your Claude project
02Click 'Add files' in the Project Knowledge panel
03Drop in SKILL.md and DESIGN.md
04Start a new chat in the project — Claude follows the spec
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — Cursor references both files per request
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
The generic blue trap
Modern SaaS with a default blue button and Inter font looks exactly like every other Claude-built app. Pick one specific brand color before you ask Claude to design anything — and name it explicitly.
! WARNING
Forgetting the actual product
Nice marketing sites are easy; disciplined dashboard design takes more work. Apply the same spacing and state consistency to your product screens, not just the landing page.
! WARNING
Empty pages
This style needs real content to look intentional. Sparse pages with minimal copy look unfinished, not minimal. Use realistic data in your prompts before asking Claude to design anything.
! WARNING
Drifting border radius
Modern SaaS typically uses 6–8px radius, consistent everywhere. Claude often mixes rounded and sharp components. Specify the radius upfront and hold it.
● 07 · Download

Two files. That's it.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

↓ SKILL.MD↓ DESIGN.MD