cap.so website design: fonts, colors and UI patterns

Design character

Cap is a crisp monochrome SaaS for screen recording: white canvas, black primary text/buttons, zinc muted copy (#71717a), and soft small radii. Marketing is friendly and spacious; pricing is orderly card comparison. It reads modern indie-software—not enterprise heavy, not neon playful.

What should survive adaptation: - Strict black/white/zinc neutrals - Large display heroes (~60px) with calm body - Small radii (2–12px) — slightly rounded, not bubbly - Screenshot proof of the recorder UI

Foundations

### Color Measured: #ffffff, #000000, #71717a. Primary buttons black; secondary ghost/bordered; muted zinc for supporting text. Avoid introducing a random brand hue unless product already uses one in screenshots.

### Typography Weights 400/500/700. Sizes include small 8–9px micro, 14–18 UI/body, 36–60 display. Clear ladder; display is short and benefit-led.

### Spacing and layout Tight scale 4–24 then 32/40/56/64 section spacing. Home: hero + social proof + feature bands. Pricing: 2–3 plan cards centered.

## Visual language - Radii 2, 6, 12 - Flat surfaces; light borders - Product screenshots with subtle framing - Light mode default

## Components and states - Black primary CTA - Pricing cards with featured plan emphasis - Feature grid with icons - Simple top nav + wordmark

## Responsive behavior Home/pricing across ~1024–2048 widths. Cards stack; hero type scales; monochrome system constant.

## Practical guidance Preserve B/W zinc discipline, large clean display, modest radii. Avoid multi-color gradients, glassmorphism, oversized 24px+ continuous rounding on every box.

## Scope note Studied /home and /pricing across eight captures (including older early-adopter pricing).