Jitter

Overview

Jitter is a motion design platform that transforms complex animation workflows into intuitive, AI-assisted creative experiences. It serves designers, animators, and creative teams who demand both speed and precision—enabling professional-grade animations in minutes rather than hours. The brand aesthetic is "Refined Minimalism with Velocity"—a design language that pairs clean, geometric typography (TWK Lausanne for headlines, Inter for body) with a vibrant purple accent (#7a40ed) that signals creative energy and AI intelligence. The interface celebrates whitespace and clarity, allowing motion and color to carry emotional weight. Voice: direct, encouraging, and technically credible. Jitter speaks in active imperatives ("Design in motion," "Create stunning animations") and avoids jargon while respecting the user's expertise. Example sentence in brand voice: "Your idea becomes motion in seconds—no animation experience required."

Colors

The color system balances a luminous white canvas (#ffffff) with a sophisticated purple primary (#7a40ed) that anchors all interactive moments. Primary (#7a40ed) is used exclusively for CTAs, focus states, and brand-critical interactions—it signals "this is where creativity happens." The secondary accent, cyan (#29a9ff), provides a complementary highlight for secondary actions and data visualization. Tertiary brown (#6d6156) grounds the palette with warmth and appears in supporting UI elements and typography hierarchies. The surface stack progresses from pure white (surface: #ffffff) through carefully calibrated grays (surface-container-low: #ececef, surface-container: #e5e4e7, surface-container-high: #d7d7db) to enable subtle depth without visual noise. On-surface text is a near-black (#1

Typography

The type system uses a two-font pairing: TWK Lausanne (geometric, bold, 800 weight) for display and headline scales to convey creative confidence, and Inter (humanist sans-serif, 400–600 weights) for body and label scales to ensure readability at small sizes. Display (80px, 800 weight, -0.04em tracking) commands attention on hero sections and is reserved for primary messaging. Headline-lg (48px, 700 weight) anchors feature sections, while headline-md (32px, 600 weight) organizes content blocks. Body-lg (18px, 400 weight, 28px line-height) is used for feature descriptions and maintains 1.55 line-height ratio for comfortable reading. Body-md (16px, 400 weight) serves as the default paragraph text with 24px line-height (1.5 ratio). Label-md (14px, 600 weight, 0.01em tracking) is applied to bu

Layout

The layout system uses a 12-column grid with a max-width of 1280px, providing a fluid yet controlled canvas for content. The gutter (24px) is applied consistently between columns and sections, creating a rhythm that feels spacious without excess. Container padding uses the lg spacing token (40px) on desktop, reducing to md (24px) on tablet and sm (12px) on mobile. White-space is treated as a first-class design element—sections are separated by lg spacing (40px) vertically, allowing the eye to rest and content to breathe. The spacing scale (unit: 8px, xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is applied consistently to padding, margins, and gaps. Hero sections use xl spacing (64px) for top/bottom margins to create visual separation from navigation and supporting content. Cards and co

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids visual heaviness. Level 1 (Base/Surface): no shadow; elements sit flush on the white background. Level 2 (Raised Cards/Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and contained components. This shadow has a 3px vertical offset and 8px blur, creating a subtle lift that suggests interactivity without drama. Level 3 (Modals/Popovers/Hover States): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), with a 8px offset and 24px blur for pronounced separation. On hover, buttons and cards transition from L

Shapes

The shape philosophy is "Geometric Precision with Approachability"—sharp enough to feel technical and modern, rounded enough to feel welcoming. Buttons and primary CTAs use full radius (9999px), creating pill-shaped forms that are instantly recognizable and feel friendly. Cards and contained surfaces use md radius (12px), a subtle roundness that softens corners without appearing playful. Input fields and form elements use DEFAULT radius (8px), a minimal curve that maintains a technical aesthetic. Modals and overlays use lg radius (20px), slightly more generous than cards to signal elevation an

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses a purple background (#7a40ed) with white text, full radius (9999px), and 12px vertical / 32px horizontal padding, resulting in a 48px height. On hover, the background darkens to #6a2fd9 and the shadow expands to 0 6px 16px rgba(122, 64, 237, 0.3), creating a sense of lift and responsiveness. The transition occurs over 200ms with cubic-bezier(0.4, 0, 0.2, 1) easing. On active/press, the background further darkens to #5a1fc9 and the shadow compresses to 0 2px 4px, signaling that the click has been registered. Button-secondary uses a transparent background with a 2px purple border and purple text, allowing it to sit comfortably alongside primary buttons without visual competition. On hover, the

Do's and Don'ts

**Do**

• Do use the purple primary (#7a40ed) exclusively for CTAs, focus states, and brand moments—never dilute it with secondary uses.
• Do maintain at least 40px of vertical spacing (lg token) between major sections to allow content to breathe and users to scan.
• Do apply the full-radius (9999px) shape to all primary buttons and interactive elements to create instant visual recognition.
• Do use TWK Lausanne (800 weight) only for display and headline-lg scales; never use it for body text or labels.
• Do apply the 200ms cubic-bezier(0.4, 0, 0.2, 1) transition to all hover and focus states for consistent, responsive feedback.
• Do use the surface-container stack (lowest through highest) to create subtle depth without relying on shadows alone.

**Don't**

• Don't use the secondary cyan (#29a9ff) or tertiary brown (#6d6156) as primary CTAs—reserve purple for the most important actions.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) on any element; excessive shadows create visual clutter and reduce clarity.
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 20px, xl: 32px, full: 9999px)—consistency is critical.
• Don't mix TWK Lausanne and Inter within a single line of text; maintain clear typographic hierarchy by using one font per scale.
• Don't reduce padding below sm (12px) on interactive elements; insufficient padding makes buttons and inputs feel cramped and difficult to target.
• Don't apply color overlays or filters to the white background (#ffffff); the canvas must remain pure to preserve the minimalist aesthetic.