---
title: "Pika design system"
variant: extended
source: https://pika.art/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/pika-art)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Pika · Design System

> Expressive creative tools, framed with editorial restraint

**Theme:** light · **Industry:** ai · **Source:** https://pika.art/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Pika pairs a restrained warm-neutral interface with immersive creative imagery and confident, oversized typography. Spacious product and audience sections lead into dark research, news, and footer bands.

## North star

Keep the interface quiet and spacious so oversized typography and vivid creative media remain the focal point.

## Overview

The page uses a warm off-white canvas (#faf8f4) as its visual anchor, letting vivid creator imagery carry most of the color. Near-black surfaces and white text create a deliberate contrast in the lower research and news sections, while the neutral palette keeps interface elements quiet. Telka Extended sets uppercase, emphatic display and main headings; Telka handles navigation, body copy, labels, and controls. The first screen is a full-bleed video or image composition with the headline and supporting copy layered over it. Below, broad intervals of whitespace separate concise product demonstrations, audience-focused media cards, and a developer membership feature. Rounded media and pill-shaped CTAs soften the otherwise crisp editorial layout. Fine borders, not prominent shadows, define selected dark-mode cards and navigation treatments. Accent hues appear mainly in creative media or branded content, not as a dominant interface color.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Cream | `#faf8f4` | `--color-gallery-cream` | brand | Primary canvas across the hero, product features, audience showcase, developer promotion, and footer. |
| Soft Black | `#111111` | `--color-soft-black` | surface | Inverse surface for research and news sections; also used for dark text and controls. |
| Warm Gray | `#757472` | `--color-warm-gray` | neutral | Primary muted text on light backgrounds, including explanatory copy and supporting labels. |
| Charcoal | `#222222` | `--color-charcoal` | surface | Secondary dark surface, notably the footer and dark interface areas. |
| Ash Gray | `#b6b4b2` | `--color-ash-gray` | neutral | Muted text on dark surfaces, where it supports low-emphasis copy. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | Hero headline and copy over imagery, plus high-contrast light CTA fills. |
| Deep Graphite | `#1e1e1e` | `--color-deep-graphite` | surface | Additional dark section and media-support surface, subordinate to the main near-black. |
| Stone Haze | `#989795` | `--color-stone-haze` | semantic | Gradient stop in section treatment; not a defining flat interface color. |
| Border Charcoal | `#393838` | `--color-border-charcoal` | semantic | Hairline borders and footer or link boundaries on dark surfaces. |
| Pale Taupe | `#bbb9b7` | `--color-pale-taupe` | neutral | Low-emphasis navigation text and secondary interface labels. |
| Slate Edge | `#585857` | `--color-slate-edge` | semantic | Card and navigation outlines, most visible as subtle borders against dark treatments. |
| Linen Mist | `#f4f3ef` | `--color-linen-mist` | neutral | Faint supporting surface tone; secondary to the main warm canvas. |
| Ink Gray | `#2e2e2e` | `--color-ink-gray` | semantic | Occasional dark heading, button, or interface detail against light surfaces. |

### Semantic aliases

`--color-canvas` → `#faf8f4` (Gallery Cream) · `--color-surface` → `#111111` (Soft Black) · `--color-surface-2` → `#222222` (Charcoal) · `--color-surface-3` → `#1e1e1e` (Deep Graphite) · `--color-text` → `#757472` (Warm Gray) · `--color-text-muted` → `#faf8f4` (Gallery Cream) · `--color-text-subtle` → `#b6b4b2` (Ash Gray) · `--color-border` → `#393838` (Border Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#757472` | `#faf8f4` | 4.4:1 | AA-large |
| `#757472` | `#111111` | 4.04:1 | AA-large |
| `#757472` | `#222222` | 3.41:1 | AA-large |
| `#757472` | `#1e1e1e` | 3.57:1 | AA-large |
| `#faf8f4` | `#111111` | 17.8:1 | AAA |
| `#faf8f4` | `#222222` | 15:1 | AAA |
| `#faf8f4` | `#1e1e1e` | 15.72:1 | AAA |
| `#b6b4b2` | `#faf8f4` | 1.95:1 | fail |
| `#b6b4b2` | `#111111` | 9.14:1 | AAA |
| `#b6b4b2` | `#222222` | 7.7:1 | AAA |

### Gradients

- `linear-gradient(to top, oklab(0.177637 0.00000810623 0.00000356138 / 0.4) 0%, rgba(0, 0, 0, 0) 30%)`
- `linear-gradient(to top, oklab(0.177637 0.00000810623 0.00000356138 / 0.6) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(oklab(0.999994 0.0000455677 0.0000200868 / 0.8) 0%, oklab(0.999994 0.0000455678 0.0000200868 / 0.5) 70%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(90deg, rgb(128, 110, 202) -34%, rgb(207, 195, 255) -22.67%, rgb(255, 210, 253) -11.33%, rgb(255, 247, 133) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Telka | `--font-body` | webfont | 400, 500 | Navigation, body copy, section headings, captions, buttons, links, and labels. | Inter |
| Telka Extended | `--font-display` | webfont | 400, 500, 700 | Display and main campaign headings, including the oversized hero statement. | Space Grotesk |

- **Telka:** Use regular and medium weights for readable interface text; controls and links are uppercase with pronounced tracking.
- **Telka Extended:** Use bold for display and medium for the main heading; uppercase setting and tight display leading create impact.

### Type scale — Perfect Fourth (ratio ≈ 1.294, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72.5px | 700 | 0.9 | 0 | uppercase | Telka Extended | Oversized uppercase hero and campaign display headlines. |
| h1 | 54px | 500 | 1.04 | 0.01em | uppercase | Telka Extended | Primary uppercase page or section headline, especially the hero. |
| h2 | 28px | 400 | 1.25 | 0.02em | — | Telka | Feature and editorial section headings. |
| h3 | 26px | 400 | 1.2 | 0 | — | Telka Extended | Product and media feature titles. |
| h4 | 24px | 500 | 1.25 | 0.02em | — | Telka | Smaller subsection headings and promotional titles. |
| body | 20px | 400 | 1.25 | 0.02em | — | Telka | Introductory and explanatory copy beside creative media. |
| caption | 16px | 400 | 1.35 | 0.02em | — | Telka | Card descriptions, metadata, and supporting labels. |
| button | 16px | 500 | 0.94 | 0.1em | uppercase | Telka | Uppercase CTA labels with strong letter spacing. |
| nav | 17px | 400 | 1 | 0 | — | Telka | Header navigation and top-level site links. |
| link | 16px | 500 | 0.94 | 0.1em | uppercase | Telka | Uppercase text links and secondary CTA labels. |
| eyebrow | 16px | 500 | 0.94 | 0.1em | uppercase | Telka | Small uppercase section labels and pre-headings. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 12, 16, 20, 21, 24, 32, 36, 48, 64, 108 px.
- Section rhythm 108px · element gap 12px · card padding — · max content width —.

The page alternates full-bleed media with centered or modular content areas. The hero layers its heading and copy over a large image or video; later sections use card grids, stacked product rows, and a split developer promotion. Content alignment shifts between centered introductions and left-aligned editorial blocks. Generous section gaps create a slow, spacious rhythm, while dense media galleries and news cards bring local variation. Keep the canvas open rather than adding persistent panels or an invented fixed-width grid.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `12px` · nav `8px` · link `12px` · xs `8px` · sm `12px` · md `16px` · pill `9999px`
- Shadow `inset` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(13, 13, 13, 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.23, 1, 0.32, 1)` on interactive elements.

The page is predominantly flat: section backgrounds and whitespace establish hierarchy instead of shadows. Use fine, restrained borders for select dark cards and navigation elements. Layer hero text and subtle scrims directly over media; reserve rounded treatments for cards, media, and pill-shaped CTAs rather than adding floating panels.

## Imagery

Use cinematic, full-bleed creator imagery and video as the main source of color and atmosphere. Product examples appear in rounded media cards with short overlaid labels and subtle dark scrims for legibility. The hero features a tightly framed portrait with textured styling; later cards show varied creative outputs. Treat image colors as content rather than extending them into the interface palette.

## Components

### Pill CTA

Use a white fill with near-black text for the primary CTA; secondary actions can use a transparent fill and fine light border. Keep labels uppercase and tracked.

### Floating navigation

Place the compact site links over the hero media, with dark translucent treatment and subtle inset definition. Pair with light branding and a high-contrast Try Pika pill.

### Hero overlay

Set the large uppercase headline low on the media, with a concise supporting paragraph and primary action arranged alongside it.

### Product feature row

Show a rounded preview beside a quiet, light product information panel; stack additional tools as compact, labeled rows.

### Creative media card

Use rounded image or video cards with short white overlay copy and a dark gradient scrim where needed for contrast.

### Dark editorial feed

Group research and news content on near-black sections with white headings, muted descriptions, subtle dividers, and image-led article cards.

### Footer link columns

Set resource links in grouped columns on charcoal, with muted labels and a restrained horizontal divider.

### Measured component styles

- **Primary button** (“Try Pika”): background #ffffff · text #111111 · radius 3.35544e+07px · padding 0px 20px · 500 14px Telka
- **Secondary button** (“LEARN MORE”): transparent background · text #faf8f4 · border 1px solid #fdfcfa · radius 3.35544e+07px · padding 0px 24px · 500 16px Telka · uppercase
- **Link** (“Video Studio Generate anything from a sh”): transparent background · text #111111 · radius 16px · padding 24px · 500 15px Telka
- **Card** (“Craft the exact image you need TRY IMAGE”): background #111111 · text #111111 · radius 16px · padding 0px · 500 15px Telka
- **Navigation item** (“AI Video AI Image AI Audio Pricing Enter”): transparent background · text #111111 · radius 0px · padding 0px · 500 15px Telka

## Do

- Let creator media dominate the hero and feature areas.
- Use the warm off-white canvas for light sections.
- Switch to near-black for editorial and news bands.
- Use Telka Extended for confident uppercase display headlines.
- Keep supporting copy concise and visually secondary.
- Use rounded media and pill-shaped CTA treatments.
- Separate major sections with generous whitespace.

## Don't

- Do not turn illustration colors into persistent brand UI colors.
- Do not crowd the hero with interface panels.
- Do not rely on heavy shadows to create hierarchy.
- Do not apply uppercase display styling to all body text.
- Do not add decorative gradients as a dominant brand motif.
- Do not make every section dark or card-heavy.
- Do not invent measurements absent from the supplied data.

## Agent prompt

Build a new Pika-style page with an editorial, media-led composition. Use Gallery Cream (#faf8f4) for the main canvas, Soft Black (#111111) and Charcoal (#222222) for selected inverse sections, Warm Gray (#757472) for muted light-theme copy, and white (#ffffff) for text over imagery and primary CTA fills. Keep accent colors inside creative media rather than treating them as interface chrome. Use Telka or a close sans-serif substitute for interface text and Telka Extended-style uppercase display headings. Pair full-bleed video or photography with spacious product rows and rounded media cards. Keep controls pill-shaped, borders fine, and shadows minimal. Alternate calm light sections with dark editorial bands, using concise copy and substantial whitespace to preserve the page’s visual rhythm.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed hero media with overlaid navigation, large lower-left headline, and supporting CTA copy. | Hero CTA, Overlaid navigation, Model lineup | Full-bleed video, Uppercase display type, White pill button, Image scrim |
| 2 | feature-grid | Centered introduction followed by a broad media preview and stacked tool rows. | Browse tools, Explore all apps | Rounded preview, Stacked feature rows, Minimal light panels |
| 3 | product-grid | Centered audience intro above an asymmetric grid of image-led creative cards. | Audience tabs, Explore examples, Card links | Asymmetric media grid, Rounded cards, Overlay labels |
| 4 | gallery | A wide, multi-column stream of creator media and video tiles. | Browse examples, Creator attribution | Media mosaic, Rounded imagery, Overlay controls |
| 5 | cta | Full-bleed promotional band with identity at left and concise offer plus CTA at right. | Join the club, Developer offer | Split alignment, Soft gradient atmosphere, Pill CTA |
| 6 | content-feed | Dark editorial section with a prominent introduction alongside a compact list of research links. | Read research, Learn more | Near-black band, Fine dividers, Muted link text |
| 7 | content-feed | Dark section with an introductory heading and a three-column image-led news feed. | Browse articles, See blog | Article thumbnails, Short descriptions, Light text on dark |
| 8 | footer | Charcoal footer with a brand and social row above grouped navigation columns. | Navigate product, Find resources, Social links | Link columns, Horizontal divider, Muted labels |

## Source CSS custom properties (selected)

```css
--ds-primary-100: #0d0d0d08;
--ds-primary-200: #0d0d0d0d;
--ds-primary-300: #0d0d0d1a;
--ds-primary-400: #0d0d0d40;
--ds-primary-500: #22222280;
--ds-primary-600: #2229;
--ds-primary-700: #2e2e2e;
--ds-primary-800: #222;
--ds-primary-900: #111;
--ds-accent-100: #cfc3ff08;
--ds-accent-200: #cfc3ff0d;
--ds-accent-300: #cfc3ff1a;
--ds-accent-400: #cfc3ff33;
--ds-accent-500: #cfc3ff40;
--ds-accent-600: #cfc3ff80;
--ds-accent-700: #cfc3ff;
--ds-accent-800: #b8a8f5;
--ds-accent-900: #806eca;
--ds-timeline-scrim-accent: #efecff;
--ds-attention-surface: #f8f8f8;
--ds-brand: #cfc3ff;
--ds-brand-foreground: #111;
--ds-destructive-foreground: #fff;
--ds-radius-xs: 8px;
--ds-radius-sm: 12px;
--ds-radius-row: 6px;
--ds-radius-dialog: 16px;
--ds-radius-md: 16px;
--ds-radius-lg: 18px;
--ds-radius-xl: 24px;
--ds-radius-xxl: 44px;
--ds-control-bg: #efefef;
--ds-control-bg-hover: #e5e5e5;
--ds-control-bg-pressed: #dcdcdc;
--ds-shadow-1: 0 1px 4px #0d0d0d06, 0 4px 12px -3px #0d0d0d0d;
--ds-shadow-2: 0 1px 2px #0d0d0d0a, 0 4px 12px -2px #0d0d0d14, 0 8px 20px -8px #0d0d0d1a;
--ds-shadow-3: 0 1px 2px #0d0d0d0a, 0 4px 10px #0d0d0d0f, 0 12px 28px -6px #0d0d0d1a;
--ds-shadow-4: 0 2px 4px #0d0d0d0a, 0 8px 20px -4px #0d0d0d1a, 0 24px 48px -12px #0d0d0d2e;
--ds-shadow-graphic: 0 1px 2px #0d0d0d0a, 0 4px 12px -2px #0d0d0d14, 0 8px 20px -8px #0d0d0d1a;
--ds-shadow-pop: 0 2px 4px #0d0d0d0a, 0 8px 20px -4px #0d0d0d1a, 0 24px 48px -12px #0d0d0d2e;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/pika-art