Minimal SaaS Freelancer Landing

---
title: "Minimal SaaS Freelancer Landing"
slug: freelancer-landing-minimal
bestFor: "Solo freelancers selling a productized service"
aestheticFamily: "Minimal SaaS"
description: "Clean, conversion-tuned landing for a one-person service business — reads like Linear or Vercel, but warmer and more personal."
---

# DESIGN.md — Minimal SaaS Freelancer Landing

## Brand essence
A landing page for one person who does one thing well. It should feel as polished as a YC-funded SaaS, but with first-person warmth. Trust through restraint.

## Color palette
- `--bg`: `#FFFFFF` — page background
- `--bg-soft`: `#F7F8FA` — alternating section background
- `--ink`: `#0B1220` — primary text
- `--ink-muted`: `#5A6478` — secondary text
- `--border`: `#E6E8EE` — 1px borders, dividers
- `--brand`: `#3B5BFD` — primary buttons, links, focus rings
- `--brand-soft`: `#EEF1FF` — pill backgrounds, badge fills
- `--success`: `#10B981` — checkmarks in pricing/feature lists only

Dark mode supported but optional. If implemented: invert `--bg` to `#0B0F19`, `--ink` to `#F2F4F9`, keep `--brand` identical.

## Typography
- **Display + Body**: Inter (or Geist Sans). One family for everything.
- **Mono**: JetBrains Mono — used only for code samples and pricing numbers (tabular figures).

Type scale:
- H1: 56 / 62, weight 600, letter-spacing -0.025em
- H2: 36 / 44, weight 600, letter-spacing -0.02em
- H3: 22 / 28, weight 600
- Body: 17 / 28
- Small: 14 / 22

Hierarchy rules:
- Every section opens with an eyebrow (mono uppercase 12px in `--brand`), then an H2, then a one-line subhead in `--ink-muted`.
- Bold is reserved for in-line emphasis inside body copy. Never bold a whole sentence.

## Spacing & layout
- Container: 1120px max-width, 24px horizontal padding on mobile.
- 12-column grid at >=1024px, 16px column gap, 24px row gap.
- Section vertical padding: 96px desktop, 64px mobile.
- 8px base unit. Component padding = 12 / 16 / 24 / 32.
- Border radius scale: 8 (inputs), 12 (cards), 999 (pills).

## Component patterns
- **Navigation**: 64px tall, white background, 1px bottom border. Wordmark left, 3 nav links center, "Book a call" pill button right. On mobile, collapse to wordmark + button only.
- **Hero**: H1 left-aligned (not centered), 2 CTAs below (primary + ghost), small "trusted by" logo strip beneath. No hero image — use a single screenshot of the deliverable in a tilted browser frame, right column on desktop.
- **Buttons**:
  - Primary: `--brand` fill, white text, 12px radius, 12px/24px padding, subtle 1px inner highlight (`box-shadow: inset 0 1px 0 rgba(255,255,255,.18)`).
  - Ghost: transparent, 1px `--border`, ink text. Hover: `--bg-soft` fill.
  - Always 14px font, weight 600.
- **Cards**: `--bg`, 1px `--border`, 12px radius, 24px padding. No shadow at rest. On hover: `box-shadow: 0 1px 2px rgba(11,18,32,.04), 0 8px 24px rgba(11,18,32,.06)` and lift `translateY(-2px)`.
- **Pricing card**: same as card, but recommended tier has `--brand` 1.5px border + `--brand-soft` corner badge ("Most popular").
- **Form fields**: 44px tall, 8px radius, 1px `--border`, focus ring `0 0 0 3px rgba(59,91,253,.18)` and border becomes `--brand`.
- **Testimonial**: small avatar (40px circle), quote in body size, name + role on one line below, small company logo to the right.

## Motion
- Easing: `cubic-bezier(0.16, 1, 0.3, 1)` (a sharper "Vercel" ease).
- Durations: 150ms hover, 250ms entrance.
- Scroll reveals: opacity 0 → 1, translateY 12px → 0, only on H2/H3 entering viewport. Never on body copy.
- Buttons: scale 0.98 on press.

## Imagery / iconography
- Icons: Lucide, 1.5px stroke, 18px in line with text, 24px standalone. Never filled icons.
- Product shots: real screenshots in a browser/window chrome (mac-style traffic lights, no mock URLs). Subtle drop shadow `0 24px 48px -16px rgba(11,18,32,.18)`.
- No illustration. No 3D. No emoji as icons.

## Voice & tone
Second-person and direct. Short sentences. Specific verbs. Numbers wherever possible ("ships in 7 days", "47 clients", "$2.3k"). No "elevate," "leverage," or "synergy." Pricing language is plain: "$X. Includes Y. Doesn't include Z."

## What to AVOID
- No purple/pink gradients.
- No glassmorphism.
- No floating animated blobs in the background.
- No 3D blender renders of abstract shapes.
- No autoplay video hero.
- No "loved by 10,000+ teams" if it's not literally true.
- No emoji-as-bullet in feature lists.