IMDb Mobile — design system & UI screens
Find and book movie tickets at nearby theaters. This screen shows showtimes for a selected film (Zootopia 2) at nearby cinemas in Hollywood, with a date picker for upcoming showtimes, theater listings with addresses and distances, and available time slots per showing. Dark theme layout with a hero image area for the movie, location-based filtering, and action buttons to share or favorite.
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/imdb-mobile.
Decoded design system
IMDb Mobile's decoded design system: background #121212, text #FFFFFF, accent #F1DD2F, link #F1DD2F, primary #F1DD2F; type scale h1 34px / h2 22px / body 17px; 4px spacing base; 12px base radius. The single interactive/action color is #F1DD2F — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #121212 |
| surface | #202020 |
| border | #353535 |
| text | #FFFFFF |
| text_muted | #A4A4A4 |
| primary | #F1DD2F |
| accent | #F1DD2F |
| link | #F1DD2F |
| button_bg | #F1DD2F |
| button_text | #121212 |
Using these colors
- Action color
#F1DD2F— the single interactive color; only on things you click or must notice, never large fills. primary,accent,link,button_bgare all#F1DD2F— one role, not several (the action color).- accent
#F1DD2F— 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.
Typography
- h1: 34px
- h2: 22px
- body: 17px
Spacing
- base unit: 4px
- scale: 4px, 5px, 6px, 8px, 10px, 12px, 16px, 18px, 20px, 24px
Radii
- base: 12px
- button: 12px
Shadows (elevation)
- subtle:
rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px - card:
rgba(0, 0, 0, 0.12) 0px 0px 1px 0px
Motion
Micro-interactions run at 150ms (dominant) with ease.
- durations: 150ms · 200ms · 300ms
- easings:
ease·ease-in-out - animated properties: opacity, color, stroke, transform
Native design tokens
| Token | Value |
|---|---|
--ipt-baseAlt-shade1-color | #1F1F1F |
--ipt-altAccent2-color | #5799EF |
--ipt-on-accent2-color | #FFFFFF |
--color-on-dark-accent3 | #FB3C3C |
--color-accent6 | #981F83 |
--color-on-dark-accent1 | #F5C518 |
--color-on-accent5 | #FFFFFF |
--ipc-blockQuote-base-accent2-color | #e7eff9 |
--color-light-shade2 | #F0F0F0 |
--ipt-on-base-textIcon-color | rgba(0,0,0,.54) |
…and 110 more measured on the page.
Button states (measured)
- primary focus: outline
1px dashed rgb(0, 0, 0)
Layout (measured)
- container max-width:
1280px - nav: 56px relative
- common grid: 3 columns
Motion choreography (measured)
Load order: circle.ipc-loader__dot×15 → div.ipc-shoveler__arrow → div.ipc-reaction-summary×16 → div.sc-797f7458-0
Scroll reveal: 1 elements rest at opacity 0, translateY(100px), animate in over 0.3s ease.
Stagger: circle ×111 — 150ms apart.
Overlay recipe (measured)
palette panel: #1F1F1F · radius 4px
Input (measured)
height 31.25px · radius 0px
Responsive (measured)
- breakpoints: 480px · 600px · 640px · 1024px · 1280px
- mobile (390px): nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →