---
title: "Jitter design system"
variant: extended
source: https://jitter.video/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/jitter-video)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Jitter · Design System

> A bright canvas for motion, with playful bursts of colour.

**Theme:** light · **Industry:** design · **Source:** https://jitter.video/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Jitter’s homepage pairs a clean white canvas and bold black typography with soft violet accents and vivid motion-design previews. Spacious, centered storytelling gives way to compact feature grids and rounded product cards that make the tool’s capabilities tangible.

## North star

Keep the page predominantly white and typographic, using violet sparingly for action and colour-rich motion previews to demonstrate the product.

## Overview

The visual strategy starts with a near-white canvas that keeps attention on oversized black headlines and a small number of high-contrast actions. Violet is the brand’s main accent: it appears in the hero CTA, compact labels, and selected product imagery, while cyan and other vivid hues belong primarily to motion previews rather than the core interface palette. TWK Lausanne gives display headings their dense, tightly tracked character; Inter handles navigation, body copy, and small labels with a quieter rhythm. The page alternates between centered, spacious narrative sections and denser grids of rounded preview cards, maintaining a consistent alignment and generous white space. Product artwork is shown as colourful, cropped motion-design samples within pale neutral frames. Soft shadows add depth to selected cards without making the otherwise flat page feel heavy; subtle gray hairlines divide content where needed.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Mist | `#f2f1f3` | `--color-soft-mist` | surface | Pale neutral card and preview surface; also appears as a measured canvas tone, though screenshots show a predominantly white page. |
| Near Ink | `#19171c` | `--color-near-ink` | brand | Primary headings, body copy, navigation, links, and dark pill-shaped actions. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and clean backing for hero, testimonials, and feature sections. |
| Quiet Line | `#e5e4e7` | `--color-quiet-line` | neutral | Card surfaces and fine borders separating pale interface elements. |
| Muted Graphite | `#6e6e73` | `--color-muted-graphite` | semantic | Secondary descriptions and supporting text beneath headlines and feature titles. |
| Jitter Violet | `#a981ff` | `--color-jitter-violet` | accent | Primary hero CTA and prominent violet gradient or product-card accents. |
| Lavender Haze | `#d0bafe` | `--color-lavender-haze` | accent | Lighter endpoint in the violet gradient, adding softness to selected accent treatments. |
| Plum Shadow | `#140726` | `--color-plum-shadow` | accent | Dark endpoint of a purple gradient and occasional text detail; not a dominant page colour. |
| Electric Iris | `#711de2` | `--color-electric-iris` | accent | Saturated purple gradient endpoint and small accent text, not the primary interface colour. |
| Silver Tint | `#d7d7db` | `--color-silver-tint` | neutral | Minor muted text detail; keep it subordinate to the stronger charcoal and gray text. |

### Semantic aliases

`--color-canvas` → `#f2f1f3` (Soft Mist) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#e5e4e7` (Quiet Line) · `--color-text` → `#19171c` (Near Ink) · `--color-text-muted` → `#6e6e73` (Muted Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e5e4e7` (Quiet Line) · `--color-accent` → `#a981ff` (Jitter Violet) · `--color-accent-2` → `#d0bafe` (Lavender Haze) · `--color-accent-3` → `#711de2` (Electric Iris)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#19171c` | `#f2f1f3` | 15.8:1 | AAA |
| `#19171c` | `#ffffff` | 17.79:1 | AAA |
| `#19171c` | `#e5e4e7` | 14.05:1 | AAA |
| `#6e6e73` | `#f2f1f3` | 4.5:1 | AA |
| `#6e6e73` | `#ffffff` | 5.07:1 | AA |
| `#6e6e73` | `#e5e4e7` | 4:1 | AA-large |
| `#ffffff` | `#f2f1f3` | 1.13:1 | fail |
| `#ffffff` | `#e5e4e7` | 1.27:1 | fail |
| `#a981ff` | `#f2f1f3` | 2.57:1 | fail |
| `#a981ff` | `#ffffff` | 2.89:1 | fail |

### Gradients

