MUBI Design System

MUBI's homepage reads less like a streaming service and more like the masthead of an arthouse film journal. The page stacks four edge-to-edge bands — a black hero with a sunset still and the uppercase declaration "WATCH GREAT CINEMA LIKE NOWHERE ELSE", a white middle band with a wireframe-illustrated "ANY FILM. ANY SCREEN. ANY TIME. ANY WHERE." manifesto, a black photograph of a "cinema community" audience shot from below, and a final white CTA band carrying the same headline as the hero. Type runs Riforma — a single proprietary geometric sans — at a strict weight 300 / weight 500 binary, with all-caps treatment on every heading and button. The only chroma anywhere on the page is MUBI Blue ("#001489"), a deep cobalt that fills exactly one button per band and signals the in-canvas navigation links inside the footer.

This page packages MUBI's homepage chrome into a single DESIGN.md file built on the Google Labs spec. Inside: 18 color tokens organized into one brand voltage, dual black-and-white canvases, three charcoal mid-steps for borders and muted text, and a hairline pair; 13 typography tokens spanning a "10px–60px" range, all in Riforma with strict weight-300/500 split and uppercase treatment on every display tier; one corner radius (zero); a 9-step spacing scale; and 19 component recipes covering the cobalt-on-black "Get Started" pill, the email-and-CTA inline pair, the alternating canvas bands, the Notebook editorial card, and the page-bottom language picker. Every value here is render-time measurement — the extraction picked up only one CSS custom property on ":root", confirming MUBI ships hard-coded hex literals and inline styles rather than a token API.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent writes editorial cinema-marketplace surfaces that match MUBI's actual voice — alternating black-and-white canvas bands, uppercase Riforma display, single-cobalt CTA voltage, zero-radius card geometry — rather than defaulting to a generic streaming or SaaS theme. Or reference the tokens directly: every hex, font stack, radius, and spacing value is a quoted DESIGN.md value ready for Tailwind config, CSS variables, or your own component library. The system is worth studying as a counter-Netflix proposition — same category, opposite design move: MUBI rejects rounded cards, multi-step weight ladders, and gradient washes, and trusts photography plus typographic restraint to carry every screen.