--- version: alpha name: Pika description: A warm-cream AI video playground where custom extended type slams uppercase headlines at weight 900, a golden amber accent fires every CTA, and three-panel feature cards in lavender, near-black, and amber snap together like a toy set. colors: # Surface / canvas background: "#fcfaf7" # warm off-white cream — the dominant page canvas surface: "#ffffff" # pure white panels and card insets surface-dark: "#0d0d0d" # near-black for dark feature cards and footer surface-mid: "#222222" # dark-section elevated surfaces # Ink / text ink: "#0d0d0d" # primary text on cream and white ink-on-dark: "#ffffff" # primary text on dark surfaces ink-secondary: "#222222" # secondary text, nav links at rest ink-muted: "#141414" # was lab(3.6…/0.05) — flattened, dark muted text /* estimated */ # Brand accent — golden amber primary: "#ffd184" # golden amber CTA fill, sign-up button, active states primary-light: "#ffedd2" # pale amber tint, surface wash on accent sections primary-hover: "#ffdba4" # lightened amber on hover (was rgb(255,219,163)) on-primary: "#0d0d0d" # dark ink on amber fills # Feature card palette (three-panel visual signature) card-lavender: "#c4b5fd" # lavender panel (Pika Agent card) /* estimated — brand-known */ card-amber: "#ffd184" # amber panel (Pika Video App card) card-dark: "#0d0d0d" # near-black panel (Pika MCP card) # Borders & states border: "#e8e4de" # hairline on cream, light dividers /* estimated */ border-dark: "#2a2a2a" # dark-surface borders text-hover: "#222222" # nav link color on hover # Focus / interaction focus-ring: "#ffd184" # amber focus ring matching brand accent # Shadow tints shadow-soft: "#0d0d0d" # was rgba(0,0,0,0.12) — flattened for Google format /* was oklab(0…/0.12) */ typography: display-hero: fontFamily: "telkaExtended, Impact, 'Arial Black', ui-sans-serif, sans-serif" fontSize: 48px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0px display: fontFamily: "telkaExtended, Impact, 'Arial Black', ui-sans-serif, sans-serif" fontSize: 32px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0px heading-section: fontFamily: "telkaExtended, Impact, 'Arial Black', ui-sans-serif, sans-serif" fontSize: 48px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0px heading-sub: fontFamily: "telka, 'DM Sans', ui-sans-serif, system-ui, sans-serif" fontSize: 30px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0px body-large: fontFamily: "telka, 'DM Sans', ui-sans-serif, system-ui, sans-serif" fontSize: 17px fontWeight: 500 lineHeight: 1.53 letterSpacing: 0px body: fontFamily: "telka, 'DM Sans', ui-sans-serif, system-ui, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0px body-small: fontFamily: "telka, 'DM Sans', ui-sans-serif, system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0px button-ui: fontFamily: "telka, 'DM Sans', ui-sans-serif, system-ui, sans-serif" fontSize: 15px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0px label: fontFamily: "telka, 'DM Sans', ui-sans-serif, system-ui, sans-serif" fontSize: 14px fontWeight: 300 lineHeight: 1.43 letterSpacing: 0px caption: fontFamily: "telka, 'DM Sans', ui-sans-serif, system-ui, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.33 letterSpacing: 0px eyebrow: fontFamily: "telkaExtended, Impact, 'Arial Black', ui-sans-serif, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 32px 3xl: 48px 4xl: 64px 5xl: 96px rounded: none: 0px sm: 6px md: 12px lg: 16px xl: 24px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 10px 20px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "{colors.surface-dark}" textColor: "{colors.ink-on-dark}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 10px 20px button-secondary-hover: backgroundColor: "{colors.surface-mid}" textColor: "{colors.ink-on-dark}" button-ghost: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 10px 20px button-ghost-hover: backgroundColor: "{colors.primary-light}" textColor: "{colors.ink}" card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 24px card-feature: backgroundColor: "{colors.card-lavender}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 32px card-dark: backgroundColor: "{colors.card-dark}" textColor: "{colors.ink-on-dark}" rounded: "{rounded.xl}" padding: 32px input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 12px 16px input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" badge: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.eyebrow}" rounded: "{rounded.pill}" padding: 4px 10px nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.label}" padding: 12px 24px nav-link: textColor: "{colors.ink-secondary}" typography: "{typography.label}" padding: 8px 12px nav-link-hover: textColor: "{colors.ink}" --- # Pika Design System ## Overview Pika lives at the intersection of AI video and Gen-Z playfulness, and its design system commits hard to that register. The canvas is a warm off-white cream (`{colors.background}`) — not clinical white, not dark and moody, but something closer to a vintage paperback page. It gives the whole site a tactile, approachable warmth that a pure-white interface would drain away. Against that cream, the dominant type treatment is a shock: extended display type in Telka Extended at weight 900, ALL CAPS, slammed to a tight line-height of 1.0. Headlines like "CREATE YOUR AI AGENT" and "PIKA VIDEO OFFICIAL APP" don't whisper — they stamp. The pairing of a cozy ground with maximum-weight uppercase headlines is the brand's core visual tension: soft surface, loud voice. The accent system is golden amber (`{colors.primary}`). It fills the primary "Sign Up" pill, stains feature card backgrounds, and in small doses appears as an eyebrow badge on product labels. It's a warm, inclusive color — not the electric neon of a typical AI product, but something closer to afternoon sun. The signature visual device is a trio of adjacent feature cards, each occupying roughly equal real estate in lavender (`{colors.card-lavender}`), near-black (`{colors.card-dark}`), and amber (`{colors.card-amber}`). This triptych communicates product breadth and playful confidence simultaneously — three flavors, side by side, designed to feel like choosing a flavor at an ice cream counter. Motion and typography work together to reinforce the "toy that performs" impression. The display face (Telka Extended) handles all the hero moments, while the body face (Telka) — a gentler, non-extended sibling — softens at every paragraph, caption, and navigation label. The switch between the two families IS the hierarchy. Buttons are universally pill-shaped (`{rounded.pill}`), which alongside the warm cream and the fat uppercase creates a design that feels both confident and inviting — never intimidating, always legible, entirely distinct from the cinematic darkness of Runway or the monochrome restraint of Krea. **Key Characteristics:** - Warm cream canvas (`{colors.background}`) — distinctly warmer than pure white, sets an approachable and tactile tone - Telka Extended at weight 900, ALL CAPS, line-height 1.0 for every display moment — maximum compression, maximum presence (`{typography.display-hero}`) - Telka (non-extended) for all body, label, and button text — the family split IS the hierarchy signal (`{typography.body}`) - Golden amber (`{colors.primary}`) as the single brand accent — fills CTA pills and feature card surfaces - Three-panel feature-card triptych (lavender/dark/amber) as the signature product marketing device - All interactive elements are pill-shaped (`{rounded.pill}`) — no square corners anywhere in the interactive layer - Eyebrow badges in extended uppercase (`{typography.eyebrow}`) label each product card (PIKA AGENT, PIKA MCP, PIKA VIDEO APP) - Near-black (`{colors.surface-dark}`) footer and dark panel contrast the warm body without going full monochrome - easing `cubic-bezier(0.23, 1, 0.32, 1)` across all button and link transitions (0.15–0.2s) — snappy but not abrupt - `fadeIn` keyframe at 0.6s on card entry — cards surface gently rather than popping in ## Colors ### Surface & Canvas - **Warm Cream** (`{colors.background}`): The dominant marketing canvas — `#fcfaf7`, distinctly warmer than white. Gives the page a papery, tactile ground. - **White** (`{colors.surface}`): Pure white panel insets and card backgrounds against the cream. - **Near-Black** (`{colors.surface-dark}`): Footer section and the dark feature card. Maximum contrast, no true black. - **Dark Mid** (`{colors.surface-mid}`): Hover state for dark-surface buttons; slightly lighter than the near-black surface. ### Ink / Text - **Near-Black Ink** (`{colors.ink}`): Primary body text on cream — `#0d0d0d`. Close to but never pure black. - **White Ink** (`{colors.ink-on-dark}`): All text on dark surfaces. - **Dark Secondary** (`{colors.ink-secondary}`): Nav links at rest, secondary copy. - **Muted Dark** (`{colors.ink-muted}`): Flattened from a dark semi-transparent value; low-emphasis helper text. ### Brand Accent - **Golden Amber** (`{colors.primary}`): The primary CTA fill, "Sign Up" pill, active badges, and one feature-card panel. Warm and confident without being aggressive. - **Pale Amber** (`{colors.primary-light}`): A very light tint for section washes and ghost-button hover states. - **Amber Hover** (`{colors.primary-hover}`): The lightened amber that registers button press/hover feedback. - **On Amber** (`{colors.on-primary}`): Near-black ink that sits on amber fills, meeting contrast requirements. ### Feature Card Palette - **Lavender** (`{colors.card-lavender}`): The Pika Agent card panel — soft purple that reads as friendly and futuristic. - **Amber** (`{colors.card-amber}`): The Pika Video App card panel — matches the brand accent. - **Near-Black** (`{colors.card-dark}`): The Pika MCP card panel — the dark statement in the triptych. ### Borders, Focus & Shadows - **Cream Hairline** (`{colors.border}`): Dividers against the warm canvas — barely visible. - **Dark Border** (`{colors.border-dark}`): Borders on dark surfaces. - **Amber Focus Ring** (`{colors.focus-ring}`): Keyboard focus uses the brand accent color. - **Shadow Soft** (`{colors.shadow-soft}`): Flattened from a near-opaque dark value; opaque stand-in for ambient button shadow. ## Typography ### Font Family - **Display**: `telkaExtended` — a custom extended geometric sans. At weight 900 uppercase, it reads like a brand stamp. Closest system fallbacks: `Impact, 'Arial Black'`. Google Font closest match: none exact; use `Barlow Condensed` at 900 for implementations without the custom font. - **Body / UI**: `telka` — the non-extended sibling, used for all body copy, labels, buttons, and captions. Closer to a clean geometric sans; DM Sans is the nearest Google Font approximation. - **Split-family strategy**: The typographic hierarchy is achieved entirely by swapping between these two families — Extended for all display roles, Regular for all UI and body roles. ### Hierarchy The complete type scale lives in the `typography:` token block above. Reference tokens directly. | Token | Use | |---|---| | `display-hero` | 48px / 900 / Extended — hero and feature-card headlines, all caps | | `display` | 32px / 900 / Extended — secondary card headlines | | `heading-section` | 48px / 900 / Extended — major section titles | | `heading-sub` | 30px / 400 / Regular — lead sentences and large feature copy | | `body-large` | 17px / 500 / Regular — emphasized supporting copy | | `body` | 15px / 400 / Regular — standard paragraph text | | `body-small` | 14px / 400 / Regular — dense supporting content | | `button-ui` | 15px / 500 / Regular — CTA and ghost button labels | | `label` | 14px / 300 / Regular — nav links, metadata, light UI labels | | `caption` | 12px / 500 / Regular — tags, timestamps, small metadata | | `eyebrow` | 12px / 700 / Extended — uppercase product label badges (PIKA AGENT, PIKA MCP) | ### Principles - **The family swap IS the hierarchy**: there is no need for intermediate weights to signal importance — Extended 900 vs Regular 400 does it in a single flip. - **All display type is uppercase**: Telka Extended only appears in capitals; lowercase is a body-text register. - **Weight extremes**: display goes to 900, label goes to 300 — the system lives at the poles. Mid weights (600, 700) appear only in the eyebrow badge. - **No letter-spacing adjustment**: all sizes run at 0px tracking. The extended width and 900 weight provide all the visual density needed. ## Layout ### Spacing System The full scale is in the `spacing:` token block. Base unit: 4px. Controls are comfortably padded (12px internal rhythm); section gaps are generous (`{spacing.5xl}` = 96px gives the cream canvas breathing room between feature blocks). ### Grid & Container - Max content width: ~1200px - Three-panel feature-card triptych: three equal-width cards in a horizontal row, full-bleed colored backgrounds - Breakpoints: 428px (mobile), 800px (tablet), 1024px (desktop) - Navigation: horizontal pill nav, logo left, links center, CTA pill right ### Whitespace Philosophy - The cream canvas acts as passive warmth rather than dead space; the page never feels cold even with generous gaps - Feature cards sit flush edge-to-edge in the triptych, creating a dense midpoint that bookends the generous vertical margins - Footer switches to near-black (`{colors.surface-dark}`), providing a clean close that frames the warm body above ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow; `{colors.border}` hairline only | Standard cards and body content on cream | | Subtle (Level 1) | `0 2px 8px` at low opacity (`{colors.shadow-soft}`) | Pill buttons at rest | | Raised (Level 2) | `0 4px 16px` at low opacity (`{colors.shadow-soft}`) | Feature cards, modals | | Invert (Dark) | `{colors.surface-dark}` solid background | Footer, dark feature card — depth via color, not shadow | | Focus Ring | `0 0 0 2px {colors.focus-ring}` | Keyboard focus on all interactive elements | **Shadow Philosophy**: Pika uses shadows sparingly. The warmth of the cream canvas means even a very soft shadow reads well; buttons carry a gentle lift, and cards occasionally float slightly. The design's depth story is more about background-color contrast (cream vs. white vs. near-black) than about drop shadows. The amber focus ring is the most prominent "depth" signal in the interactive layer. ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `none` | 0px | Structural dividers only | | `sm` | 6px | Small inner chips, image thumbnails | | `md` | 12px | Inputs, small cards, dropdown menus | | `lg` | 16px | Standard cards | | `xl` | 24px | Feature cards in the triptych | | `pill` | 9999px | ALL buttons, badges, and nav CTA — the universal interactive shape | The shape personality is binary in the interactive layer: everything you click or tap is a pill (`{rounded.pill}`). Containers and cards are rounded but not extreme (`{rounded.xl}`). Nothing has a sharp 0px corner in the interactive tier. This binary (pill vs. rounded-rect) keeps the system clean and contributes to the "friendly toy" register. ## Components The complete component spec lives in the `components:` token block above. ### Button Variants - **`button-primary`** — Golden amber (`{colors.primary}`) pill, near-black label (`{colors.on-primary}`). The "Sign Up" CTA at the top right. Hovers to a lighter amber (`{colors.primary-hover}`). - **`button-secondary`** — Near-black (`{colors.surface-dark}`) pill, white label. The "Try on Web" or "Install" secondary CTAs inside dark and neutral contexts. - **`button-ghost`** — White fill pill, dark label. Neutral alternative; hover washes to pale amber (`{colors.primary-light}`). ### Cards - **`card`** — White surface (`{colors.surface}`), 24px radius, standard 24px padding. Used for content and feature tiles not part of the signature triptych. - **`card-feature`** — Lavender fill (`{colors.card-lavender}`), 24px radius, 32px padding. The Pika Agent panel in the triptych. - **`card-dark`** — Near-black fill (`{colors.card-dark}`), white text, 24px radius. The Pika MCP panel — the dark statement in the trio. ### Inputs - **`input`** — White fill, near-black text, 12px radius. Standard form input. Focus state adds a 2px amber ring (`{colors.focus-ring}`). ### Badges - **`badge`** — Amber pill (`{colors.primary}`) with near-black extended-type eyebrow label (`{typography.eyebrow}`). Appears at the top of each feature card to name the product (PIKA AGENT, PIKA MCP, PIKA VIDEO APP). ### Navigation - **`nav-bar`** — Cream background, full-width. Logo left, links center, amber pill CTA right. Transparent over hero content. - **`nav-link`** — Dark secondary color at rest, full dark (`{colors.ink}`) on hover. ## Do's and Don'ts ### Do - Set ALL display headlines in Telka Extended 900 uppercase (`{typography.display-hero}`) — the visual signature depends on the weight and caps - Keep the canvas warm cream (`{colors.background}`) — never swap to a cold white or dark background in the hero - Make all clickable/tappable elements pill-shaped (`{rounded.pill}`) — the binary pill-vs-rounded-rect is load-bearing - Use golden amber (`{colors.primary}`) as the primary CTA fill — it works on both light and dark surfaces - Use the Telka body face (`{typography.body}`) for all copy, labels, and nav — the family split IS the hierarchy - Deploy the three-panel triptych (lavender/dark/amber) for product feature marketing — the color contrast between panels is intentional and should be preserved - Apply `cubic-bezier(0.23, 1, 0.32, 1)` easing at 0.15–0.2s for all interactive transitions — keeps the tactile, snappy feel - Label each product card with an extended-type badge (`{typography.eyebrow}`) in the amber pill (`{components.badge}`) ### Don't - Don't change display type to lowercase — Telka Extended only appears uppercase; lowercase text belongs to the body register - Don't introduce a pure white hero canvas — the warmth of `{colors.background}` is a distinguishing mark; cold white reads like a different brand - Don't use the amber (`{colors.primary}`) as a text color on white — it fails contrast; it's a fill color only - Don't add more than three distinct card-panel colors — the triptych is a three-color device; more hues dilute it - Don't use intermediate weights (500–800) for display type — the system lives at the poles: 900 Extended for display, 300–500 Regular for body - Don't round feature cards to pill or to sharp 0px — they need `{rounded.xl}` to stay in the friendly-but-structured register - Don't apply shadows to the feature-card triptych panels — they read as flat colored tiles, which is the intention - Don't introduce a secondary accent color for CTA buttons — amber is the only allowed fill color for primary actions --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | <428px | Single column; feature triptych stacks vertically; hero headline scales down; pill nav collapses | | Mobile Large | 428–799px | Two columns begin; feature cards may pair 2+1 stacked | | Tablet | 800–1023px | Two or three column grid; nav still abbreviated | | Desktop | ≥1024px | Full three-panel triptych; wide nav with all links visible; hero at full 48px headline | ### Touch Targets - All pill buttons carry at least 38px height with 10px 20px padding — comfortably thumb-reachable - Feature cards are large-area taps; no small interactive hotspots below the fold - Nav links at 14px with 8px 12px padding — adequate but tight on small screens ### Collapsing Strategy - **Navigation**: Logo + amber pill CTA persist; center links collapse to a menu toggle on mobile - **Hero**: Extended headline scales from 48px down toward ~32px on mobile; body copy drops to 14–15px - **Feature triptych**: Three-across grid collapses to single column; each card takes full width and stacks lavender, dark, amber vertically - **Spacing**: Section rhythm compresses from 96px toward ~48px on mobile ### Image Behavior - Video thumbnails and product screenshots inside feature cards scale as contained images within the card bounds - Hero imagery (if present above fold) is cropped and recentered; the cream canvas remains the dominant impression even when imagery is reduced --- ## Agent Prompt Guide ### Quick Color Reference - Background: Warm Cream (`{colors.background}`) - Text: Near-Black (`{colors.ink}`) on cream, White (`{colors.ink-on-dark}`) on dark - Brand accent: Golden Amber (`{colors.primary}`) — CTA fills and badges - Secondary text: Dark (`{colors.ink-secondary}`) - Border: Cream hairline (`{colors.border}`) - CTA: Amber pill (`{colors.primary}` fill, `{colors.on-primary}` label) ### Example Component Prompts - "Create a Pika-style hero on warm cream (`{colors.background}`): an uppercase headline in telkaExtended 900 at 48px (`{typography.display-hero}`), line-height 1.0; a body paragraph in telka 400 at 15px (`{typography.body}`); and an amber pill CTA (`{colors.primary}` fill, `{colors.on-primary}` text, `{rounded.pill}`, 10px 20px padding) beside a near-black pill secondary button" - "Build the three-panel feature triptych: three equal-width cards side by side with `{rounded.xl}` radius and 32px padding. Left card in lavender (`{colors.card-lavender}`), center in near-black (`{colors.card-dark}`), right in amber (`{colors.card-amber}`). Each card has an amber badge (`{components.badge}`) at top-left with an extended-type product label, a 48px Extended 900 headline, a 15px body paragraph, and a pill button" - "Design a Pika badge / product label: amber fill (`{colors.primary}`), near-black text (`{colors.on-primary}`), telkaExtended 700 at 12px uppercase (`{typography.eyebrow}`), pill radius (`{rounded.pill}`), 4px 10px padding" - "Render a navigation bar on warm cream (`{colors.background}`): Pika wordmark logo left; center links in telka 300 14px (`{typography.label}`) at dark secondary color (`{colors.ink-secondary}`), brightening to near-black on hover; right: an amber pill Sign Up button (`{components.button-primary}`)" - "Create a dark feature card (`{components.card-dark}`): near-black background (`{colors.card-dark}`), white headline in telkaExtended 900 48px (`{typography.display-hero}`) uppercase, white body in telka 400 15px (`{typography.body}`), two pill buttons — a white-fill ghost button and a near-black secondary button — and a product screenshot image in the upper right at `{rounded.md}` radius" ### Iteration Guide 1. Start on warm cream (`{colors.background}`). If the canvas reads cold or clinical, it's wrong — `#fcfaf7` has a clear warm yellow bias. 2. Set all headlines in telkaExtended 900 ALL CAPS (`{typography.display-hero}`). If headlines are mixed case or below weight 700, the visual identity is lost. 3. Every CTA is a pill (`{rounded.pill}`). No square or 4px-rounded buttons exist in this system. 4. The primary CTA fills with golden amber (`{colors.primary}`). If a CTA is a different color, it's either a secondary or ghost button. 5. Feature card colors follow the lavender/dark/amber pattern (`{colors.card-lavender}`, `{colors.card-dark}`, `{colors.card-amber}`). Preserve all three; don't reduce to monochrome. 6. Body type uses the non-extended sibling (`{typography.body}`) — lighter, smaller, regular weight. The contrast with the 900 display type does all the hierarchy work. 7. If adding a new product label or category tag, use the amber badge (`{components.badge}`) with extended uppercase eyebrow type. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Pika. Brand names and trademarks belong to their respective owners.