2026-05-15 · ["web design", "saas design", "landing page design", "ui design", "design principles"]

12 Web Design Rules for SaaS Landing Pages (and the Violations That Kill Conversion)

The 12 universal web design rules every SaaS landing page should follow — visual hierarchy, F-pattern reading, whitespace, typography, color, contrast, grid, alignment, consistency, mobile-first, motion, accessibility — with concrete violation examples for each.

---

12 Web Design Rules for SaaS Landing Pages (and the Violations That Kill Conversion)

Most design advice on the internet falls into vague aphorisms ("design with empathy") or tool-specific tutorials. The actual craft sits between — twelve rules concrete enough to apply, opinionated enough to argue with, universal enough to outlive the next trend cycle.

This article is those twelve rules, ranked by practical impact, with a violation example for each. We write specifically for B2B SaaS (the domain we work in at Launq), but the rules apply to any product-led marketing surface. If your landing page is failing, the fix is rarely "redesign from scratch" — it is usually two or three of the rules below applied surgically.

Rule 1: Visual hierarchy is doing 80% of your design's job

Visual hierarchy is the deliberate ordering of importance on the page. The headline should be the loudest thing on screen, the CTA the second loudest, body text receding, decorative elements never competing for attention. Hierarchy is created through size, weight, contrast, color, and spacing. A 56px headline next to a 16px subhead sets a clear ladder; a 24px headline next to 22px body next to a 24px CTA does not.

The mistake we see most: founders who care equally about ten elements on the page, make ten elements of equal visual weight, and force the visitor to choose where to look. Visitors do not choose. They leave.

Violation example. A hero where the company name (32px italic), headline (28px bold), subhead (20px regular), and CTA (18px text) all sit within 1.5x of each other in apparent size. The eye does not know where to land first; the brain decides "busy" within 200 milliseconds and bounces.

Rule 2: Design for the F-pattern (or the Z-pattern, deliberately)

Eye-tracking research, most famously by the Nielsen Norman Group, established decades ago that on text-heavy pages users scan in an F-shape; on more visual pages, a Z-pattern dominates. This is a constraint, not a curiosity. Anything important on your page must intersect one of those scan paths.

What does not work: hiding the most important element below the visual flow. A headline in the bottom-center, centered, in light-weight type, is invisible to scanning users. They never read it. You think your page communicates X; the visitor experiences Y.

Violation example. A SaaS hero with a 60-second product video as the centerpiece, the headline in small text below it, and the CTA further down still. Users watch (or skip) the video, scan past the small headline because it does not register as important, and miss the CTA entirely.

Rule 3: Whitespace is content, not absence

The most common mistake amateur SaaS designers make is filling every pixel. The most common mistake people make when critiquing their own design is "it looks empty, add more." Both are the same mistake.

Whitespace separates important things from each other and tells the visitor what to focus on. Premium SaaS pages — Linear, Stripe, Vercel — are dominated by whitespace. A safe heuristic: when you think you have the right amount, double it, then halve back if needed. You almost always settle at "more than your instinct said."

Violation example. A pricing page with tiers crammed together at 8px between cards, dense feature lists at 4px line spacing, and 0px margin between heading and cards. The eye cannot separate one tier from the next. Adding 32px between cards, 8px line spacing, and 64px between heading and cards — same content, dramatically easier to use.

Rule 4: Typography scale is the architecture of your text

Choose a typography scale and stick to it. Well-designed sites use 5-7 type sizes total, on a coherent ratio (1.25x, 1.333x, or 1.5x). Not 17 sizes scattered randomly. A reasonable starting scale: 12px (metadata), 14px (small body), 16px (default body), 20px (lead/subheads), 28px (section headings), 40px (page subheading), 64px (hero headline). Vary weight and color within that scale for differentiation.

Limit yourself to one or two typefaces. One sans-serif for the entire site is a respectable choice. Three typefaces is almost never warranted on a SaaS marketing page.

Violation example. A landing page using Inter for the headline, Helvetica for the body, Georgia for testimonials, and Comic Sans (yes, it happens) for a "fun" callout. The visual incoherence reads as unprofessional even to visitors who cannot articulate what is wrong.

Rule 5: Color psychology is real but secondary to contrast

Yes, color associations exist (blue for trust, green for growth, red for urgency, black for premium). But they are far less important than contrast and consistency. The most important color decision is not "what is our brand color"; it is "what is the contrast between our CTA and everything else."

