Design tokens (YAML front matter)

version: alpha
name: Pika-Inspired-design-analysis
description: An inspired interpretation of Pika's design language — an AI video studio for creatives with a cream-and-charcoal palette, an extended uppercase display face, soft 12px media cards and white pill buttons, letting generated video carry all of the color.

colors:
  primary: "#ffffff"
  on-primary: "#111111"
  canvas: "#faf8f4"
  canvas-dark: "#222222"
  surface-dark: "#2e2e2e"
  ink: "#111111"
  ink-soft: "#2e2e2e"
  on-dark: "#fcfaf7"
  hairline: "#e8e4dc"

typography:
  display:
    fontFamily: '"Telka Extended", "Unbounded", "Archivo Expanded", system-ui, sans-serif'
    fontSize: 54px
    fontWeight: 500
    lineHeight: 56px
    letterSpacing: 0.54px
    textTransform: uppercase
  eyebrow:
    fontFamily: '"Telka Extended", "Archivo Expanded", system-ui, sans-serif'
    fontSize: 15px
    fontWeight: 700
    lineHeight: 14px
    letterSpacing: 0px
    textTransform: uppercase
  heading:
    fontFamily: Telka, "Inter", system-ui, sans-serif
    fontSize: 28px
    fontWeight: 400
    lineHeight: 35px
    letterSpacing: 0.56px
  body-lg:
    fontFamily: Telka, "Inter", system-ui, sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 25px
    letterSpacing: 0.4px
  label:
    fontFamily: Telka, "Inter", system-ui, sans-serif
    fontSize: 15px
    fontWeight: 500
    lineHeight: 21px
    letterSpacing: 0px

rounded:
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

spacing:
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  section: 120px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: "0 24px"
    height: 44px
  button-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "#ffffff"
    rounded: "{rounded.pill}"
  button-ghost-dark:
    backgroundColor: transparent
    textColor: "{colors.canvas}"
    borderColor: "#fdfcfa"
    rounded: "{rounded.pill}"

Design System Inspiration of Pika

Overview

Pika is an AI creative platform for video, image and audio, “built for creatives”. The site is a gallery: a warm cream canvas ({colors.canvas} #faf8f4, about 66% of painted area) alternates with a deep charcoal band ({colors.canvas-dark} #222222, about 33%), and generated videos fill rounded cards between them. The chrome is almost colorless so the work can be loud.

The voice is set in an extended uppercase display face (“AN APP FOR EVERY CREATIVE NEED”), with rotating words inside the headline (Making Videos, Color Grading, Extending Footage…). Everything else uses the regular-width companion face in sentence case with slight positive tracking.

Key Characteristics:

Cream + charcoal, no brand hue; color comes from video and imagery.
Extended, uppercase display type with rotating headline words.
Pill buttons: white on dark, charcoal on light, outlined on dark for secondary.
12px rounded media cards, edge to edge in wide (2000px) layouts.
Long scrolling page (about 11,500px) of app showcases and “Made with Pika” work.

Colors

Canvas ({colors.canvas} — #faf8f4): Light sections.
Canvas Dark ({colors.canvas-dark} — #222222): Hero and showcase bands; also the browser theme color.
Surface Dark ({colors.surface-dark} — #2e2e2e): Cards and the “Explore all Apps” button on dark.
Ink ({colors.ink} — #111111): Headlines on light; label on white buttons.
On Dark ({colors.on-dark} — #fcfaf7): Text on charcoal.
Hairline ({colors.hairline} — #e8e4dc): Rare dividers; cards mostly have no border, just a inset 0 0 0 1px rgba(13,13,13,0.05) ring.

Typography

Font Family

An extended display face (served as Telka Extended) — uppercase headlines and eyebrows. Substitute: Unbounded, Archivo Expanded or Monument Extended.
Its regular-width companion (served as Telka) — body, nav, buttons, card titles. Substitute: Inter with +0.02em tracking.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display}`	54px	500	56px	0.54px	Uppercase section headlines with rotating words.
`{typography.heading}`	28px	400	35px	0.56px	App names (“Video Studio”).
`{typography.body-lg}`	20px	400	25px	0.4px	Intro paragraphs.
`{typography.eyebrow}`	15px	700	14px	0	Uppercase hero eyebrow.
`{typography.label}`	15px	500	21px	0	Nav, buttons, captions.

Principles

Uppercase only in the extended face; the regular face stays sentence case.
Slight positive tracking on body (0.02em) keeps the regular face airy next to the extended display.

Layout

Very wide frame (max 2000px) so video cards can run large.
Horizontal carousels of app cards and generated clips.
Generous vertical rhythm (about 120px between sections).
48px compact top nav: AI Video · AI Image · AI Audio · Pricing · Enterprise · Developers · Login · Try Pika.

Elevation & Depth

Flat. Cards separate by surface color and a faint 1px inset ring; there are no drop shadows.

Shapes

{rounded.lg} 12px — media and app cards (most common).
{rounded.md} 8px — thumbnails and small tiles.
{rounded.xl} 16px — large feature panels.
{rounded.pill} — every button.

Components

Buttons

button-primary — white pill, {colors.ink} label, 15–16px weight 500, padding 0 20–24px. “Try Pika” in the nav and hero.
button-dark — {colors.surface-dark} pill with white label (“Explore all Apps”).
button-ghost-dark — transparent pill, 1px cream border and label on dark bands (“Learn More”, “See our Blog”).

App Card

A looping video or image preview with 12px corners, the app name in {typography.heading} and a one-line description below.

Rotating Headline

An uppercase headline where one phrase cycles through capabilities. Keep the static part short so the rotating part is the focus.

Do’s and Don’ts

Do

Let generated video and images provide the color.
Use the extended uppercase face for headlines only.
Use pills for all buttons, white on dark and charcoal on light.
Use wide, edge-to-edge media layouts.

Don’t

Don’t introduce a brand accent color for buttons or links.
Don’t set body copy in the extended face or in uppercase.
Don’t add drop shadows to cards.
Don’t use pure white backgrounds; the canvas is cream.

Responsive Behavior

The display headline drops to about 32px and wraps; rotating words stay on their own line.
Carousels become swipeable rows of single cards.
The nav collapses to logo, “Try Pika” and a menu button.

Known Gaps

Measured on the marketing homepage at 1440px; the in-app studio interface was not measured.
Telka is the site’s font name; substitutes are approximate.

Pika

Palette

At a glance

Design System · Pika

Design System Inspiration of Pika

Overview

Colors