CURATED · OPEN · FREE
Jitter
Super fast motion for every team
design motion
01
Identity DNA
motion animation speed collaboration teams
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
display 72px · 800body 18px · 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
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
centered single-column hero, full-width logo band
07
Motion & Interaction
220ms micro
400ms small
800ms medium
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
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 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.
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: This site is a great example of a clean, modern SaaS landing page that prioritizes clarity and speed.