---
name: Cap
description: "This site is a prime example of a modern, developer-focused SaaS landing page with excellent typography hierarchy and restraint."
version: alpha

colors:
  background: "#fcfcfc"
  primary: "#000000"
  secondary: "#202020"
  tertiary: "#0D74CE"
  neutral: "#838383"
  line: "rgba(229, 231, 235, 1)"

typography:
  display:
    fontFamily: sans-serif
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, modern SaaS landing page for a screen recording tool.

*A clean, modern SaaS dashboard for a screen recording tool*

## Colors

High-contrast black typography on near-white backgrounds with a single vibrant blue accent for primary actions.

- **Background (`#fcfcfc`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#202020`)** — uses `ink-soft` token
- **Accent (`#0D74CE`)** — uses `accent` token
- **Muted (`#838383`)** — uses `muted` token
- **Borders (`rgba(229, 231, 235, 1)`)** — uses `line` token

## Typography

- **Display:** sans-serif
- **Body:** sans-serif
- **Mono:** ui-monospace

## Layout

Standard centered container with 12-column grid

*Rhythm:* Consistent 4px base unit with generous vertical spacing between sections

## Elevation & Depth

- rgba(0, 0, 0, 0.05) 0px 4px 10px 0px
- rgba(0, 0, 0, 0.05) 0px 20px 25px -5px
- Borders: 1px solid rgb(229, 231, 235)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Rounded pill shapes with solid fills (black or blue) and white text
- **card:** White cards with subtle shadows and rounded corners
- **chip:** Pill-shaped category selectors with icons
- **input:** Rounded pill input fields with light borders
- **hero:** Split layout with large typography on left and product screenshot on right

## Do's and Don'ts

**Don't:**
- Don't use decorative fonts — screenshot shows a clean, neutral sans-serif.
- Don't use dark mode — screenshot shows a predominantly light, near-white background.
- Don't use harsh shadows — screenshot shows very subtle, soft shadows.
- Don't use sharp corners — screenshot shows pill-shaped buttons and rounded cards.
- Don't use neon colors — screenshot shows a restrained palette with one primary blue accent.
- Don't use dense layouts — screenshot shows generous whitespace and a clear hierarchy.

---

## System Prompt (paste into AI agent)

```
This is a clean, modern SaaS landing page for Cap, an open-source screen recording tool. The design DNA is characterized by a light, near-white background (#fcfcfc), high-contrast black typography, and a single vibrant blue accent (#0D74CE) for primary actions like 'Sign Up' and 'Upgrade'. The font is a neutral, humanist sans-serif used at a large scale (60px for headlines) with tight tracking. Key critical donts: 1) Do not use dark mode or dark backgrounds, as the screenshot shows a light theme. 2) Do not use sharp corners on buttons or cards; use pill shapes and rounded corners. 3) Do not use harsh shadows; use subtle, soft shadows for depth. The layout is spacious with generous whitespace, emphasizing clarity and professionalism. Interactive elements have smooth, subtle transitions. The voice is professional and straightforward, focusing on the product's utility and open-source nature.
```