CURATED · OPEN · FREE

Jitter

Super fast motion for every team

designmotion

Jitter screenshot

↓ Download design system (9 MB)Open in OpenDesign

Visit: https://jitter.video

📦 Browse pack contents →

01

Identity DNA

motionanimationspeedcollaborationteams

A digital animation studio for the browser

02

Color

#A481FFAccent

#19171CInk

#6E6E73Ink soft

#FFFFFFBG

#F2F1F3BG soft

#E5E4E7BG quiet

#97979BMuted

rgba(215, 215, 219, 1)Line

Monochromatic scale with a single soft purple accent

03

Typography

grotesque-sans · humanist-sans · monospace

display72px · 800
body18px · 400

04

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

consistent 4px baseline grid with 40px section padding

05

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

none or subtle 1px solid

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)

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

centered single-column hero, full-width logo band

07

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

scroll-triggered fade-in · complex spring-based linear transforms · opacity transitions

cursor pointer with smooth transitions · subtle scale or opacity feedback

08

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

09

Voice & Don'ts

Tone confident, direct, and empowering
Headlines short, punchy, and action-oriented
CTAs clear, low-friction, and encouraging

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
Avoid: jargon
Avoid: complex sentences
Avoid: formal corporate language
Avoid: vague promises

10

Inside the pack — real screenshots

Jitter — 桌面首屏（hero） — 桌面首屏（hero）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Jitter — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko