---
name: Pika
description: "Worth including for its bold, high-contrast typography and playful yet clean interface that balances personality with usability."
version: alpha

colors:
  background: "#FCFAF7"
  primary: "#0D0D0D"
  secondary: "#222222"
  tertiary: "#FFD184"
  bg-soft: "#FFFFFF"
  line: "rgba(207, 195, 255, 0.5)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "-2px"
  h1:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1px"
  h2:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 17px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 300
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 18px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*A playful yet powerful AI creative studio.*

## Colors

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

- **Background (`#FCFAF7`)** — uses `bg` token
- **Primary text (`#0D0D0D`)** — uses `ink` token
- **Secondary text (`#222222`)** — uses `ink-soft` token
- **Accent (`#FFD184`)** — uses `accent` token
- **Borders (`rgba(207, 195, 255, 0.5)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans

- 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.

## Layout

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

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

## Elevation & Depth

- 0px 2px 0px 0px #111111
- 0px 4px 4px 0px rgba(0, 0, 0, 0.05)
- Borders: 1px solid rgba(207, 195, 255, 0.5)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 18px
- `pill`: 999px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```