Jitter

Overview

Jitter is a web-based motion design platform that democratizes animation creation for creative teams of all skill levels. The brand embodies 'Accessible Modernism'—a design philosophy that combines clean, purposeful interfaces with vibrant, energetic accents that celebrate creativity and forward momentum. The UI prioritizes clarity and speed: a bright white canvas (rgb(255, 255, 255)) serves as the foundation, while a signature purple accent (#7a40ed) draws attention to primary actions and moments of creative possibility. The emotional response is one of empowerment and flow—users feel capable, not overwhelmed, even when tackling complex animations.

Jitter's voice is conversational, encouraging, and precise. The brand speaks to creators in their language: direct, jargon-light, and focused on outcomes. Tone examples: 'Design in motion. Now with AI.' (confident, present-tense), 'Over 20,000 creative teams use Jitter to create stunning animations online' (social proof without hype). The vocabulary favors action verbs (create, design, animate, supercharge) and avoids corporate abstractions. Personality: approachable expert—knowledgeable but never condescending, energetic but grounded in craft.

Colors

Jitter's color system is rooted in a 'Clarity + Accent' philosophy: a neutral, light foundation (surface: #ffffff, on-surface: #19171c) ensures content legibility and focus, while a vibrant purple primary (#7a40ed) acts as the brand's signature accent, reserved for CTAs, interactive states, and moments of creative emphasis. The primary color appears on the hero CTA 'Try Jitter for free' (rendered as a rounded pill button with rgba(122, 64, 237, 1)) and signals the brand's forward-thinking, creative energy. Secondary accents include a bright cyan (#29a9ff) for supporting UI elements and a muted indigo (#5e6ad2) for tertiary actions and data visualization. The surface stack is carefully calibrated: surface-container-low (#f2f1f3) provides subtle depth for input fields and secondary surfaces,

Typography

Jitter's type system pairs TWK Lausanne (a geometric, contemporary typeface) for headlines and display text with Inter (a humanist sans-serif) for body and UI text. This pairing creates visual distinction between brand moments (headlines) and functional content (body), while maintaining cohesion through shared geometric principles. The display level (80px, 800 weight, -0.02em tracking) is reserved for hero headlines and establishes brand presence; headline-lg (48px, 700 weight) is used for section titles and major UI headings. Body text (16px, 400 weight, 24px line-height) is optimized for readability on screen, with generous line-height (1.5x) to reduce eye strain during extended use. Labels and UI text (14px, 600 weight, 20px line-height) use tighter tracking (0.01em) to reinforce hierar

Layout

Jitter uses a fluid, 12-column grid system with a max-width of 1280px, centered on the viewport. The page rhythm is driven by a semantic spacing scale: lg (40px) separates major sections (hero, features, testimonials), md (24px) creates breathing room within sections and between card groups, and sm (12px) is used for internal component padding and micro-spacing. The hero section spans full-width with centered content, using the display typography (80px) to command attention. Cards and content containers use a consistent 24px padding with 12px gaps between elements, creating a predictable, scannable layout. The gutter (24px) is applied to all horizontal edges on mobile and tablet, scaling to 40px on desktop viewports above 1024px. White-space is treated as a first-class design element—negat

Elevation & Depth

Jitter's elevation system is minimal and purposeful, using subtle shadows to create depth without visual noise. The system employs three levels: Level 1 (sm: 0 1px 2px rgba(0, 0, 0, 0.06)) is applied to cards and containers at rest, providing barely perceptible separation from the background. Level 2 (md: 0 3px 8px rgba(0, 0, 0, 0.15)) is triggered on hover or focus states, signaling interactivity and drawing the element forward. Level 3 (lg: 0 8px 24px rgba(0, 0, 0, 0.12)) is reserved for modals, dropdowns, and floating UI elements that must appear above all other content. No element uses a s

Shapes

Jitter's shape language is 'Soft-Technical'—rounded corners are used strategically to soften the geometric precision of the interface without sacrificing clarity or modernity. Buttons and primary CTAs use the full radius (9999px), creating pill-shaped forms that feel approachable and clickable; this is especially prominent on the hero CTA 'Try Jitter for free,' which uses a 48px height with 9999px border-radius to maximize visual impact. Cards and containers use lg (20px) radius, balancing softness with definition. Input fields and secondary UI elements use md (12px) radius, providing subtle r

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants: primary (purple background, white text, 9999px radius, 48px height, 12px vertical padding, 32px horizontal padding), secondary (light gray background with outline, dark text, 9999px radius, 48px height), and ghost (transparent background, purple text, 9999px radius, 48px height). All buttons use label-md typography (14px, 600 weight) and apply a 200ms transition on hover. Primary buttons trigger a box-shadow: 0 3px 8px rgba(122, 64, 237, 0.25) on hover, lifting the element and signaling readiness. Secondary buttons shift to surface-container-highest (#c3c3c6) on hover with a subtle shadow (0 1px 3px rgba(0, 0, 0, 0.08)). Ghost buttons fill with primary-container (#ede9f6) on hover, maintaining the