Screenshot of Neon Rated

Neon Rated

neonrated.com

The reference for a film-distributor poster wall where the browser is a bare achromatic frame and each film takes over the whole viewport with full-bleed photography, one high-chroma accent, and titanic display type bleeding past 100px.

Film Production flagship

Design tokens

background
surface
text
textMuted
accent
border
tone1
tone2
display
Girott
body
Focal
mono

Do / Don't

Reference it for

  • Full-bleed cinematic hero: edge-to-edge film still as the entire viewport, zero chrome over it except a thin top nav and carousel dots
  • One-accent-per-takeover discipline: a single saturated hue (here cyan on a yellow still) does all the accenting, so the film art carries the colour and the system stays neutral
  • Titanic display type: condensed sans headline (Flatspot / a compact grotesque) at ~120-160px, tight negative tracking, set as two stacked lines low-left over the image
  • Persistent slim nav bar (~56px) with a black wordmark on the accent, plus search / wishlist / account / bag glyphs kept tiny and monospaced-feeling
  • Inline 'GET TICKETS' CTA strip: black rounded bar with a stacked-avatar thumbnail on the left and a circular arrow affordance on the right
  • Tiny bracketed status kicker ([IN THEATERS]) in the accent hue, set above the giant headline as a release-state tag
  • Flat, shadowless component language: cards are raw image frames with 1px silver (#e5e7eb) borders, buttons are 4px-radius rects or 100px pills, depth comes from photography not CSS elevation
  • Achromatic base system for the connective UI: paper #ffffff, bone #f3f3f3, ink #000000, silver borders, with crimson #821e1e reserved for brand moments (wordmark bar, date tags)

Do not copy

  • The film-specific yellow-and-cyan takeover palette (that is one movie's key art, not a reusable brand palette)
  • The NEON wordmark and its black-on-accent lockup
  • The exact crimson marquee #821e1e as your accent (it is NEON's brand-significant colour)
  • The Flatspot and Girott proprietary typefaces by name
  • Actual film titles, poster imagery, and 'GET TICKETS' distributor copy
  • The near-monochrome-only restraint if your product needs functional colour states