A quiet cool-grey studio rather than the bright gradients the motion-design category implies: monochrome chrome on white and faintly violet near-black ink, with the saturated palette confined entirely to the artboards and template tiles. Every display role is set in TWK Lausanne 800 at a line-height below its own font size, so headlines stack tighter than they are tall, and depth comes from five-layer ambient shadows tinted with the ink rather than black. The signature is the easing: the house curve is a spring published as a sixty-stop CSS linear() that overshoots past its target before settling, and card hovers animate border-radius alongside box-shadow so surfaces visibly change shape as they lift.
Browse Jitter in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: jitter.video (live DOM, computed styles), 2026-07-19. Coverage: home. Media (hero animation, template reels) was still loading during capture, so imagery is described only where it resolved. Responsive: breakpoints not captured.
Not the bright playful-gradient look the motion-design category implies — Jitter is a quiet, cool-grey studio. The canvas is white, stepping through #f2f1f3 and #e5e4e7 neutrals with a very slight cool cast, and the ink is #19171c (a near-black with a faint violet undertone rather than a neutral grey-black). Colour is used as *pigment on the artboards*, not as chrome: lavender #a981ff, cyan #01b2fd, acid yellow #f5ff63 and violet #7a40ed appear inside template cards and product artwork, while every actual control is black, white or grey.
Two things make it unmistakable. First, the type: TWK Lausanne at weight 800 at 115px with a line-height *below* the font size (103.5px) and -3.6px tracking — headlines that stack tighter than they are tall — over Inter for all body and nav. Second, the motion: the house easing is not a cubic-bezier but a linear() stop list with 60-plus stops that overshoots to 1.5182 before settling — a real spring, published in CSS. For a tool that makes animation, the easing curve *is* the brand.
Radii are large and soft — 20px, 40px, 50px, up to 375px — and depth comes from five-layer ambient shadow stacks that fade to fully transparent at the top.
Feels: soft, studio-neutral, springy, quietly premium.
| Token | Hex | Role / usage |
|---|---|---|
| ink | #19171c | All primary text; the dark surface too |
| muted | #6e6e73 | Secondary copy |
| faint | #97979b | Tertiary / captions |
| faint-2 | #d7d7db | Disabled / placeholder |
| purple-ink | #17082c | Text on lavender surfaces |
| inverse | #ffffff | Text on dark and on saturated cards |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #ffffff | Page background |
| surface-1 | #f2f1f3 | The dominant card / section fill |
| surface-2 | #f3f3f5 | Alternate light step |
| surface-3 | #e5e4e7 | Inset / sunken fill and the 1px hairline |
| dark | #19171c | Inverted sections, nav CTA |
| lavender | #cab3f8 | Saturated feature card |
| lavender-pale | #f2ecfd | Soft feature card |
| blue-pale | #e6f4ff | Soft feature card |
| border | #e5e4e7 (1px) | Hairlines |
| Token | Hex | Role / usage |
|---|---|---|
| cyan | #01b2fd | Artboard / template pigment |
| lavender-bright | #a981ff | Artboard / template pigment |
| yellow | #f5ff63 | Artboard / template pigment |
| violet | #7a40ed | Accent text / link |
Rules: chrome is monochrome. Every saturated hue lives inside a template card, artboard or illustration — never on a button, nav item or hairline. There is no semantic (success/warning/error) palette on the marketing surface.
"TWK Lausanne", -apple-system, system-ui, sans-serif.Inter, -apple-system, system-ui, sans-serif.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero h1 | 115/103.5 px (0.9 ratio) | 800 | -3.6px |
| Card h3 | 24/22.8 px (0.95 ratio) | 800 | -0.48px |
| Button label | 18/18 px | 600 | -0.36px |
| Lead / h2 | 20/30 px | 400 | -0.4px |
| Nav link | 16/24 px | 600 | -0.352px |
| Body | 16/24 px | 400 | -0.32px |
| Small / caption | 12/16.8 px | 400 | normal |
Patterns: the two families split cleanly — TWK Lausanne for anything display or interactive, Inter for anything read. Every TWK Lausanne role sets line-height below the font size (0.90 at the hero, 0.95 at card titles, 1.0 at buttons), which is what gives headlines their packed look. Tracking is negative on *every* role except the 12px caption, and scales with size (about -3% at the hero, -2% at 16-20px). Nothing is uppercase.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.