Plex
A design blueprint Spectr produced from Plex. Scroll to look closer.
Ship a calm, server-driven personal-media app with Plex-grade polish
A complete UI blueprint of the Plex iOS app, documenting the cool charcoal canvas, the single Plex Yellow accent, the On Deck resume rail, the library poster grid, and the signature multi-server picker. Captured from the real product and distilled into exact tokens an AI agent can build against directly.
Use it as the baseline for any media-server, library, or personal-streaming app and skip months of taste calibration. Every value is documented to the exact hex, font weight, corner radius, and motion timing — the #1F2326 charcoal canvas, the single #E5A00D accent with dark #1A1304 button text, the yellow On Deck progress bar, and the multi-server status picker.
Screens documented
- Home with server picker, On Deck rail and library poster grid
- On Deck resume tile with centered play overlay and yellow progress bar
- Server picker sheet with online or offline status dots and yellow check
- Library poster grid with yellow unwatched corner dots
- Yellow Play button with dark label plus Mark as Watched action
- Five-tab bottom bar (Home, Library, Discover, Live TV, You)
What a Spectr spec includes
Screen-by-screen documentation, complete design system (color, typography, spacing), navigation map, component library, implementation notes, and a Claude Code prompt — everything an AI coding agent needs to build.
Turnaround
Most mobile apps produce a full spec in under 90 seconds from a single screen recording. Upload your own MP4 and watch the blueprint generate live.
Why not a design file?
Design files don't compile. A Spectr spec is optimized for AI coding agents like Claude Code — it produces working code on the first prompt, not layered artboards.
Target stack
Every spec targets Expo SDK 54 and React Native on an iPhone 15 baseline. The Plex blueprint translates cleanly into an Expo Router app structure.