--- name: Pika tagline: A cream-canvas AI video studio in custom Telka type, with peach and black pill CTAs. updated_at: 2026-05-28T23:10:59.523Z published_at: 2026-05-28T23:10:59.523Z author: webdesignhot source_url: https://pika.art spec: webdesignhot/0.1 quality: curated featured: false categories: [ai, media] tags: [light, bold, sans, ai, video, warm, playful] preview_swatch: ['#fcfaf7', '#ffd184', '#000000'] related: [krea] description: 'Pika''s site is a warm-light AI video studio. The canvas is a cream off-white `#fcfaf7` — not clinical white, a hair of warmth that softens the generative-AI register into something playful — and the type is **Telka**, a custom geometric grotesque, with the wide **Telka Extended** cut carrying the display: the h1 lands at 48px / weight **900**, set near-black `#0d0d0d`. The defining structural move is the two-CTA grammar: a soft peach `#ffd184` button (dark text) for the inviting primary action, and a hard black `#000000` button (white text) for the do-it-now generate action, both at a generous 18px radius. Where Krea commits to absolute black and Swiss restraint, Pika does the opposite — a warm cream room, a fat-weight display face, and rounded peach-and-black pills that read playful rather than austere. The body runs Telka at a light 300 weight, so the page reads relaxed and approachable while the 900-weight headlines carry all the punch.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand muted: text-muted border: border ring: brand themes: default: light available: [light] switch-via: 'Light-only. The cream canvas is the brand surface across the entire marketing site and web studio; no dark variant is offered. The black CTA supplies the only true dark field on the page.' colors: bg: '#fcfaf7' # cream off-white canvas — rgb(252, 250, 247) bg-alt: '#f5f1ea' # one step warmer/darker for inset bands surface: '#ffffff' # pure-white raised card on cream ground surface-soft: '#fbf7f0' # softest panel fill, barely off the canvas text: '#0d0d0d' # near-black display ink — rgb(13, 13, 13) text-strong: '#000000' # absolute black for max-emphasis headings + CTA fill text-muted: '#5c5c5c' # muted grey for captions, secondary copy text-soft: '#8a8a8a' # quietest labels, placeholder, meta text-faint: '#b8b8b8' # disabled text, hairline dividers as text brand: '#ffd184' # peach — primary CTA fill, rgb(255, 209, 132) brand-deep: '#f5be63' # pressed/active peach brand-soft: 'rgba(255, 209, 132, 0.30)' # peach wash for highlight pills on-brand: '#222222' # dark ink on peach — rgb(34, 34, 34) ink-cta-bg: '#000000' # black generate-button fill ink-cta-text: '#ffffff' # white text on black/dark CTA dark-cta-bg: '#222222' # near-black "Try on Web" fill — rgb(34, 34, 34) link: '#0d0d0d' # links use the near-black ink link-hover: '#000000' # deepen to absolute black on hover selected-bg: 'rgba(255, 209, 132, 0.30)' # peach-wash selection disabled: '#b8b8b8' border: 'rgba(13, 13, 13, 0.10)' # 10% near-black hairline on cream border-strong: 'rgba(13, 13, 13, 0.18)' # emphasized rule on inputs border-subtle: 'rgba(13, 13, 13, 0.05)' # quietest division success-bg: 'rgba(34, 197, 94, 0.12)' success-text: '#15803d' warning-bg: 'rgba(245, 190, 99, 0.20)' warning-text: '#92600c' danger-bg: 'rgba(220, 38, 38, 0.10)' danger-text: '#b91c1c' info-bg: 'rgba(13, 13, 13, 0.06)' info-text: '#0d0d0d' typography: display: family: 'telkaExtended, telka, system-ui, -apple-system, sans-serif' weights: [500, 600, 700, 900] opentype-features: ['kern', 'liga'] body: family: 'telka, system-ui, -apple-system, sans-serif' weights: [300, 400, 500, 600] opentype-features: ['kern'] mono: family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' weights: [400, 500] opentype-features: ['tnum'] scale: display-hero: { size: 80, weight: 900, lineHeight: 1.0, tracking: '-0.03em', family: display, opentype: 'kern liga' } display-lg: { size: 56, weight: 900, lineHeight: 1.05, tracking: '-0.02em', family: display, opentype: 'kern liga' } h1: { size: 48, weight: 900, lineHeight: 1.05, tracking: '-0.02em', family: display } h2: { size: 32, weight: 700, lineHeight: 1.15, tracking: '-0.012em', family: display } h3: { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display } h4: { size: 20, weight: 600, lineHeight: 1.3, tracking: '0', family: display } h5: { size: 16, weight: 600, lineHeight: 1.4, tracking: '0', family: body } eyebrow: { size: 12, weight: 600, lineHeight: 1.4, tracking: '0.06em', family: body, transform: uppercase } body-lg: { size: 18, weight: 300, lineHeight: 1.55, tracking: '0', family: body } body: { size: 16, weight: 300, lineHeight: 1.55, tracking: '0', family: body } body-sm: { size: 14, weight: 300, lineHeight: 1.5, tracking: '0', family: body } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } code: { size: 13, weight: 400, lineHeight: 1.55, tracking: '0', family: mono, opentype: 'tnum' } radius: micro: 2 sm: 4 md: 8 lg: 12 xl: 16 cta: 18 pill: 9999 spacing: base: 4 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128] layout: page-width: 1280 prose-width: 720 site-gutter: 'clamp(20px, 5vw, 64px)' header-height: 64 grid-columns: 12 section-rhythm: '64-128px' components: button-primary: background: '#ffd184' text: '#222222' padding: '10px 18px' radius: 18 border: 'none' font: 'Telka 500 / 15px' hover-bg: '#f5be63' use: 'Primary invitation CTA — peach pill, dark text (Sign Up, Get started).' button-generate: background: '#000000' text: '#ffffff' padding: '10px 18px' radius: 18 border: 'none' font: 'Telka 500 / 15px' hover-bg: '#1a1a1a' use: 'Do-it-now action CTA — black pill, white text (Generate).' button-dark: background: '#222222' text: '#ffffff' padding: '10px 18px' radius: 18 border: 'none' font: 'Telka 500 / 15px' hover-bg: '#000000' use: 'Secondary dark CTA — near-black pill (Try on Web).' button-ghost: background: 'transparent' text: '#0d0d0d' padding: '10px 18px' radius: 18 border: '1px solid rgba(13, 13, 13, 0.18)' font: 'Telka 500 / 15px' hover-bg: 'rgba(13, 13, 13, 0.04)' use: 'Quiet outline twin — nav and tertiary actions on cream.' card: background: '#ffffff' border: '1px solid rgba(13, 13, 13, 0.10)' radius: 16 padding: '24px' use: 'Content card — pure-white fill lifting off the cream ground.' card-video-tile: background: '#f5f1ea' border: 'none' radius: 16 padding: '0' aspect-ratio: '16 / 9' use: 'Generated-clip tile — rounded 16px frame, video bleeds to edge.' input: background: '#ffffff' border: '1px solid rgba(13, 13, 13, 0.18)' radius: 8 padding: '10px 14px' font: 'Telka 300 / 15px' placeholder-color: '#8a8a8a' focus-ring: '0 0 0 3px rgba(255, 209, 132, 0.50)' use: 'Form fields, search.' prompt-input: background: '#ffffff' border: '1px solid rgba(13, 13, 13, 0.10)' radius: 18 padding: '14px 16px 14px 20px' font: 'Telka 300 / 16px' inner-button: '40px black circle, white arrow' use: 'Studio prompt — wide rounded box with a black send button.' badge-tag: background: 'rgba(255, 209, 132, 0.30)' text: '#222222' padding: '4px 12px' radius: 9999 font: 'Telka 500 / 12px' use: 'Style / category chip — peach-wash pill.' nav-link: background: 'transparent' text: '#0d0d0d' padding: '8px 12px' font: 'Telka 500 / 15px' hover-text: '#5c5c5c' motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' ease-bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 reduced-motion: 'respects prefers-reduced-motion: reduce — looping demo clips pause to a poster frame, transforms collapse to opacity.' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: none: 'none' ambient: 'rgba(13, 13, 13, 0.05) 0 1px 2px' standard: 'rgba(13, 13, 13, 0.08) 0 4px 16px' elevated: 'rgba(13, 13, 13, 0.12) 0 16px 40px -8px' modal: 'rgba(13, 13, 13, 0.20) 0 24px 64px -12px' ring: '0 0 0 3px rgba(255, 209, 132, 0.50)' accessibility: contrast-text-on-bg: 18.9 # #0d0d0d on #fcfaf7 — AAA at all sizes contrast-text-muted-on-bg: 7.0 # #5c5c5c on #fcfaf7 — AAA at body sizes contrast-text-soft-on-bg: 3.9 # #8a8a8a on #fcfaf7 — AA large / placeholder only contrast-on-brand-on-brand: 8.9 # #222222 on #ffd184 peach — AAA at body sizes contrast-white-on-black-cta: 21.0 # #ffffff on #000000 generate CTA — AAA contrast-white-on-dark-cta: 15.9 # #ffffff on #222222 — AAA at all sizes focus-ring: '3px peach glow rgba(255, 209, 132, 0.50) with 2px offset; falls back to 2px solid #0d0d0d outline where peach lacks contrast on white.' reduced-motion-honored: true keyboard-nav: 'tab order: skip-link → masthead → primary CTA → hero prompt → footer; Esc dismisses modals.' prose-line-length: 'capped at 720px on text pages; studio + gallery bleed wider.' dark-mode: none # Pika is light-only; the cream canvas is the brand surface. colors-dark: none # no dark variant offered. --- ## 1. Visual Theme & Atmosphere Pika opens as a warm, sunlit room. The canvas is a cream off-white `#fcfaf7` — not the clinical `#ffffff` of an enterprise dashboard, not the absolute `#000` of a gallery-AI tool, but a soft paper white with a faint warm cast that reads "approachable" before a single word is processed. Against that cream ground the headline sits in near-black `#0d0d0d`, set in **Telka Extended** — a wide, custom geometric grotesque — at 48px / weight **900**. The fat display weight is the brand's loudest move: where Krea refuses to bold and trusts Swiss restraint, Pika does the opposite, leaning into a chunky, confident, almost editorial-poster headline that gives the playful-AI register its punch. The defining structural decision is the **two-CTA grammar**. Pika ships two differently-coded primary actions side by side: a soft peach `#ffd184` pill with dark text for the *inviting* action ("Sign Up", "Get started"), and a hard black `#000000` pill with white text for the *do-it-now* action ("Generate"). A third near-black `#222222` pill carries supporting actions ("Try on Web"). All three share the same generous **18px radius** — rounder than the 8px most SaaS uses, soft enough to feel friendly, tight enough to stay crisp. The peach-vs-black pairing is instantly recognisable from a thumbnail: warm invitation next to decisive black. The body copy runs Telka at a light **300 weight**, which is the counterweight to the 900 display. The contrast between feather-light body and ultra-bold headline is the page's core typographic tension — relaxed and unhurried in the running text, emphatic and poster-like in the titles. There are no gradients fighting the cream, no neon, no dark-mode drama. The warmth comes from the canvas tint and the peach accent; the energy comes from the weight contrast and the rounded pills. The atmospheric vocabulary: **cream-canvas, warm-light, Telka-Extended-900, feather-300-body, peach-and-black, rounded-18px-pills, playful-confident, two-CTA-grammar, poster-headline, sunlit-studio.** Section rhythm runs 64–128px between blocks — slightly tighter than a gallery hang, breezy rather than austere. Cards lift off the cream with pure-white fills and soft low-opacity shadows; the depth is gentle, never heavy. The whole effect is an AI video tool that feels like a creative toy box rather than a control panel. **Key Characteristics** - Cream off-white canvas `#fcfaf7` — warm paper, not clinical white - Telka Extended display at 48px / weight **900** — chunky poster headlines - Telka body at light **300** weight — feather-light running text, big weight contrast - Two-CTA grammar — peach `#ffd184` invitation + black `#000` do-it-now - 18px CTA radius — rounded, friendly pills (rounder than 8px SaaS default) - Near-black ink `#0d0d0d` as primary text, absolute `#000` for max emphasis - Peach accent `#ffd184` is the only warm chroma in an otherwise neutral page - Pure-white cards lift off the cream with soft, low-opacity shadows - Light-only — no dark variant; the cream is the brand surface - Playful-warm register — creative toy box, not enterprise control panel ## 2. Color Palette & Roles ### Primary - **bg** `#fcfaf7` — cream off-white gallery canvas; the warm paper ground (rgb 252, 250, 247). - **text** `#0d0d0d` — near-black display + body ink; the primary value contrast on cream (rgb 13, 13, 13). - **text-strong** `#000000` — absolute black for max-emphasis headings and the generate CTA fill. - **bg-alt** `#f5f1ea` — one warm step down for inset bands and clip-tile placeholders. ### Brand & Accent - **brand** `#ffd184` — peach; the primary invitation CTA fill and the only warm chroma on the page (rgb 255, 209, 132). - **brand-deep** `#f5be63` — pressed / active peach for the hover state. - **brand-soft** `rgba(255, 209, 132, 0.30)` — peach wash for highlight pills, selection, and the focus glow. - **on-brand** `#222222` — dark ink that sits on the peach button (rgb 34, 34, 34). ### Interactive (the CTA family) - **ink-cta-bg** `#000000` — black "Generate" pill; the decisive do-it-now action. - **ink-cta-text** `#ffffff` — white text on the black / dark pills. - **dark-cta-bg** `#222222` — near-black "Try on Web" pill; supporting dark action (rgb 34, 34, 34). - **link** `#0d0d0d` — links use the near-black ink, underlined for affordance. - **link-hover** `#000000` — deepens to absolute black on hover. - **selected-bg** `rgba(255, 209, 132, 0.30)` — peach-wash selection / active chip. - **disabled** `#b8b8b8` — neutral disabled chrome. ### Neutral Scale - **text** `#0d0d0d` — near-black ink (rgb 13, 13, 13). - **text-muted** `#5c5c5c` — muted grey for captions and secondary copy. - **text-soft** `#8a8a8a` — quietest labels, placeholders, meta. - **text-faint** `#b8b8b8` — disabled text, faint dividers. ### Surface & Borders - **surface-0 (page)** — `#fcfaf7` cream canvas. - **surface-1 (inset band)** — `#f5f1ea` warm step-down. - **surface-2 (card)** — `#ffffff` pure white, lifting off the cream. - **surface-soft** — `#fbf7f0` softest panel, barely off the canvas. - **border** `rgba(13, 13, 13, 0.10)` — 10% near-black hairline, the default rule on cream. - **border-strong** `rgba(13, 13, 13, 0.18)` — emphasized rule on inputs and dividers. - **border-subtle** `rgba(13, 13, 13, 0.05)` — quietest division. ### Shadow Colors Shadows on Pika are **near-black, very-low-opacity, and soft**. The cream canvas wants gentle depth, so cards lift with `rgba(13, 13, 13, 0.05–0.12)` at wide blur radii — a soft drop rather than a hard edge. The brand never tints shadows with the peach; the warmth stays in fills, the shadows stay neutral. Most depth is read as a pure-white card floating a few pixels above the cream, not as a heavy cast. ### Semantic - **success** — bg `rgba(34, 197, 94, 0.12)`, text `#15803d` (green-700). - **warning** — bg `rgba(245, 190, 99, 0.20)`, text `#92600c` (amber-800) — borrows the peach family at low saturation. - **danger** — bg `rgba(220, 38, 38, 0.10)`, text `#b91c1c` (red-700). - **info** — bg `rgba(13, 13, 13, 0.06)`, text `#0d0d0d` — neutral on the warm-light page; Pika doesn't introduce a cold info-blue. Note: semantic text uses **700–800 step colours** so it stays AA-legible against the bright cream ground while keeping the warm, calm register. Saturated 500s would feel loud on the paper. ## 3. Typography Rules ### Font Family - **Display**: `telkaExtended, telka, system-ui, -apple-system, sans-serif` — Telka Extended, the wide cut of Pika's custom geometric grotesque, carries every headline. The extended width plus weight 900 is the brand's poster signature. - **Body**: `telka, system-ui, -apple-system, sans-serif` — Telka regular-width at a light 300 weight sets all running copy; the feather-light body is the deliberate counterweight to the 900 display. - **Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace` — for prompt parameters, durations, dimensions, seed values, and rare inline code. - **OpenType features**: `kern` and `liga` always on; `tnum` (tabular figures) in mono for clip durations and dimensions. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | Display Hero | Telka Extended | 80px | 900 | 1.0 | -0.03em | kern liga | Major launch / campaign hero | | Display Large | Telka Extended | 56px | 900 | 1.05 | -0.02em | kern liga | Section opener | | H1 | Telka Extended | 48px | 900 | 1.05 | -0.02em | liga | Homepage hero — the signature | | H2 | Telka Extended | 32px | 700 | 1.15 | -0.012em | liga | Major section heading | | H3 | Telka Extended | 24px | 600 | 1.25 | -0.005em | — | Sub-section heading | | H4 | Telka Extended | 20px | 600 | 1.3 | normal | — | Card heading | | H5 | Telka | 16px | 600 | 1.4 | normal | — | Inline emphasis | | Eyebrow | Telka | 12px | 600 | 1.4 | 0.06em | uppercase | Section pre-label | | Body Large | Telka | 18px | 300 | 1.55 | normal | — | Lede paragraph | | Body | Telka | 16px | 300 | 1.55 | normal | — | Default body | | Body Small | Telka | 14px | 300 | 1.5 | normal | — | Compact UI body | | Label | Telka | 13px | 500 | 1.4 | normal | — | UI labels, chips, buttons | | Caption | Telka | 12px | 500 | 1.4 | 0.02em | — | Image captions, helper | | Caption Tabular | mono | 12px | 500 | 1.4 | normal | tnum | Clip duration, dimensions | | Code | mono | 13px | 400 | 1.55 | normal | tnum | Prompt params, seeds | ### Principles - **The 900-vs-300 weight contrast is the brand statement.** Telka Extended at weight 900 for display and Telka at weight 300 for body is the single most identifying typographic move. The fat headline carries all the energy; the feather body keeps the page relaxed. - **Display always uses the Extended cut.** Headlines (h1–h4) are Telka *Extended*; body and labels are regular Telka. Don't set a headline in the regular width — the poster character collapses. - **Negative tracking scales with size.** -0.03em at 80px, -0.02em at 48px, easing to normal by 20px and below. Big type tightens; small type stays open. - **Body stays light (300).** Telka at 300 is the brand's reading weight; bumping body to 400+ loses the relaxed, airy feel. Reserve 500 for labels and buttons where legibility at small sizes matters. - **Eyebrows are 12px / 600 / uppercase / 0.06em.** A compact, slightly-tracked pre-label sets section context without competing with the 900 headline. - **Mono only for data.** Clip durations (`0:08`), dimensions (`1280×720`), seeds, and prompt parameters — never UI chrome or button labels. - **No italics in display.** Italics belong to citations and image captions in body copy. - **Line length capped at 720px.** On text pages running copy never exceeds the prose width; studio and gallery views bleed wider for the work. ## 4. Component Stylings ### Buttons **Primary (Peach Invitation)** - Background: `#ffd184` peach. Text: `#222222`, Telka 500 / 15px. - Padding: `10px 18px`. Radius: `18px`. No border. - Hover: bg → `#f5be63`; transition `240ms ease-standard`. - Active: slight 0.98× press; bg holds `#f5be63`. - Focus: 3px peach glow `rgba(255, 209, 132, 0.50)` with 2px offset. - Use: Inviting primary CTA — *Sign Up, Get started, Join.* **Generate (Black Do-It-Now)** - Background: `#000000`. Text: `#ffffff`, Telka 500 / 15px. - Padding: `10px 18px`. Radius: `18px`. No border. - Hover: bg → `#1a1a1a`. - Use: Decisive action CTA — *Generate, Render, Create.* The black pill is the moment of commitment. **Dark Secondary (Near-Black)** - Background: `#222222`. Text: `#ffffff`, Telka 500 / 15px. - Padding: `10px 18px`. Radius: `18px`. No border. - Hover: bg → `#000000`. - Use: Supporting dark action — *Try on Web, Open app.* **Ghost (Quiet Outline)** - Background: transparent. Text: `#0d0d0d`, Telka 500 / 15px. - Border: `1px solid rgba(13, 13, 13, 0.18)`. Padding: `10px 18px`. Radius: `18px`. - Hover: bg → `rgba(13, 13, 13, 0.04)`; border → `rgba(13, 13, 13, 0.30)`. - Use: Tertiary actions, nav, "Learn more" on cream. ### Cards **Content Card** - Background: `#ffffff`. Border: `1px solid rgba(13, 13, 13, 0.10)`. Radius: `16px`. Padding: `24px`. - Shadow: `rgba(13, 13, 13, 0.05) 0 1px 2px` at rest; on hover `rgba(13, 13, 13, 0.08) 0 4px 16px`. - Use: Feature card, pricing tier, blog entry — pure white lifting off the cream. **Clip Tile (Gallery)** - Background: `#f5f1ea` (placeholder ground while clip loads). Border: none. Radius: `16px`. Aspect: 16:9. - Hover: 1.02× scale + `rgba(13, 13, 13, 0.12) 0 16px 40px -8px` soft shadow. - Use: Generated-clip gallery — videos auto-loop muted, radius matches the card system. **Inset Card** - Background: `#fbf7f0`. Border: `1px solid rgba(13, 13, 13, 0.05)`. Radius: `12px`. Padding: `16px`. - Use: Quiet info zone — tip callout, in-feed announcement on the cream. ### Badges, Tags, Pills **Tag Chip** — bg `rgba(255, 209, 132, 0.30)` peach wash, text `#222222`, Telka 500 / 12px, padding `4px 12px`, radius `9999`. Hover deepens the wash to `0.40`. **Neutral Chip** — bg `rgba(13, 13, 13, 0.06)`, text `#0d0d0d`, radius `9999`. Used for non-brand categories and filters. **Eyebrow Label** — no chrome, just type. Telka 600 / 12px / uppercase / 0.06em tracking, colour `#5c5c5c`. ### Inputs / Forms **Text Input** - Background: `#ffffff`. Border: `1px solid rgba(13, 13, 13, 0.18)`. Radius: `8px`. Padding: `10px 14px`. - Font: Telka 300 / 15px. Placeholder: `#8a8a8a`. - Focus: `0 0 0 3px rgba(255, 209, 132, 0.50)` peach glow, border → `#0d0d0d`. - Error: border → `#b91c1c`, helper red below. **Prompt Input (Studio)** - Background: `#ffffff`. Border: `1px solid rgba(13, 13, 13, 0.10)`. Radius: `18px`. Padding: `14px 16px 14px 20px`. - Font: Telka 300 / 16px. Placeholder: `#8a8a8a`. - Inner button: 40px black `#000000` circle with white arrow icon, hard-right. - Focus: peach glow grows to 3px. - Use: Studio entry — the wide rounded prompt box where you describe a clip. ### Navigation - Header height `64px`. Background `#fcfaf7` (cream), `backdrop-filter: blur(10px)` + a `border-subtle` hairline on scroll. - Logo: Pika wordmark in near-black `#0d0d0d`, Telka Extended. - Nav links: Telka 500 / 15px, colour `#0d0d0d`, padding `8px 12px`. Hover: text → `#5c5c5c`. - Right-side: ghost link cluster + peach "Sign Up" pill + (in-app) black "Generate" pill. - Mobile (<640px): hamburger collapses to a full-screen cream sheet; links stack at 18px / 500. ### Optional Components **Dropdown Menu** — bg `#ffffff`, border `rgba(13, 13, 13, 0.10)`, radius `12px`, shadow `rgba(13, 13, 13, 0.12) 0 16px 40px -8px`. Items: Telka 300 / 15px, hover bg `rgba(13, 13, 13, 0.04)`. **Tooltip** — bg `#0d0d0d`, text `#ffffff`, radius `8px`, padding `6px 10px`, font `12px / 500`. **Toast** — bg `#ffffff`, border `rgba(13, 13, 13, 0.10)`, radius `12px`, padding `12px 16px`, shadow `rgba(13, 13, 13, 0.12) 0 8px 24px -4px`. **Modal** — bg `#ffffff`, radius `16px`, shadow `rgba(13, 13, 13, 0.20) 0 24px 64px -12px`, max-width `560px`. Backdrop: 40% black over the cream. ## 5. Layout Principles ### Spacing System - **Base unit**: 4px. - **Scale**: 0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 — breezy but compact. - **Density observation**: Pika is *medium-dense* at the chrome level (64–128px section rhythm) and *packed* at the gallery level (tight clip-tile grids). The marketing chrome breathes; the studio and gallery pack tiles edge to edge. ### Grid & Container - **Page max width**: `1280px` — a comfortable centred frame, narrower than Krea's 1440 cinematic span. - **Site gutter**: `clamp(20px, 5vw, 64px)` — generous on desktop, tight on mobile. - **Grid**: 12 columns with 24px gutters. - **Hero treatment**: 48px Telka Extended headline, 18px light body below, peach + black CTA pair, then the prompt box or demo-clip strip. ### Whitespace Philosophy The whitespace is **warm and breezy**. Section gutters run 64–128px between major blocks; minor blocks sit on 32–64px gaps; intra-section spacing uses 16–32px. The cream canvas makes generous space feel inviting rather than empty — the warmth fills the gaps the way an off-white wall does in a sunlit room. ### Section Cadence - Hero (cream, headline + CTA pair + prompt) → Feature ladder (cream, white cards) → Clip gallery (cream, packed 16:9 tile grid) → Pricing (cream, white tier cards) → CTA band → Footer (`#f5f1ea` warm inset). - The whole site stays on the cream canvas; the only true dark fields are the black CTAs and the occasional clip thumbnail. - Section breaks are vertical space plus occasional 1px `border-subtle` hairlines. ## 6. Shapes & Radius Scale | Tier | Value | Use | |---|---|---| | Micro | 2px | Decorative dividers, icon-corner inheritance | | Standard (sm) | 4px | Compact chips, tight tags | | Comfortable (md) | 8px | Text inputs, small controls | | Relaxed (lg) | 12px | Inset cards, dropdowns, toasts | | Large (xl) | 16px | Content cards, clip tiles, modals | | CTA | 18px | Buttons — Pika's signature rounded pill | | Pill | 9999px | Tag chips, filter pills, avatar | Pika's signature radius is **18px on buttons** — rounder than the 8px most SaaS uses, soft enough to feel playful, tight enough to stay crisp. Cards and clip tiles land at 16px; inputs at 8px; chips fully round at `9999px`. There are no zero-radius surfaces; the whole system reads soft and friendly, in keeping with the warm-light register. ## 7. Depth & Elevation | Level | Treatment | Use | |---|---|---| | 0 | Flat — no shadow | Cream page canvas, hero, body sections | | 1 | `rgba(13,13,13,0.05) 0 1px 2px` | Resting cards, chips | | 2 | `rgba(13,13,13,0.08) 0 4px 16px` | Hover-lifted cards | | 3 | `rgba(13,13,13,0.12) 0 16px 40px -8px` | Clip tile hover, dropdowns, popovers | | 4 | `rgba(13,13,13,0.20) 0 24px 64px -12px` | Modals, dialogs | ### Shadow Philosophy Pika's depth is **soft, neutral, and low-opacity**. The cream canvas wants gentle lift, so cards float a few pixels above the ground with near-black shadows at 5–20% opacity and wide blur — a soft drop, never a hard edge. The primary elevation cue is a pure-white card surface against the warm cream, so most separation reads as the value step (`#fcfaf7` → `#ffffff`) before the shadow even registers. The brand never tints shadows with the peach — warmth lives in fills, shadows stay neutral grey-black. ## 8. Interaction & Motion ### Easing Curves - **`ease-standard`**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover, focus, colour transitions. - **`ease-emphasized`**: `cubic-bezier(0.2, 0, 0, 1)` — punchier exit; modal enter, hero reveal. - **`ease-bounce`**: `cubic-bezier(0.34, 1.56, 0.64, 1)` — a slight overshoot for playful moments (CTA press-release, chip add). Used sparingly to match the friendly register. ### Duration Buckets - **Fast (150ms)** — colour transitions, focus rings, link hovers. - **Standard (240ms)** — button hover, card hover, dropdown reveal. - **Slow (320ms)** — modal enter/exit, section fade-in, clip-tile reveal. ### Per-Component Micro-States - **Button hover (peach)**: bg `#ffd184` → `#f5be63` over 240ms; no transform. - **Button hover (black/dark)**: bg `#000000` → `#1a1a1a` (or `#222` → `#000`) over 240ms. - **Button press**: 0.98× scale with `ease-bounce` on release. - **Card hover**: shadow level 1 → 2 over 240ms; no border change. - **Clip tile hover**: scale 1.02× over 240ms + level-3 soft shadow; clip plays. - **Link hover**: colour `#0d0d0d` → `#000000` over 150ms; underline thickens. - **Input focus**: 3px peach glow fades in over 150ms; border picks up `#0d0d0d`. ### Page Transitions Demo clips auto-play loops with `prefers-reduced-motion` honoured (they pause to a poster frame). Below-fold sections use `IntersectionObserver` to fade in at 80% viewport, 320ms, 12px translate-up. ### Reduced Motion `@media (prefers-reduced-motion: reduce)` — looping demo clips pause and show a static poster; all transforms (scale, bounce, translate) collapse to opacity-only; durations halve. ## 9. Accessibility & A11y ### Contrast Pairs - **`#0d0d0d` text on `#fcfaf7` cream bg**: 18.9:1 — AAA at all sizes. - **`#5c5c5c` muted on `#fcfaf7` bg**: 7.0:1 — AAA at body sizes. - **`#8a8a8a` soft on `#fcfaf7` bg**: 3.9:1 — AA large only; reserve for placeholders, not running copy. - **`#222222` text on `#ffd184` peach CTA**: 8.9:1 — AAA at body sizes; safe for the peach button. - **`#ffffff` text on `#000000` generate CTA**: 21.0:1 — AAA at all sizes. - **`#ffffff` text on `#222222` dark CTA**: 15.9:1 — AAA at all sizes. - **`#0d0d0d` text on `#ffffff` card**: 20.1:1 — AAA at all sizes. ### Focus Indicators - Default ring: 3px peach glow `rgba(255, 209, 132, 0.50)` with 2px offset. - On pure-white surfaces where the peach glow lacks contrast, fall back to a 2px solid `#0d0d0d` outline. - All interactive surfaces show a visible focus state. ### ARIA Patterns - **Navigation**: `