Pika — design system & UI screens
Soft light hero with an describe-your-story generate box and a play-with-experiments shelf.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/pika.
Decoded design system
Pika's decoded design system: background #FCFAF7, text #222222, accent #FFD184, link #CFC3FF, primary #FFD184; type scale h1 48px / h2 35px / body 17px; 8px spacing base; 3px base radius. The single interactive/action color is #FFD184 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FCFAF7 |
| surface | #EEEDEA |
| border | #DBD9D7 |
| text | #222222 |
| text_muted | #747472 |
| primary | #FFD184 |
| accent | #FFD184 |
| link | #CFC3FF |
| secondary | #FFEDD2 |
| button_bg | #FFD184 |
| button_text | #222222 |
Using these colors
- Action color
#FFD184— the single interactive color; only on things you click or must notice, never large fills. primary,accent,button_bgare all#FFD184— one role, not several (the action color).- accent
#FFD184— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. - link
#CFC3FF— fails contrast on the background (~1.6:1) — this is a dark UI color, NOT a readable link; use the text or action color for links (verify against the reference). - secondary
#FFEDD2— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: TelkaExtended
- Body: Telka
- h1: 48px
- h2: 35px
- body: 17px
Spacing
- base unit: 8px
- scale: 4px, 6px, 8px, 9px, 12px, 14px, 16px, 20px, 32px, 40px
Radii
- base: 3px
- button: 18px
Motion
Micro-interactions run at 150ms (dominant) with cubic-bezier(0.23, 1, 0.32, 1).
- durations: 150ms · 200ms · 500ms
- easings:
cubic-bezier(0.23, 1, 0.32, 1)·cubic-bezier(0.33, 1, 0.68, 1) - animated properties: background-color, border-color, transform, color
Native design tokens
| Token | Value |
|---|---|
--content-light-primary | #fff |
--content-light-secondary | #fcfaf7d9 |
--content-light-tertiary | #fcfaf7b3 |
--content-light-quaternary | #fcfaf780 |
--content-dark-primary | #0d0d0d |
--content-dark-secondary | #222 |
--content-accent-primary | #cfc3ff |
--content-accent-tertiary | #cfc3ff80 |
--surface-light-2 | #fcfaf7 |
--surface-light-5 | #ffffff1a |
…and 84 more measured on the page.
Button states (measured)
- primary hover: background
#222222
Layout (measured)
- container max-width:
720px - nav: 70px fixed
- common grid: 3 columns
Motion choreography (measured)
Load order: body.overflow-x-hidden!
Scroll reveal: 8 elements rest at opacity 0, translateY(30px), animate in over 500ms.
Responsive (measured)
- breakpoints: 375px · 640px · 768px · 800px · 1024px · 1200px
- mobile (390px): hero 48px · nav hamburger
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →