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
version: alpha name: Pika description: "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."
colors: primary: "#8B5CF6" on-primary: "#ffffff" primary-hover: "#7C3AED" secondary: "#EC4899" accent-orange: "#F97316" gradient-start: "#8B5CF6" gradient-mid: "#EC4899" gradient-end: "#F97316" ink: "#F1F0FF" ink-muted: "#8B8CA0" canvas: "#0D0D14" surface-1: "#13131F" surface-2: "#1A1A2E" border: "#2A2A40" video-bg: "#000000" generating: "#8B5CF6"
typography: display: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 52px fontWeight: 800 lineHeight: 1.05 letterSpacing: -0.03em body: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0
spacing: base: 8px scale: [4, 8, 12, 16, 24, 32, 48, 64, 96]
radius: sm: 6px md: 12px lg: 20px xl: 28px pill: 9999px
shadows: card: "0 2px 12px rgba(0,0,0,0.4)" elevated: "0 8px 32px rgba(0,0,0,0.5)" glow: "0 0 40px rgba(139,92,246,0.25)" video-glow: "0 0 60px rgba(139,92,246,0.2)"
motion: duration-fast: 100ms duration-base: 300ms easing: cubic-bezier(0.34, 1.56, 0.64, 1)
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.