- `linear-gradient(rgb(169, 129, 255) 0%, rgb(208, 186, 254) 100%)`
- `linear-gradient(rgb(20, 7, 38) 0%, rgb(113, 29, 226) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600 | Navigation, body copy, captions, and compact card labels. | Inter |
| TWK Lausanne | `--font-display` | webfont | 600, 800, 700, 750 | Display headlines, section headings, and prominent CTA links. | Inter |

- **Inter:** Use regular weight for reading text and a restrained, slightly tight tracking; keep labels concise and casing natural.
- **TWK Lausanne:** Use bold to extra-bold weights, tight negative tracking, and compact line-height for confident, closely stacked headlines.

### Type scale — Perfect Fourth (ratio ≈ 1.351, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 750 | 1 | -0.04em | — | TWK Lausanne | Large hero or standout campaign headline. |
| h1 | 48px | 800 | 1 | -0.04em | — | TWK Lausanne | Primary hero headline. |
| h2 | 40px | 800 | 1 | -0.037em | — | TWK Lausanne | Major section headings. |
| h3 | 36px | 700 | 0.95 | -0.017em | — | TWK Lausanne | Feature and testimonial headings. |
| h4 | 21px | 800 | 0.95 | -0.02em | — | TWK Lausanne | Card and subsection titles. |
| body | 16px | 400 | 1.5 | -0.02em | — | Inter | Paragraphs and feature descriptions. |
| caption | 12px | 400 | 1.4 | 0 | — | Inter | Compact template labels and attribution details. |
| nav | 16px | 400 | 1.5 | -0.022em | — | Inter | Top-level navigation links. |
| link | 20px | 600 | 1 | -0.01em | — | TWK Lausanne | Prominent calls to action and feature links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 3, 4, 5, 8, 10, 12, 20, 30, 40, 44, 50, 60 px.
- Section rhythm 60px · element gap 12px · card padding 11px · max content width 860px.

A centered desktop composition uses a measured 860px page max width, with a restrained navigation row above the hero. The hero is center-aligned, followed by a logo strip and wide product-preview cards. Later sections alternate between centered statements, split feature layouts, and multi-column grids. Measured spacing uses a 4px base unit, with comfortable density, a 60px section gap, and a 12px element gap. Keep the page airy and let card-heavy sections provide the main density changes.

## Shape & elevation

- Radius: card `40px` · nav `20px` · link `9999px` · xs `20px` · sm `40px` · pill `9999px`
- Shadow `xl` (card): `rgba(25, 23, 28, 0) 0px 237px 66px 0px, rgba(25, 23, 28, 0.01) 0px 152px 61px 0px, rgba(25, 23, 28, 0.05) 0px 85px 51px 0px, rgba(25, 23, 28, 0.09) 0px 38px 38px 0px, rgba(25, 23, 28, 0.1) 0px 9px 21p`
- Shadow `xl-2` (text): `rgba(0, 0, 0, 0.01) 0px 63px 25px 0px, rgba(0, 0, 0, 0.05) 0px 35px 21px 0px, rgba(0, 0, 0, 0.09) 0px 16px 16px 0px, rgba(0, 0, 0, 0.1) 0px 4px 9px 0px`
- Shadow `hairline` (heading): `rgb(255, 255, 255) 1px 0px 0px 0px, rgb(255, 255, 255) -1px 0px 0px 0px`
- Shadow `xl-3` (card): `rgba(0, 0, 0, 0) 0px 187px 52px 0px, rgba(0, 0, 0, 0.01) 0px 119px 48px 0px, rgba(0, 0, 0, 0.05) 0px 67px 40px 0px, rgba(0, 0, 0, 0.09) 0px 30px 30px 0px, rgba(0, 0, 0, 0.1) 0px 7px 16px 0px`
- Shadow `xl-4` (card): `rgba(0, 0, 0, 0.01) 0px 197px 79px 0px, rgba(0, 0, 0, 0.03) 0px 111px 67px 0px, rgba(0, 0, 0, 0.05) 0px 49px 49px 0px, rgba(0, 0, 0, 0.05) 0px 12px 27px 0px`
- Shadow `hairline-2` (heading): `rgb(25, 23, 28) 1px 0px 0px 0px, rgb(25, 23, 28) -1px 0px 0px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)` on interactive elements.

Most sections are flat against white, with subtle pale card surfaces and fine gray borders. Product-preview cards use large measured corner radii, while selected artwork gains soft, layered shadows for depth. Avoid heavy outlines or persistent dark panels; contrast comes primarily from typography and colourful media.

## Imagery

Use product UI and motion-design previews rather than decorative lifestyle photography. Samples are colourful, varied, and often presented as cropped posters, animation frames, or interface demonstrations inside pale, rounded cards. Keep the core layout quiet so artwork carries the colour; use shadows sparingly to lift selected previews. Brand and customer logos appear as a simple monochrome row.

## Components

### Navigation

Centered horizontal navigation with the Jitter wordmark, plain dark links, account access, and a dark rounded signup pill.

### Hero

Centered announcement capsule, tightly stacked bold headline, and violet pill CTA, followed by social proof and a monochrome logo row.

### Template preview cards

Large pale cards with rounded corners, prominent motion-design artwork, and compact Inter labels and template links.

### Feature cards

Grid of rounded pale preview panels pairing colourful product imagery with short bold titles and muted descriptions.

### Testimonial

Large centered bold quote with selected words emphasized by colourful motion artwork, followed by a small author attribution.

### Capability grid

Compact feature descriptions arranged in columns, with small icons, bold labels, and muted supporting copy.

### Team feature carousel

Rounded, horizontally arranged feature panels, including violet and cyan accents, product screenshots, and concise copy.

### Measured component styles

- **Primary button**: transparent background · text #19171c · radius 0px · padding 0px · 600 18px TWK Lausanne
- **Link** (“Try Jitter for free”): transparent background · text #19171c · radius 0px · padding 0px · 600 20px TWK Lausanne
- **Card** (“The Track: Poster Open template ↗︎ The T”): background #f2f1f3 · text #19171c · radius 40px · padding 0px 0px 44px 0px · 400 12px Inter
- **Navigation item** (“Main navigation Product Submenu 0 Import”): transparent background · text #19171c · radius 0px · padding 0px · 400 18px Inter

## Do

- Use white as the dominant page background.
- Set headlines in bold, tightly tracked display type.
- Reserve violet for calls to action and selected highlights.
- Let motion previews provide most of the vivid colour.
- Alternate spacious centered sections with compact grids.
- Use rounded pale cards to frame product imagery.

## Don't

- Do not turn the whole page into a purple interface.
- Do not use dense, edge-to-edge text blocks.
- Do not add heavy borders around every component.
- Do not let product artwork overpower the headline hierarchy.
- Do not use generic decorative imagery in place of product previews.
- Do not invent additional palette colours for interface elements.

## Agent prompt

Build a new page in Jitter’s visual style: keep Gallery White (#ffffff) dominant, with Near Ink (#19171c) for headlines, body text, navigation, and dark actions. Use Soft Mist (#f2f1f3) and Quiet Line (#e5e4e7) for restrained card surfaces and separators. Apply Jitter Violet (#a981ff) selectively to the primary CTA and small highlights; Lavender Haze (#d0bafe), Plum Shadow (#140726), and Electric Iris (#711de2) belong in limited gradients, not broad page fills. Use bold, tightly tracked TWK Lausanne-style headings and readable Inter-style supporting text. Center the hero, then alternate generous narrative sections with rounded product-preview grids and feature layouts. Use colourful motion-design imagery as the main source of visual variety. Keep shadows soft, card borders subtle, and spacing comfortable. Match the supplied measured values rather than inventing new sizes or colours.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered navigation and hero, followed by social proof and a horizontal logo row. | announcement link, primary CTA, customer proof | bold stacked headline, violet pill CTA, monochrome logo strip |
| 2 | gallery | Wide horizontal row of large template previews. | open template links, browse examples | rounded pale cards, large artwork, compact captions |
| 3 | other | Single-column statement with generous surrounding white space. | brand explanation | large statement, minimal framing |
| 4 | how-it-works | Centered section heading with a vertical sequence of feature and product demonstrations. | introduce workflow, show product outcome | centered heading, stacked media, colourful demo panels |
| 5 | feature-grid | Centered section introduction followed by a multi-column feature grid. | explore features, scan capabilities | rounded preview cards, short card titles, dark pill link |
| 6 | testimonials | Single centered testimonial with compact author attribution. | social proof, customer attribution | oversized quote, highlighted phrase, small author row |
| 7 | feature-grid | Two-column introduction followed by a two-column set of feature demonstrations. | explain team workflow, show production features | split introduction, paired media cards, compact captions |
| 8 | testimonials | Centered quote with a small identity and role row. | social proof, author attribution | large bold quote, colourful phrase emphasis, compact avatar |
| 9 | product-showcase | Left-aligned introduction followed by a horizontally browsable set of feature cards. | carousel browsing, highlight collaboration benefits | rounded cards, violet and cyan panels, product screenshots |
| 10 | cta | Centered label, headline, and supporting copy. | discover templates, encourage exploration | small violet label, bold stacked headline, centered copy |

## Source CSS custom properties (selected)

```css
--bg-color: #e6f4ff;
--primary-color: #29a9ff;
--primary-color-alt: #29a9ff;
--secondary-color: #29a9ff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/jitter-video