Pika
An AI video generation platform with a dark, cinematic canvas (#0D0D14 deep navy-dark) and a vibrant gradient identity that moves from electric purple (#8B5CF6) through hot pink (#EC4899) to warm orange — a palette that reads as generative AI energy made visual. The interface is minimal by design: a prompt input, a video output, and generation options. Marketing uses the gradient heavily to suggest creativity, velocity, and the limitless nature of generative media. Typography uses Inter or a geometric grotesque at bold weights with tight tracking. The system reads as consumer-AI-native: playful, immediate, and slightly magical.
Color Tokens
1. Visual Theme & Atmosphere
Pika makes video generation feel like magic, and the visual design commits to that feeling. The deep navy-dark canvas recedes completely behind the generated video output — the product is the video, not the UI. The purple-to-pink-to-orange gradient is the brand's main expressive tool, appearing on CTAs, loading states, and marketing imagery. It communicates the generative, flowing, impossible-to-predict nature of AI video creation. The interface is intentionally simple: don't overthink the controls, just describe what you want.
2. Color System
- Canvas: #0D0D14 — deep, rich navy-dark; cinematic and immersive
- Purple primary: #8B5CF6 — brand start color, primary CTAs, generating indicator
- Pink secondary: #EC4899 — gradient midpoint, hover accents
- Orange accent: #F97316 — gradient end, warmth anchor
- The gradient: The three colors together are Pika's visual signature — always moving, always generative
- Glow: Purple box-glow on active generation — the visual feedback that something is being created
- Video bg: Pure black behind generated video output
3. Typography
Inter at 800 weight for display — bold and direct at the marketing scale. The product UI is minimal, so there's little body text to style. Prompt input uses 16px regular weight — approachable, conversational. Options and settings labels are small (13px) and muted.
4. Components & Patterns
- Prompt input: Large, centered, full-width text field — the primary interaction surface
- Video output: Centered video player, dark background, gradient-bordered frame during generation
- Generate button: Gradient fill (purple→pink), large, prominent below the input
- Style controls: Horizontal pills for aspect ratio, motion amount, camera control
- Video grid: Generated history as thumbnail grid, gradient overlay on hover
- Generation progress: Animated gradient progress bar with purple glow
5. Spacing & Layout
App: centered single-column, max 800px for the generation interface. Full-viewport dark background. Video output at 16:9 ratio, width 640–800px. Generation history below in responsive grid. Marketing: 1280px max, dramatic full-bleed gradient sections.
6. Motion & Interaction
Generation progress is the signature animation — a looping gradient shimmer around the video container that resolves into the final video. Prompt submission has a spring-scale on the generate button. Video thumbnail hover plays a preview GIF. The entire experience prioritizes the "wow" of the output moment.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for