Crunchyroll
A design blueprint Spectr produced from Crunchyroll. Scroll to look closer.
Ship a cinematic, anime-first streaming app with Crunchyroll-grade polish
A complete UI blueprint of the Crunchyroll iOS app, documenting the true-black OLED canvas, the single Crunchyroll Orange accent, the full-bleed key-art hero with a bottom-to-black scrim, and the resume-aware episode list. Captured from the real product and distilled into exact tokens an AI agent can build against directly.
Use it as the baseline for any anime, TV, or premium video-streaming app and skip months of taste calibration. Every value is documented to the exact hex, font weight, corner radius, and motion timing — the #000000 canvas, the single #F47521 accent, the #FFC107 Premium badge, the orange episode-progress bar, and the Sub | Dub control.
Screens documented
- Full-bleed anime detail hero with Simulcast badge and gradient scrim
- Full-width orange Start Watching button with icon action row
- Resume-aware episode list with number chip and orange progress bar
- Content badges (Simulcast, Premium, Sub | Dub, New Episode)
- Segmented control with sliding orange underline
- Five-tab bottom bar (Home, Browse, Watchlist, Manga, Profile)
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 Crunchyroll blueprint translates cleanly into an Expo Router app structure.