# How cap.so is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/cap.so-design)

Last updated: 2026-07-28

## 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).

## Captured pages

[![Home — wide](https://pin.fontofweb.com/6475?format=jpg)](https://design.withfudge.com/share/pin-6475)

[Home — wide](https://design.withfudge.com/share/pin-6475)

[![Home — narrower](https://pin.fontofweb.com/6478?format=jpg)](https://design.withfudge.com/share/pin-6478)

[Home — narrower](https://design.withfudge.com/share/pin-6478)

[![Pricing — current](https://pin.fontofweb.com/6479?format=jpg)](https://design.withfudge.com/share/pin-6479)

[Pricing — current](https://design.withfudge.com/share/pin-6479)

[![Early adopter pricing](https://pin.fontofweb.com/4341?format=jpg)](https://design.withfudge.com/share/pin-4341)

[Early adopter pricing](https://design.withfudge.com/share/pin-4341)

## Colors

- `#ffffff`
- `#000000`
- `#71717a`
- `#f4f4f5`