# Jitter — Marketing site Design Spec

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

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

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

## 3. Typography Rules

- Display + controls: `"TWK Lausanne", -apple-system, system-ui, sans-serif`.
- Body + nav: `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.

## 4. Component Stylings

- **Primary CTA** — dark `#19171c` full pill, label TWK Lausanne 18/18 at 600/-0.36px in `#ffffff`, height 52px.
- **Nav link** — Inter 16/24 at 600/-0.352px in `#19171c`, no fill, 24px horizontal padding.
- **Feature card** — `border-radius:40px`, flat saturated or pale fill (`#cab3f8`, `#f2ecfd`, `#e6f4ff`, `#f2f1f3`), text in `#17082c` on lavender, no border.
- **Template tile** — `border-radius:20px` on `#f2f1f3`, holding a looping artboard preview; the pigment palette lives here.
- **Rounded section** — large decorative radii (`50px`, `375px`) and split radii (`0 0 80px 80px`, `0 50px 50px 0`) shape whole sections and image masks rather than components.
- **Floating help button** — circular `50%` dark bubble pinned bottom-right.
- **Hairline** — 1px `#e5e4e7`, used sparingly; the surface step usually does the separating.

## 5. Layout Principles

Nav is a ~72px transparent bar over the canvas: wordmark left, four Inter-600 links, then `Log in` and the dark pill CTA right. The page is a stack of generously spaced sections on white, each anchored by a large-radius fill; template and feature grids run 3-up with wide gutters. The hero is centred with the 115px headline as the dominant element. Spacing is loose — the design leans on whitespace and big radii rather than rules or containers.

## 6. Depth & Elevation

Radius scale: `20px` (tiles) · `40px` (cards) · `50px` (sections, pills) · `375px` (decorative masks) · `50%` (bubbles), plus split radii `0 0 80px 80px` and `0 50px 50px 0`.

Shadows — five-layer ambient stacks whose top layer is fully transparent, so the shadow fades out rather than ending:

```
0 69px 19px rgba(25,23,28,0),    0 44px 18px rgba(25,23,28,.01),
0 25px 15px rgba(25,23,28,.05),  0 11px 11px rgba(25,23,28,.09),
0 3px  6px  rgba(25,23,28,.10)
```

A fractional-pixel variant of the same curve exists (`0 56.1705px 15.4016px` … `0 1.81195px 4.52988px`), clearly generated rather than hand-written, and a very long-throw version reaching 237px. Note the shadow colour is the **ink** `rgba(25,23,28,…)`, not black.

Philosophy: shadow over border. Hairlines appear only twice on the page; separation is surface step + big radius + ambient shadow.

## 7. Motion

The house easing is a **spring published as `linear()`** — a ~60-stop list that rises past its target to **1.5182** around 20% and oscillates back to 1 by 99%:

```
linear(0 0%, 0.255 1%, 0.4449 2%, 0.6018 3%, 0.7355 4%, 0.8513 5%, 0.9525 6%,
       1.0413 7%, … 1.5182 20%, … 1.0024 93%, 1.0012 95%, 1 99%, 1 100%)
```

applied to `transform, color, border` at **0.3s**. Alongside it:

- `transform` — `1.2s cubic-bezier(0.19, 1, 0.22, 1)` (a long expo-out, for section reveals)
- `border-radius, box-shadow` — `0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)` — **radius animates**, so cards visibly change shape as they lift
- `background-color` — `0.3s linear`

## 8. Backgrounds, Effects & WebGL

No WebGL, canvas, backdrop-filter, blend modes or grain observed. The atmosphere is carried by looping video/animation inside template tiles and the hero, composited on flat neutral fills. A handful of gradient fills appear inside artwork only. Surfaces themselves are flat solids.

## 9. Do's and Don'ts

### Do
- Keep chrome monochrome — `#19171c` ink, `#f2f1f3` / `#e5e4e7` neutrals, white canvas.
- Set display type in TWK Lausanne 800 with a line-height **below** the font size and negative tracking (-3% at the hero).
- Use Inter 400/600 for everything read.
- Reach for big radii — 20px tiles, 40px cards, 50px+ sections.
- Build depth from five-layer ambient shadows tinted with the ink `rgba(25,23,28,…)`, fading to transparent at the top.
- Ease with the `linear()` spring at 0.3s and let overshoot be visible.
- Animate `border-radius` alongside `box-shadow` on hover.

### Don't
- Don't put the pigment palette (`#01b2fd`, `#a981ff`, `#f5ff63`) on buttons, nav or hairlines — it belongs on artboards.
- Don't use pure black for text or shadows; the ink is `#19171c`.
- Don't set display type at a line-height of 1.0 or above.
- Don't use a plain cubic-bezier ease for interactive feedback — the spring is the brand.
- Don't lean on borders; there are almost none.

## 10. Responsive Behavior

Not captured.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Surface `#f2f1f3` · Inset `#e5e4e7` · Text `#19171c` · Muted `#6e6e73` · Border `#e5e4e7` · Accent (pigment only) `#a981ff`
- Font: TWK Lausanne 800 display / Inter 400-600 body · Body: 16/24 at -0.32px · Radius: pill CTA / 20px tile / 40px card · Control height: 52px
- Focus: not captured · Motion: `linear()` spring overshooting to 1.5182 at 0.3s

<jitter_design_language>
A quiet, cool-grey studio rather than the bright gradients the motion-design category implies. White canvas over `#f2f1f3` and `#e5e4e7` neutrals with a faintly violet near-black ink `#19171c` (never pure black), `#6e6e73` muted and a single 1px `#e5e4e7` hairline used sparingly. Two families split cleanly: **TWK Lausanne at 800** for all display and controls, **Inter** for everything read — and every Lausanne role sets a line-height *below* its font size (hero 115/103.5 at -3.6px, card titles 24/22.8, buttons 18/18 at 600), so headlines stack tighter than they are tall; tracking is negative on every role but the 12px caption. Chrome is strictly monochrome: the CTA is a 52px dark pill, and the pigment palette — cyan `#01b2fd`, lavender `#a981ff`, acid yellow `#f5ff63`, violet `#7a40ed` — lives only inside template tiles and artboards, alongside soft card fills `#cab3f8`, `#f2ecfd`, `#e6f4ff`. Radii are large and soft: 20px tiles, 40px cards, 50px and 375px on sections, plus split radii like `0 0 80px 80px`. Depth is five-layer ambient shadow stacks tinted with the ink (`0 69px 19px rgba(25,23,28,0)` fading up to `0 3px 6px rgba(25,23,28,.10)`), never a border. The signature is the motion: the house easing is a **spring published as a 60-stop `linear()`** that overshoots to 1.5182 before settling, applied to transform/color/border at 0.3s, with `border-radius` animating alongside `box-shadow` at 0.5s so cards change shape as they lift. Feels: soft, studio-neutral, springy, quietly premium. Avoid: pigment in chrome, pure black, display line-heights at or above 1.0, plain cubic-bezier easing, border-led separation.
</jitter_design_language>