A common SaaS color system: one primary brand color (used sparingly, on CTAs and key accents), a neutral palette (whites, grays, blacks for 80%+ of the surface), and one or two secondary accents for status. Anything more becomes visual noise.

Violation example. A SaaS site using its vivid orange brand color on the navbar, every section divider, body text accents, icons, the CTA, quotes, and the footer. The CTA, which is supposed to be the loudest call, gets lost in a sea of orange. Reducing brand-color usage to CTAs and one or two key accents makes those elements pop again.

Rule 6: Contrast meets accessibility, not just aesthetics

Body text against background should hit at least WCAG AA contrast (4.5:1 for normal text, 3:1 for large text). This is the floor, not a nice-to-have. Beyond compliance, contrast determines whether your page is readable on a sunny day, on a cheap laptop, or in a meeting room with reflections. Light gray text that looks elegant in Figma at 200% zoom is illegible on an iPhone in a coffee shop. Use a contrast checker on every text-on-background pair.

Violation example. A landing page where body text is #999999 on #FFFFFF (ratio 2.85:1, fails AA). Visitors do not consciously think "the contrast is bad" — they think "this site feels off" — and they leave. Switching to #525252 on white (ratio 7.78:1, comfortably AA) often visibly increases time-on-page.

Rule 7: Grid systems hold the page together

A grid is the invisible scaffold that makes design feel intentional rather than improvised. Most modern SaaS sites use a 12-column grid with consistent gutters (24-32px on desktop), a max content width (1200-1440px), and a consistent set of section paddings. Tailwind, shadcn/ui, and most contemporary CSS systems make grid-based layouts trivial. There is no excuse in 2026 for elements drifting around outside any consistent system.

Violation example. A homepage where one section is 1280px wide, the next is 1100px wide for no reason, the third is full-bleed, and cards inside vary in width based on their content. The eye registers this inconsistency as sloppy even when it cannot articulate why.

Rule 8: Alignment is doing more work than you realize

The default for most B2B SaaS is left-alignment for body text and headings: faster to read, easier to scan, and signals "professional" rather than "decorative." Center-alignment works for short hero headlines, callouts, and isolated CTAs — not for body text longer than two lines or feature lists. Right-alignment is rarely the right choice except for prices in tables. Avoid mixing alignment within a section without intent.

Violation example. A pricing card where the tier name is centered, the price right-aligned, the feature list left-aligned with checkmark bullets, and the CTA centered. The eye makes four separate alignment decisions inside one card. Aligning everything to the left cleans up the visual weight and reduces cognitive load.

Rule 9: Consistency compounds across the page

A design system with five button styles, six card styles, and ten typography variations has effectively no design system. Pick one style per component and reuse it. Every primary CTA looks identical. Every feature card uses the same pattern. Consistency lets the visitor's brain stop processing UI and start processing content.

Violation example. A landing page where the hero CTA is a filled blue button with rounded corners, the pricing CTAs are filled black buttons with sharp corners, the email signup is an outlined gray button, and the footer CTA is a text link with an arrow. Four conventions for "primary action" across one page.

Rule 10: Mobile-first is no longer optional, and very few sites get it right

Over half of B2B SaaS marketing traffic is now mobile. A page that works well on desktop and breaks on mobile is broken to the majority of your audience. Designing mobile-first means starting from the smallest viewport and adding complexity as space allows.

Specific mobile pitfalls: horizontal scrolling, hover-only interactions (mobile has no hover), tap targets smaller than 44x44px, hero videos that autoplay on mobile data, modals that cannot be dismissed.

Violation example. A SaaS hero with headline left, interactive product demo right, primary CTA below on desktop. On mobile, the demo collapses to a static image, the CTA gets pushed below the fold, and reaching the only meaningful action requires three swipes. Conversion on mobile drops to a third of desktop. Fix: stack headline, then CTA, then demo image — CTA on the first screen, where it can be tapped.

Rule 11: Use motion sparingly and purposefully

Motion is powerful for guiding attention, conveying state, and adding personality. It is also the easiest tool to overuse. Reasonable uses: a subtle hero reveal on load, a hover state on CTAs, a confirmation on form success, occasional scroll-triggered reveals. Unreasonable uses: scroll-jacking, autoplaying complex animations that delay LCP, parallax that makes content harder to read, motion that runs continuously and competes with content. Always respect prefers-reduced-motion — non-negotiable in 2026.

