# Jitter — Design System
> A fast, collaborative motion design tool for the web.
- **Canonical:** https://uiuxskills.com/library/jitter
- **Source:** https://jitter.video
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:11:02.841Z

---

---
version: alpha
name: Jitter
description: A fast, collaborative motion design tool for the web.
tone: >-
  Professional, efficient, and encouraging. The voice is direct and benefit-oriented, focusing on
  speed and ease of use.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-dim: "#F9F9F9"
  on-surface: "#1A1A1A"
  on-primary: "#FFFFFF"
  outline: "#E5E5E5"
  error: "#DC2626"
  success: "#16A34A"
  info: "#2563EB"
  neutral: "#737373"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 48px
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 36px
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 30px
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 24px
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 20px
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 16px
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.info}"
  link-hover:
    textColor: "#1D4ED8"
  badge:
    backgroundColor: "{colors.surface-dim}"
    rounded: "{rounded.full}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "#DCFCE7"
    textColor: "{colors.success}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-neutral:
    backgroundColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px -1px rgba(0,0,0,0.1)
  lg: 0 10px 15px -3px rgba(0,0,0,0.1)
---

## Overview

Jitter is a high-performance motion design platform built for speed, accessibility, and professional collaboration. Its visual identity is clean, tech-forward, and minimal, designed to help creative teams integrate motion into their workflows without the overhead of traditional animation software.

## Colors

The color palette is strictly monochromatic with essential semantic accents, prioritizing high contrast and readability to maintain a professional, enterprise-ready aesthetic.

*   Primary (#000000): The core brand color used for high-impact text and primary CTAs.
*   Surface (#FFFFFF): The primary background color for the application and marketing site.
*   Surface-dim (inferred) (#F9F9F9): A subtle secondary background used to differentiate content sections.
*   On-surface (#1A1A1A): The primary text color, optimized for high readability.
*   On-primary (#FFFFFF): The text color used for buttons and other elements on dark backgrounds.
*   Outline (inferred) (#E5E5E5): The standard border color for cards, inputs, and dividers.
*   Error (inferred) (#DC2626): Semantic color reserved exclusively for destructive or error states.
*   Success (inferred) (#16A34A): Semantic color for positive feedback and completion states.
*   Info (inferred) (#2563EB): Semantic color for interactive links.
*   Neutral (inferred) (#737373): Muted text color for secondary metadata and helper text.

## Typography

The interface uses the Inter typeface exclusively, relying on a clear hierarchy of sizes to guide the user through complex motion workflows.

*   Display-lg (inferred): Used for high-impact hero section headers.
*   Headline-sm (inferred): Used for card titles and sub-section headers.
*   Body-md (inferred): The standard size for primary body content and paragraphs.
*   Label-sm (inferred): Used for small metadata, tags, and UI labels.

## Layout

The site utilizes a max-width container of 1320px with a modular grid system that scales fluidly for mobile and desktop. The page follows a logical flow: nav, hero, social-proof, features, customer-stories, use-cases, templates, and footer. The hero section is centered with a primary CTA and motion-based background. Spacing follows a consistent scale, with a base unit of 4px (xs) and a standard 16px (md) gutter applied between grid items.

## Elevation & Depth

Elevation is used sparingly to maintain a clean, flat aesthetic, relying on subtle shadows to differentiate elements. Elevation levels are inferred: `elevation.sm` provides a light lift for small UI elements, `elevation.md` is used for standard card components, and `elevation.lg` is reserved for overlays or modals where higher visual priority is required.

## Shapes

The brand employs a consistent medium-radius approach across the interface. The `rounded.md` (8px) token is the standard for cards and interactive components, providing a balance between a friendly, approachable feel and professional precision.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons are action-oriented and use `{colors.primary}` for primary actions. The `button-primary` uses `{colors.on-primary}` for text, while `button-secondary` uses a `{colors.surface}` background with an `{colors.outline}` border.

### Card
Cards are the primary container for content, using `{rounded.md}` and an `{colors.outline}` border. The `card-elevated` variant omits the border in favor of subtle shadow depth.

### Input Field
Input fields use `{rounded.sm}` and an `{colors.outline}` border. On focus, the border color transitions to `{colors.primary}` to provide clear visual feedback.

### Badge
Badges use `{rounded.full}` and a `{colors.surface-dim}` background. Semantic variants like `badge-success` and `badge-error` use specific background and text colors to convey status.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use `{colors.primary}` for secondary buttons. |
| Apply `{typography.display-lg}` for hero headers. | Avoid using `{typography.label-sm}` for body text. |
| Use `{rounded.md}` for all card components. | Do not mix different border-radius styles on one component. |
| Maintain `{spacing.md}` between grid items. | Avoid excessive use of `{elevation.lg}`. |
| Use `{colors.on-surface}` for high-contrast text. | Never use low-contrast text on `{colors.surface-dim}`. |
| Apply `{colors.outline}` for section dividers. | Do not use `{colors.error}` for non-destructive actions. |
| Use `{colors.info}` for all text-based links. | Avoid using non-brand colors for links. |
| Use `{rounded.sm}` for input field corners. | Do not use `{rounded.full}` for input fields. |

## Content Style

CTA labels are action-oriented and use imperative verbs (e.g., "Try Jitter", "Get started"). The tone is benefit-driven, focusing on the speed and ease of the motion design process.

Copy density is kept low; paragraphs are short and scannable, supported by frequent bullet points to break up technical information. Headings are declarative and concise.

## Imagery & Icons

The imagery style is mixed, utilizing high-quality product screenshots, clean vector icons, and professional photography for customer stories. Icons should follow a minimal, geometric shape language to match the brand's professional and efficient tone.