Jitter

A bold, motion-design-software interface built on pure-white canvas with near-black ink and an oversized TWK Lausanne display headline. The system reads as confident, playful creative-tool branding — extreme display type at weight 800 with heavy negative tracking, soft-purple lilac CTAs, fully-rounded pill buttons and inputs, light-gray panels holding product UI fragments, and deep multi-layer soft shadows that float the product mockups off the page. Brand voltage comes from the huge condensed-feeling headline and a small bright accent palette (lilac, yellow, pink) pulled straight from the motion-canvas product.

jitter.video

Works with Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit

↓ .md ↓ All files

loading…

Color Palette

Accent

Neutrals

Typography

display 80px · 800 · 0.9

The quick brown fox jumps

title 21px · 800 · 0.95

The quick brown fox jumps

subhead 18px · 400 · 1.5

The quick brown fox jumps

body 20px · 600 · 1.5

The quick brown fox jumps

button 18px · 600 · 1.0

The quick brown fox jumps

Spacing & Shape

Spacing

Name	Value	Preview
xxs	4px
xs	5px
sm	8px
md	10px
lg	12px
xl	20px
xxl	30px
section	40px

Border Radius

Name	Value	Preview
sm	18px
md	20px
lg	26px
xl	40px
pill	50px
full	375px

FAQ

What colors does Jitter use?: Jitter's core palette includes #19171c, #1e1e1e, #000000, #6e6e73, #808080. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Jitter DESIGN.md.
What font does Jitter use?: Jitter's primary typeface is TWK Lausanne. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
What is the Jitter design system?: A bold, motion-design-software interface built on pure-white canvas with near-black ink and an oversized TWK Lausanne display headline. The system reads as confident, playful creative-tool branding —…

More like this

↓ .md ↓ All files

loading…