Violation example. A landing page where the hero text writes itself letter by letter, the CTA pulses, screenshots rotate in a carousel, scroll triggers parallax, and feature cards bounce into view. The visitor cannot read because the page will not stop moving. Cutting all motion except a single scroll-reveal on the hero often improves conversion.

Rule 12: Accessibility is design, not a checklist after design

A site that excludes users with disabilities is not a "well-designed site with one issue." It is a site that has misunderstood what design is for. Accessibility is part of the craft, not an audit item. Concretely: WCAG AA contrast, keyboard-navigable interactive elements, meaningful alt text, sensible heading hierarchy, visible labels (not placeholder-only), visible focus states, prefers-reduced-motion respected, captions on informational video.

These are also conversion practices. Keyboard-navigable sites handle power users on every device. Proper headings let search engines and AI answer engines parse correctly. High contrast performs better in poor lighting.

Violation example. A landing page where form labels are placeholder-only (disappearing on typing), the focus state is invisible (keyboard users lost), and error feedback is red text with no screen-reader announcement. Visitors with disabilities cannot complete the form. Visitors without disabilities have a worse experience too.

A summary table of the twelve rules

#	Rule	Most common violation
1	Visual hierarchy	All elements similar weight
2	F/Z-pattern scanning	Important content off the scan path
3	Whitespace as content	Cramming every pixel
4	Typography scale	17 random sizes
5	Color psychology vs. contrast	Brand color everywhere, CTA invisible
6	Contrast meets accessibility	Light gray text on white
7	Grid systems	Inconsistent widths across sections
8	Alignment	Mixing alignments within one section
9	Consistency	Five button styles for "primary"
10	Mobile-first	Mobile experience as afterthought
11	Motion sparingly	Everything moves all the time
12	Accessibility as design	Treated as a final audit item

How to apply this to an existing page

Run a 30-minute audit. Open your current SaaS landing page on a laptop and a phone, side by side. Walk through the twelve rules in order. For each, ask: is this rule respected? If not, name the violation. By the end you will have 3-7 concrete fixes, ordered by impact.

Resist the temptation to "redesign from scratch." Most underperforming SaaS landing pages need three or four rules applied surgically, not a full rebuild. If you would rather have a senior team run this audit and ship a rebuild in 5 to 10 days, that is what we do at Launq.

---

FAQ

What are the most important web design rules for a SaaS landing page? The three with the highest impact on conversion are visual hierarchy (the most important element must be the loudest), CTA contrast (the primary call to action must be unmistakably visible against everything else), and mobile-first design (more than half of SaaS marketing traffic is now mobile, and most pages still treat mobile as an afterthought).

How much whitespace should a SaaS landing page have? More than your instinct says. Premium SaaS pages — Linear, Stripe, Vercel — typically dedicate 40-60% of visible area to whitespace. A safe heuristic: when you think you have the right amount, double it, then halve back if needed. The result is almost always more than the original instinct.

How many typefaces should I use on a landing page? One or two. One sans-serif for the entire site is a respectable, professional choice. One sans for headings and one different sans for body works if the pairing is intentional. Three typefaces is rarely warranted on a SaaS marketing page.

What contrast ratio should body text have? At minimum WCAG AA: 4.5:1 for normal text, 3:1 for large text. Below this, the page is technically inaccessible and visibly uncomfortable to read on real devices in real lighting conditions. Use a contrast checker on every text-on-background pair.

Should I design mobile-first or desktop-first in 2026? Mobile-first. Over half of B2B SaaS marketing traffic is now mobile (with variation by industry). Designing the mobile experience first, then expanding to desktop, ensures the most-visited version is the best version, not an afterthought.

Are animations bad on landing pages? Animations are good when used sparingly and purposefully — a subtle reveal on load, a hover state on CTAs, a small confirmation on form success. Animations are bad when overused — scroll-jacking, multiple competing animations, motion that competes with content for attention. Always respect prefers-reduced-motion.

How do I know if my landing page is well-designed? Run the twelve rules above as a checklist on your current page. For each rule, name the specific violation if there is one. By the end you will have a concrete list of 3-7 fixes. Most underperforming SaaS landing pages do not need a redesign; they need three or four of these rules applied surgically.

---

---

— Romain at Launq