Jump to

Use this page like a checklist. If a screen violates these rules, it usually loses clicks.

---

Sweetspot Defaults

These defaults produce consistently readable, tappable, fast UI. Use them everywhere unless you have evidence to change them.

---

Design Tokens

Tokens are a performance tool. They prevent random UI. Random UI increases hesitation. Hesitation reduces CTR.

Copy-paste CSS variables (2025 baseline)

:root{
  /* Fonts (best-practice stacks) */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-serif: "Source Serif 4", Literata, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;

  /* Layout */
  --container: 1120px;
  --measure: 68ch;

  /* Page padding */
  --pad-mobile: 16px;
  --pad-desktop: 32px;

  /* Grid gutters */
  --gutter-mobile: 16px;
  --gutter-desktop: 24px;

  /* Spacing (8px rhythm) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radii */
  --radius-sm: 10px;
  --radius: 12px;
  --radius-lg: 16px;

  /* Controls */
  --control-h-mobile: 52px;
  --control-h-desktop: 44px;
  --input-h: 48px;
  --target: 48px;

  /* Type */
  --text-base: 16px;
  --lh-body: 1.55;
  --text-sm: 13px;
  --lh-sm: 1.45;

  /* Surfaces */
  --bg: #F6F7F9;
  --surface: #FFFFFF;

  /* Text */
  --text: #111111;
  --text-2: #4B5563;

  /* Borders */
  --border: #E5E7EB;

  /* Brand / actions */
  --cta: #0047FF;
  --cta-text: #FFFFFF;

  /* Semantics */
  --success: #16A34A;
  --warning: #F59E0B;
  --error: #D72638;
  --info: #2563EB;

  /* Focus ring */
  --focus: #0B5FFF;

  /* Motion */
  --t-fast: 120ms;
  --t: 200ms;
  --t-slow: 300ms;
}

Button baseline CSS (safe default)

