# Jitter · Design system migration spec

> Source: https://jitter.video  ·  Curated by OpenDesign  ·  en

> This site is a great example of a clean, modern SaaS landing page that prioritizes clarity and speed.

## 1. Identity DNA

Jitter positions itself as a digital animation studio for the browser, its identity rooted in motion, speed, and collaboration. The system is engineered for teams, where clarity and performance are the structural foundations for creative work.

**One-liner:** Super fast motion for every team
**Keywords:** motion · animation · speed · collaboration · teams
**Analogy:** A digital animation studio for the browser

## 2. Color

The color system operates on a strict monochromatic principle, using a clean white and dark gray foundation. A single soft purple accent is reserved exclusively for calls to action, creating a clear and immediate visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F2F1F3` | card background |
| `--bg-quiet` | `#E5E4E7` | quiet area |
| `--ink` | `#19171C` | body text |
| `--ink-soft` | `#6E6E73` | secondary text |
| `--muted` | `#97979B` | placeholder |
| `--muted-soft` | `#D7D7DB` | weak hint |
| `--accent` | `#A481FF` | single accent |
| `--line` | `rgba(215, 215, 219, 1)` | divider |

**Color principle:** Monochromatic scale with a single soft purple accent

The discipline lies in using that accent sparingly, ensuring it always signifies a point of interaction.

## 3. Typography

Typography speaks with two distinct voices: a bold grotesque-sans for high-impact display headlines, and a clean humanist-sans for readable body copy. The contrast establishes a clear hierarchy between attention-grabbing statements and supporting information.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 800 | -2px | hero headlines |
| body | 18px | 1.33 | 400 | -0.36px | body copy |

## 4. Spacing

A consistent 4px baseline grid establishes a steady, invisible rhythm, with 40px section padding providing generous breathing room.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** consistent 4px baseline grid with 40px section padding

## 5. Surfaces

Depth is conveyed through layered, soft shadows and an absence of hard borders. Surfaces feel buoyant, defined by their relationship to the space around them rather than by contained edges.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 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

## 6. Layout

The layout skeleton is built on a centered, single-column hero to focus attention on the core message and call to action. This is anchored by a full-width logo band, establishing scope and partnership.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** centered single-column hero, full-width logo band

## 7. Motion & Interaction

Motion is treated as a functional language, not decoration. Performance and smoothness are paramount, using spring-based linear transforms and scroll-triggered fades to guide focus and confirm interaction.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Patterns:**
  - scroll-triggered fade-in
  - complex spring-based linear transforms
  - opacity transitions

- **Hover:** cursor pointer with smooth transitions
- **Click:** subtle scale or opacity feedback
- **Transition:** all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
- **Keyboard:** standard focus states

## 8. Voice & Don'ts

The voice is confident, direct, and empowering, using short, action-oriented headlines and clear, low-friction calls to action. It avoids corporate formality and vague promises in favor of straightforward communication.

- **Tone:** confident, direct, and empowering
- **Headline style:** short, punchy, and action-oriented
- **CTA style:** clear, low-friction, and encouraging
- **Avoid:** jargon / complex sentences / formal corporate language / vague promises

### Don'ts
- ❌ 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

The system deliberately avoids dark modes, complex color palettes, and serif typography to maintain its clean, high-performance character.

## System Prompt (paste into AI tool)

```
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.
```