Pika DESIGN.md

AI video generation platform with a vibrant dark aesthetic — deep backgrounds, electric purple-pink brand accents, and video-canvas-first UI.

1. Visual Theme & Atmosphere

Pika makes AI video creation feel exciting and accessible. The design is bold and energetic — dark surfaces that contrast with vivid generated video previews, and a gradient pink-to-purple brand that signals creativity and motion. The UI centers on a prompt bar and a video output canvas, keeping the creative workflow front and center.

2. Color Palette & Roles

3. Typography Rules

css--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-size-xs: 11px;
--font-size-sm: 13px;
--font-size-base: 14px;
--font-size-md: 16px;
--font-size-lg: 20px;
--font-size-xl: 28px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-base: 1.5;

4. Component Stylings

css/* Gradient Button */
.button-generate {
  background: linear-gradient(135deg, #E040FB, #7B2FBE);
  color: #FFFFFF;
  border: none;
  border-radius: 100px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.button-generate:hover { opacity: 0.88; }

/* Prompt Input */
.prompt-bar {
  background: #141420;
  border: 1.5px solid #2A2A40;
  border-radius: 100px;
  padding: 14px 24px;
  font-size: 14px;
  color: #F2F2FF;
  width: 100%;
  transition: border-color 0.15s;
}
.prompt-bar:focus {
  outline: none;
  border-color: #E040FB;
  box-shadow: 0 0 0 3px rgba(224,64,251,0.12);
}
.prompt-bar::placeholder { color: #4A4A6A; }

/* Video Preview Card */
.video-card {
  background: #141420;
  border: 1px solid #2A2A40;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.video-card:hover {
  border-color: #E040FB;
  transform: translateY(-2px);
}
.video-card__preview {
  aspect-ratio: 16/9;
  background: #0A0A0F;
  position: relative;
}
.video-card__info {
  padding: 10px 12px;
}
.video-card__prompt {
  font-size: 12px;
  color: #8B8BAA;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Generation Progress */
.progress-bar {
  height: 3px;
  background: #2A2A40;
  border-radius: 100px;
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #E040FB, #7B2FBE);
  border-radius: 100px;
  transition: width 0.3s ease;
}

/* Style Preset Chip */
.style-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 100px;
  border: 1.5px solid #2A2A40;
  font-size: 12px;
  font-weight: 500;
  color: #8B8BAA;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  background: transparent;
}
.style-chip:hover {
  border-color: #E040FB;
  color: #F2F2FF;
}
.style-chip--active {
  border-color: #E040FB;
  background: rgba(224,64,251,0.1);
  color: #E040FB;
}

5. Layout Principles

6. Depth & Elevation

css.shadow-card { box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
.shadow-hover { box-shadow: 0 0 0 1px #E040FB, 0 8px 24px rgba(224,64,251,0.2); }
.shadow-modal { box-shadow: 0 16px 48px rgba(0,0,0,0.7); }

7. Do's and Don'ts

Do:

• Use the gradient (pink → purple) for the primary generate CTA
• Style chips for motion style selection (cinematic, anime, etc.)
• Show a gradient progress bar during video generation
• Video cards lift on hover with a magenta border glow

Don't:

• Don't use the magenta for error states — use red (#F87171)
• Don't add heavy chrome around the video output — let it breathe
• Don't use pill buttons for anything other than primary generation actions

8. Responsive Behavior

9. Agent Prompt Guide

You are designing for Pika — AI video generation platform.
Use near-black backgrounds (#0A0A0F) with card surfaces at #141420.
The primary CTA is a pill-shaped button with a gradient fill (pink #E040FB → purple #7B2FBE).
The prompt input is also pill-shaped, dark, with a magenta focus ring.
Video cards are 16:9 with dark backgrounds; they lift with a gradient border on hover.
Style preset chips are pill-shaped with a magenta active state.
Tone is bold, energetic, AI-creative, and motion-forward.