---
name: Jitter
description: "This site is a great example of a clean, modern SaaS landing page that prioritizes clarity and speed."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#19171C"
  secondary: "#6E6E73"
  tertiary: "#A481FF"
  neutral: "#97979B"
  bg-soft: "#F2F1F3"
  bg-quiet: "#E5E4E7"
  muted-soft: "#D7D7DB"
  line: "rgba(215, 215, 219, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 800
    letterSpacing: "-2px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "-0.36px"

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

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

---

## Overview

Super fast motion for every team

*A digital animation studio for the browser*

## Colors

Monochromatic scale with a single soft purple accent

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#19171C`)** — uses `ink` token
- **Secondary text (`#6E6E73`)** — uses `ink-soft` token
- **Accent (`#A481FF`)** — uses `accent` token
- **Muted (`#97979B`)** — uses `muted` token
- **Borders (`rgba(215, 215, 219, 1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

## Layout

centered single-column hero, full-width logo band

*Rhythm:* consistent 4px baseline grid with 40px section padding

## Elevation & Depth

- 0px 9px 21px 0px rgba(25, 23, 28, 0.1)
- 0px 38px 38px 0px rgba(25, 23, 28, 0.09)
- 0px 85px 51px 0px rgba(25, 23, 28, 0.05)
- Borders: none or subtle 1px solid

## Shapes

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

## Components

- **button:** pill-shaped with soft purple background and dark text, or dark background with white text
- **card:** white background with subtle shadow and rounded corners
- **chip:** pill-shaped tag with light gray background
- **input:** standard form fields with rounded corners
- **hero:** centered large typography with prominent CTA button

## Do's and Don'ts

**Don't:**
- don't use a busy background — screenshot shows clean white or soft gray backgrounds
- don't use decorative serif fonts — screenshot shows only clean sans-serif typography
- don't use a wide variety of accent colors — screenshot shows a single dominant purple accent
- don't use sharp corners on primary buttons — screenshot shows fully rounded pill buttons
- don't use dense, multi-column layouts — screenshot shows a clear, single-column hero section
- don't use small, crowded headlines — screenshot shows large, bold, high-impact display type

---

## System Prompt (paste into AI agent)

```
Jitter is a fast, collaborative motion design tool. The design uses a clean white background with a single soft purple accent color for calls to action. Typography is bold and clean, using grotesque-sans for display and humanist-sans for body text. Key design elements include large, impactful headlines, pill-shaped buttons, and generous spacing. Avoid using dark modes, complex color palettes, or serif typography. Critical don'ts: avoid busy backgrounds, don't use wide color variety, and avoid sharp corners on buttons.
```