CURATED · OPEN · FREE

Pika

A bold, playful AI video generation platform with a clean, high-contrast interface.

aivideo

↓ Download design system (3 MB)Open in OpenDesign

Visit: https://pika.art

📦 Browse pack contents →

Identity DNA

AI video generationcreative toolplayfulbold

A playful yet powerful AI creative studio.

Color

#FFD184Accent

#0D0D0DInk

#222222Ink soft

#FCFAF7BG

#FFFFFFBG soft

rgba(207, 195, 255, 0.5)Line

Warm off-white background with sharp black typography and playful golden accents.

Typography

grotesque-sans · humanist-sans

display80px · 900
h148px · 700
h232px · 500
body17px · 400
caption14px · 300

Headlines are ultra-bold and uppercase, creating a strong, impactful visual hierarchy. · Body text is set in a lighter weight for readability against the bold headlines. · Typography is tightly set with negative letter spacing for a compact, modern feel.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Consistent 4px base unit with generous padding in sections (40px).

Surfaces

sm · 4px

md · 8px

lg · 18px

pill · 999px

1px solid rgba(207, 195, 255, 0.5)

0px 2px 0px 0px #111111 · 0px 4px 4px 0px rgba(0, 0, 0, 0.05)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Single-column centered hero with a wide content area below.

Motion & Interaction

150msmicro

200mssmall

300msmedium

cubic-bezier(0.23, 1, 0.32, 1)easing

Smooth color and background-color transitions on interactive elements. · Subtle transform transitions on buttons and cards.

Subtle color or background-color shifts on interactive elements. · Slight transform or opacity change.

Components

button High-contrast buttons with rounded corners; primary is dark with white text, secondary is light with dark text.
card Large, rounded cards with distinct background colors (purple, dark gray, orange) and bold typography.
chip Small, rounded tags (e.g., 'PIKA AGENT') with dark backgrounds and light text.
input Large, rounded text input area with a light gray background and integrated action buttons.
hero Centered hero with a massive, bold headline, sub-headline, and a prominent input field.

Voice & Don'ts

Tone Playful, energetic, and direct.
Headlines Bold, uppercase, and highly impactful.
CTAs Action-oriented and clear (e.g., 'Generate', 'Try on Web').

Don't use thin or light typography for headlines — screenshot shows ultra-bold, heavy-weight display text.
Don't use a pure white background — screenshot shows a warm off-white (#FCFAF7).
Don't use cool blues or greens as primary accents — screenshot shows warm golden-yellow (#FFD184) and purples.
Don't use sharp, square corners — screenshot shows large border-radius (18px) on cards and inputs.
Don't use small, cramped spacing — screenshot shows generous padding (40px) in sections.
Don't use dark mode as the default — screenshot shows a predominantly light interface with dark text.
Avoid: Overly technical jargon
Avoid: Passive language
Avoid: Weak or thin typography
Avoid: Cluttered layouts

Inside the pack — real screenshots

Pika — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

This is the design system for Pika, a playful and powerful AI video generation platform. The visual language is defined by a warm, off-white background (#FCFAF7) contrasted with sharp, ultra-bold black typography (#0D0D0D). Key accent colors include a golden-yellow (#FFD184) for primary actions and soft purples/oranges for card backgrounds. The typography is dominated by a heavy, grotesque-sans display font for headlines, creating a high-impact, energetic feel, while body text uses a cleaner humanist-sans. Layouts are spacious with generous padding. Critical design rules include: never use thin typography for headlines, always use the warm off-white background instead of pure white, and avoid cool color palettes in favor of the established warm accents. Avoid cluttered layouts and passive language.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko