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

Modern SaaS.

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. The restraint signals confidence: the design stays subordinate so the product itself can do the work.

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. 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
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
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 — mention the skill name to invoke it automatically
★ 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

Beautiful designs in minutes.

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

↓ SKILL.MD↓ DESIGN.MD