.btn-primary{
  min-height: var(--control-h-mobile);
  padding: 0 18px;
  border-radius: var(--radius);
  background: var(--cta);
  color: var(--cta-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 700 var(--text-base)/1 var(--font-sans);
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  user-select: none;
  transition: transform var(--t-fast) ease, filter var(--t-fast) ease;
}

.btn-primary:hover{ filter: brightness(0.96); }
.btn-primary:active{ transform: scale(0.99); }

.btn-primary:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.btn-secondary{
  min-height: var(--control-h-mobile);
  padding: 0 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 var(--text-base)/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}

.btn-secondary:hover{ background: rgba(0,0,0,0.03); }

.btn-secondary:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (min-width: 1024px){
  .btn-primary, .btn-secondary{ min-height: var(--control-h-desktop); }
}

---

Layout, Widths, Grid, Margins

This completes the width system. It prevents two CTR killers: cramped UI and wandering alignment.

In-page Section Menu (Sticky) — recommended geometry

• Sticky menu width: 280px
• Menu-to-content gap: 32px
• Content column max: 760px
• Total inside container: 280 + 32 + 760 = 1072px
• Sticky offset from top: 16px (below header)

Breakpoints (only when layout breaks)

Breakpoint	Label	Use it for
≤ 480px	Mobile	Single-column, big tap targets, simplified nav
481–768px	Large mobile / small tablet	Two-up cards only if it stays readable
769–1024px	Tablet	Grid begins, but keep measure controlled
≥ 1024px	Desktop	Full grid, denser information, 44px controls
≥ 1280px	Wide	Only if you have a real need (don’t stretch text)

---

Spacing, Padding, Rhythm

Spacing is a conversion lever because it controls scan speed. Use a strict rhythm.

---

Typography (and Font Recommendations)

Typography is the highest ROI UI layer. If reading is effortless, people move and click.

Style	Size	Line-height	Weight	Use
H1	clamp(30px, 3.2vw, 44px)	1.12	750	One per page
H2	clamp(24px, 2.2vw, 32px)	1.18	750	Primary sections
H3	clamp(20px, 1.6vw, 24px)	1.25	750	Sub-sections
Body	16px	1.55	400–500	Main reading
Small	13px	1.45	400–500	Meta, captions

• Reading measure: 68ch for paragraphs
• Sentence case: for labels and buttons
• Never center long text: scan speed drops
• Headings must be literal: “Buttons” beats “Make it pop”

Best-of-best font recommendations (practical)

• Best default (UI + performance): Inter variable (UI) + optional Source Serif 4 for long reading.
• System-first (fastest): system-ui stack only (no web font), limit weights (400/600/750).
• Accessibility-forward option: Atkinson Hyperlegible for dense UI (test; it’s opinionated).
• Rule: 1 UI font + optional 1 reading font. More fonts increase load + inconsistency.

Font performance rules (non-negotiable)

• Prefer variable fonts (fewer files).
• Self-host WOFF2, subset languages, use font-display: swap.
• Don’t ship 9 weights. Ship 2–3 (e.g., 400 / 600 / 750).
• Avoid layout shift: stable fallbacks + similar metrics.

---

Color, Contrast, Backgrounds, States

There is no universal “best CTA color”. The consistent winner is contrast and distinctiveness. Your CTA must be the most visually dominant element, while staying accessible.

Neutral scale (use for 90% of UI)

Primary scale (use sparingly)

Semantic colors (use only for meaning)

State rules (non-negotiable)

• Every interactive element has default, hover, focus, pressed, disabled.
• Disabled must look disabled. Grey often implies disabled. Use it intentionally.
• Focus must be obvious. Use a 3px ring with offset.
• Never encode state in color only. Add text and/or icon for errors.

Buttons state preview (visual)

---

Buttons, Tap Targets, Links

Buttons are conversion levers. Your default should be “easy to hit, easy to understand, impossible to miss”.

• Primary button height (mobile): 52px
• Primary button height (desktop): 44px
• Minimum touch target: 48px × 48px
• Button padding: 18px left/right
• Button radius: 12px
• Button font: 16px, weight 600–700
• Button label: verb + outcome (“Start checkout”, “Get the guide”)
• Primary action: exactly one dominant CTA per screen

Links (prevent “looks like text” failure)

• Links are always underlined by default.
• Never style links as plain body text.
• If you use blue for CTA, keep links blue but underlined, and keep CTA as a filled button.

---

Forms and Validation

Forms are where intent dies. Your job is to remove work and remove uncertainty.

Error message format (fastest recovery)

What happened: “Payment failed.”
Why: “Your bank declined the transaction.”
Fix: “Try another card.”
Safety: “Your cart is saved.”

---

Core Components

Components must be predictable. Predictability reduces decision cost.

---

Loading, Empty, Error, Success

Missing states reduce trust instantly. Reduced trust reduces clicks.

---

Motion and Micro-interactions

Motion should reduce confusion. If it does not reduce confusion, remove it.

• Small transitions: 120–200ms
• Large panels: 250–300ms
• Tap feedback: visible within 100ms
• Reduce motion: respect OS settings

---

Accessibility Baselines

Accessibility is performance. If people struggle, they don’t click.

• Text contrast: meet WCAG minimum for normal text
• UI component contrast: borders/icons remain visible
• Touch targets: design for 48×48 on key actions (WCAG 2.2 minimum is 24×24 with exceptions)
• Keyboard: everything interactive must work
• Focus: visible focus ring, never removed
• States: don’t rely on color alone for meaning

---

CRO Rules That Move CTR

CTR rises when the user can decide fast. Your job is to reduce decision cost.

---

Pre-Ship Checklist

---

Sources

• W3C — WCAG 2.2: Target Size (Minimum)
• Android Developers — touch target guidance
• web.dev — Interaction to Next Paint (INP)
• Apple tap target guidance (44pt minimum)
• NN/g guidance: color usability and the need to test
• CXL guidance: no universal “best button color”; contrast is the lever