Max Mobile — design system & UI screens

Entertainment · 4 screens · max.com

A media library for organizing and managing downloaded TV shows and movies. The screen displays a personalized Downloads collection organized by user profile (Anna, Michael), with individual title cards showing thumbnail images, episode counts, file sizes, and expiration dates. Each title is actionable with a chevron to reveal more options, and downloaded content includes metadata like release year and storage size.

Open in Mozaika →

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/max-mobile.

Decoded design system

Max Mobile's decoded design system: background #010101, text #4D4D4D, accent #0E2F5D, link #0E2F5D, primary #0E2F5D; type scale h1 34px / h2 22px / body 17px; 8px spacing base; 12px base radius. The single interactive/action color is #0E2F5D — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#010101`
surface	`#050505`
border	`#0C0C0C`
text	`#4D4D4D`
text_muted	`#303030`
primary	`#0E2F5D`
accent	`#0E2F5D`
link	`#0E2F5D`
button_bg	`#0E2F5D`
button_text	`#010101`

Using these colors

Action color #0E2F5D — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, link, button_bg are all #0E2F5D — one role, not several (the action color).
accent #0E2F5D — 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: 8px
scale: 4px, 8px, 10px, 12px, 13px, 15px, 16px, 24px, 27px, 28px

Radii

base: 12px
button: 12px

Shadows (elevation)

card: rgba(150, 41, 188, 0.314) 0px -5px 30px 0px
overlay: rgba(79, 105, 132, 0.8) 0px -5px 30px 0px

Motion

Micro-interactions run at 500ms (dominant) with ease-in-out.

durations: 500ms · 400ms · 150ms
easings: ease-in-out · ease
animated properties: transform, opacity, background-color

Native design tokens

Token	Value
`--emea-plan-picker-button-color`	`#3D6A99`
`--emea-plan-picker-button-hover-color`	`rgba(61, 106, 153, .75)`
`--emea-plan-picker-button-text-color`	`#FFFFFF`
`--emea-plan-picker-accent-color`	`#71B8F2`
`--emea-plan-picker-stripe-background`	`#E9EBF2`

Button states (measured)

primary hover: background rgba(61, 106, 153, 0.75)

Layout (measured)

container max-width: 1140px
nav: 56px fixed
common grid: 2 columns

Motion choreography (measured)

Load order: section.band → div.text-center×2 → div.text-center×2 → li×3 → li.active×3 → div.carousel-item×6

Responsive (measured)

breakpoints: 576px · 768px · 992px · 1200px
mobile (390px): hero 39px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →