What is Pika's primary brand color?

Pika's single chromatic move is a warm cream wired inline as the display-text color, the wordmark fill, and the email-CTA background. It is not declared as a CSS custom property in the captured root scope — only `--color-white` (#ffffff) and `--color-black` (#000000) are exposed — so the cream lives as an inline value. The hue carries the wordmark on the cream-canvas left half, the 32px Telka Extended display headline on the near-black right half, and the email-button fill that sits beneath the three OAuth buttons. Everything else on the captured surface is pure white text, near-black ink, or one of two near-black surface tones.

What typeface does Pika use, and what should I use as a substitute?

Pika runs two custom typefaces from the Telka family: Telka (the standard geometric sans) for every body, link, and OAuth-button label, and Telka Extended (a wide-condensed display cut) for the single uppercase display headline. Body sits at 12-16px in weights 300 or 450; the display sits at 32px in weight 900 with uppercase transform and 0.32px positive tracking. The heaviest weight on the page is reserved for that one block. Open-source substitutes: Inter at the same body weights for Telka, and Industry or Druk Wide at weight 900 for the Telka Extended display tier.

Why does Pika use a vertical 50/50 split instead of a single-color hero?

The split is the brand statement. Pika is an idea-to-video platform — the left half holds the auto-playing video artifact (a Pikaformances demo) on a warm cream floor, and the right half holds the sign-in stack on a near-black floor. The two halves are aligned on a hard vertical seam at exactly 50% page width; there is no border, no gradient, no atmospheric transition. The composition reads as both the brand canvas (left) and the operator canvas (right) at once, and the cream-vs-black contrast does all the structural work a navigation rail or hero gradient would normally do.

What is Pika's corner-radius philosophy?

The radius scale is conservative-small. The dominant value is 6px (used on the OAuth buttons, the email CTA, and the video tile), with a 10px secondary on the footer-chip set. There is no pill radius on the entry surface and no 12px-or-higher tier; even the video tile that anchors the left half sits at 6px rather than a softer 12 or 16. The tightness keeps the components reading as functional UI controls rather than decorative chrome, which preserves the brand's compositional play: the canvas is doing the visual work, the components stay quiet.

Can I use this DESIGN.md to build my own AI-video product surface?

Yes — the file feeds cleanly into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Pika's specific moves: a vertical 50/50 canvas split, the single warm cream voltage held back for display + wordmark + email-CTA fill only, Telka Extended weight 900 reserved for one uppercase display moment per surface, and white OAuth buttons sitting flat with no card chrome. You can also reference values directly — every hex, font name, radius, and spacing value is a quoted scalar. One caveat: the captured surface is a sign-in page, not the full marketing site, so the spec covers entry-surface composition and brand-voice signals rather than the deeper product editor.

Pika Design System

Pika's idea-to-video login surface as a DESIGN.md file.

About Pika DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source pika.art

AI & LLM Platforms

Pika treats its entry surface as a vertical diptych. The left half is warm cream holding a black-tile video panel that auto-loops a "NOW FEATURING / PIKAFORMANCES" caption; the right half is near-black carrying a single 32px Telka Extended display line in uppercase warm cream ("REALITY IS OPTIONAL"), a small sub-paragraph in structural white, and a four-button OAuth stack. There is no border, no gradient, no transition rule between the two halves — the canvas split itself does all the structural work the brand chrome would normally do on a SaaS landing page.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 6 color tokens drawn from the captured surface — pure white, near-black ink, the warm cream voltage, and two near-black surface tones — none of them tied to a brand var-family because Pika's CSS exposes only `--color-white` and `--color-black` on root; the cream is the brand's single chromatic move and lives inline. 11 typography tokens run Telka and Telka Extended at weights 300, 400, 450, 500, and 900; the heaviest moment sits exactly once at the display tier. 6 radius tokens center on a 6px workhorse with a 10px secondary; 7 spacing tokens descend from 80px hero gutters to 4px micro-tap. 14 component tokens cover the cream pill-CTA, the white OAuth button, the small video tile, the divider rule, the wide page split, and the footer chip set.

Feed this file to an AI coding tool and it reproduces Pika's specific moves: the vertical-diptych canvas instead of a single-color hero, the single warm cream voltage carrying display + wordmark + email-CTA fill, Telka Extended weight 900 reserved for one display moment per surface, white OAuth buttons sitting flat on near-black with no card chrome. The split-canvas move only works if your product has a media artifact (a video, a render, a generated frame) confident enough to own half the page — Pika has Pikaformances; most consumer-AI brands need an interstitial card layer to make the same composition read.

What makes it distinct

Two-half canvasthe entire above-fold reads as a 50/50 vertical split, cream left and near-black right, with no border between them; the page IS the divider
Single warm cream voltagethe cream hue carries the wordmark, the display heading, and the email-CTA fill, the only non-grayscale color anywhere on the surface
Telka Extended at weight 900the one display moment runs uppercase at 32px / 36px line-height with 0.32px tracking, a wide-condensed display drawn just for the brand
Telka regular at 300-450 weightsevery body, link, and OAuth-button label sits between 300 and 450, no 700+ moment outside the single display block
No card chromesign-in buttons are 6px-radius white pills with brand-glyph monograms, sitting flat on the near-black floor with no border, no shadow, no surrounding card

Live at pika.art

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

pika.art

Explore Pika

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

Pika design system FAQ

Common questions about Pika's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Pika — official site

Pika's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.