MUBI Design System

Overview

MUBI's homepage chrome is an arthouse film journal printed at screen scale — alternating black-and-white full-bleed bands, all-caps Riforma typography, and a single cobalt ("#001489") button that appears once per band as the only chroma in the layout. The canvas swaps between "#000000" and "#ffffff" four times down the page, and the swap itself is the section divider; there is no border rule, no shadow lift, no gradient wash to separate the hero from the manifesto from the Notebook editorial card from the closing CTA. Every measured corner is "0px" — buttons, inputs, panels, and the language picker all render as flat rectangles, and the page reads as printed broadsheet rather than as application UI.

Type runs Riforma with a Helvetica, Arial, "Lucida Grande" fallback stack. The hero "WATCH GREAT CINEMA LIKE NOWHERE ELSE" lands at "60px" / weight 500 / "84px" line-height / text-transform: uppercase. Section heads ("ANY FILM. ANY SCREEN.", "CINEMA LIKE NOWHERE ELSE.") sit at "32px" or "26px" / weight 500 / uppercase. The "GET STARTED" CTA carries "24px" / weight 500 / uppercase. Marketing body lives at "16px" / weight 300 (Notebook editorial paragraph) and "14px" / weight 300 (navigation, language picker, legal copy). Weight as binary signature: where most editorial brands run a four-weight ladder (300/400/500/600), MUBI uses two — weight 300 for body, weight 500 for chrome — with zero weight 400 in the marketing layout. The gap is the brand's editorial restraint.

The shape language is one radius: zero. The extraction returned an empty radii array; every measured button, input, panel, and tile renders at "0px". Where Netflix rounds every surface to "8px" and Apple pills every interactive element, MUBI rejects radius entirely. The "Get Started" pill isn't a pill — it's a flat "13px 25px" rectangle in cobalt. The email input is a flat rectangle with a 1px hairline. The Notebook editorial card is a flat white panel sitting on a flat white band. The geometry reads as printed page rather than as application UI, and the absence of soft chrome is the system's most distinctive identity move.

Key Characteristics:

• Alternating canvas bands: {colors.canvas-black} ("#000000") hero, {colors.canvas-white} ("#ffffff") manifesto, white Notebook editorial card, black "cinema community" photograph band, white closing CTA. The canvas swap is the section divider.
• Single cobalt voltage: {colors.brand-cobalt} ("#001489") used as the fill on {component.button-primary} (twice), as the border on {component.email-input-focus} (once focused), and as the text color for every link inside {component.footer-band} (12 footer links). Never on hairlines, never on body, never on hero text.
• Strict weight-300 / weight-500 binary: marketing body sits at weight 300 (Notebook copy, nav, language picker); headlines and chrome step up to weight 500. The page contains zero weight-400 or weight-600 tokens in the visible hierarchy.
• Uppercase everywhere it matters: {typography.hero-display}, {typography.section-title}, {typography.button-label}, {typography.label-uppercase}, {typography.link-uppercase}, and {typography.caption-uppercase} all carry text-transform: uppercase. The lowercase tokens are reserved for body and footer link copy.
• Zero-radius geometry: every measured surface renders at {rounded.none} ("0px"). No pill, no card, no chip, no rounded input.
• Footer-as-sitemap in brand voltage: every link inside {component.footer-band} carries {colors.brand-cobalt} text color — the footer is the editorial outline of the platform, not a muted gray legal strip.

Colors

Brand & Accent

• MUBI Blue ({colors.brand-cobalt} — "#001489") — frequency 28. Used as text (12), border (14), bg (2). The single voltage color on the page. Two bg occurrences are the "Get Started" CTAs (one per band); the 14 border occurrences are the focused-state email field plus the footer link underline rests; the 12 text occurrences are every footer navigation link.

Canvas & Surface

• Canvas Black ({colors.canvas-black} — "#000000") — frequency 97. Used as text (49), border (47), bg (1). The dominant ink + canvas tone. Background on the hero and the "cinema community" band; text on every light-canvas band; border on every black-on-white hairline.
• Canvas White ({colors.canvas-white} — "#ffffff") — frequency 83. Used as text (41), border (39), bg (3). The complementary canvas. Background on the manifesto, Notebook, and closing CTA bands; text on every black-canvas band; border on every white-on-dark frame.
• Surface Card Light ({colors.surface-card-light} — "#eaeaea") — frequency 2. Used as bg (2). The off-white tint behind the Notebook product mockup — one step warmer than "#ffffff" so the printed-magazine spread reads as resting on a soft pearl rather than floating in absolute white.

Text & Ink

• Ink Body Muted ({colors.ink-body-muted} — "#666666") — frequency 6. Used as text (3), border (3). The Notebook editorial paragraph body color — a mid-gray that sits one step below black on the white band, signaling secondary copy without dropping to a hairline tone.
• Ink Secondary ({colors.ink-secondary} — "#7d7d7d") — frequency 118. Used as text (59), border (59). The legal-and-footer ink tone — every copyright line, every fine-print mark, every hairline on the language-picker dropdown sits in this gray. The highest-frequency ink after pure black.
• Ink Tertiary ({colors.ink-tertiary} — "#323232") — frequency 6. Used as text (3), border (3). A deep charcoal scoped to the Notebook editorial "READ MORE MOVIES" link affordance — sits between body and pure black so the secondary link reads as ink, not as muted footnote.

Hairlines & Dividers

• Hairline Soft ({colors.hairline-soft} — "#c8c8c8") — frequency 2. Used as border (2). The 1px stroke on the email input at rest and on the language-picker frame. The system's only neutral hairline tone.
• Divider Light ({colors.divider-light} — "#eaeaea") — frequency 2. Used as bg (2). The thin rule between footer columns on the white closing band.

Typography

Font Family

The system runs Riforma for every visible string, with a fallback stack of Helvetica, Arial, "Lucida Grande", sans-serif. Riforma is a geometric humanist sans released by Switzerland's Schick Toikka — MUBI licenses it as the platform-wide voice across web, app, and the print Notebook magazine. There is no secondary serif, no monospace tier, no display-only variant — every size from "10px" caption to "60px" hero is the same Riforma family with weight 300 and weight 500 as the only two stops.

Hierarchy

Principles

Weight as binary signature: the page runs Riforma at weight 300 (body) and weight 500 (chrome) with zero weight 400 or weight 600 in the marketing layout. The single exception is the email-input field text at weight 400, which is the user-typed string and follows browser defaults rather than the brand ladder. Every other character on the page is weight 300 or weight 500 — no middle ground, no display tier above 500, no light tier below 300.

Where most editorial brands run a four-weight ladder (300/400/500/700) and most streaming pages run weight 700+ hero with weight 400 body, MUBI uses two weights and lets case carry the rest. Case as hierarchy: every heading, CTA, label, link tag, and pre-caption renders in text-transform: uppercase; only body copy, footer-link copy, and the legal strip stay in mixed case. The uppercase treatment is the brand's editorial cadence, and removing it from the hero or section heads collapses the broadsheet identity.

Note on Font Substitutes

If Riforma is unavailable, GT Walsheim at weight 500 is the closest geometric-humanist substitute for the display tier, and Söhne at weight 500 is the closest English-grotesque alternative. Inter at weight 500 with text-transform: uppercase and a tight tracking nudge (-1px) is the closest open-source approximation. The key move is preserving the weight-300 / weight-500 binary plus the uppercase display treatment — pick a geometric sans with both weights drawn and skip the intermediate tiers.

Layout

Spacing System

• Base unit: asymmetric — section padding follows a {spacing.section-md} ("50px 0px") / {spacing.section-lg} ("80px 0px") / {spacing.section-xl} ("170px 0px") ladder for the bands themselves, while interactive padding uses {spacing.cta} ("13px 25px") for the CTA and {spacing.input} ("21px 16px") for the email field.
• Tokens: {spacing.xs} "8px" · {spacing.sm} "12px" · {spacing.md} "20px" · {spacing.base} "22px" · {spacing.lg} "28px" · {spacing.cta} "13px 25px" · {spacing.input} "21px 16px" · {spacing.section-md} "50px 0px" · {spacing.section-lg} "80px 0px" · {spacing.section-xl} "170px 0px".
• Section gutters: the hero band carries "170px 0px" top/bottom — by far the largest gutter on the page, giving the sunset still and the uppercase hero room to breathe. The manifesto and Notebook bands sit at "80px 0px"; the closing CTA at "70px 0px".
• Page horizontal gutter: {spacing.base} ("0px 22px") — the standard horizontal rule used by both the top nav and the footer columns.

Grid & Container

• Single-column funnel: five stacked full-bleed bands — hero ("170px" gutters), manifesto ("ANY FILM. ANY SCREEN."), Notebook editorial card, cinema-community photographic band, closing CTA. No sidebar, no fixed nav, no in-page jump links.
• Notebook editorial layout: two-column inside the white band — printed-magazine product render on the left at "50%" width, weight-300 body paragraph plus "READ MORE MOVIES" link on the right.
• Inline email pair: the email field plus "Get Started" CTA appear together in both the hero and the closing CTA band — the email is "400px" wide, the button is "216px" wide, and they sit on the same baseline with zero gap between them (both are zero-radius rectangles meeting edge-to-edge).
• Footer sitemap: the closing white band houses a multi-column footer where every link carries {colors.brand-cobalt} text color; the legal copyright caption underneath drops to {colors.ink-secondary} ("#7d7d7d") gray.

Whitespace Philosophy

The system favors band-level breathing room over component-level padding. The hero gets "170px 0px" gutters — the largest in the system — while interactive elements are tightly packed: the CTA carries "13px 25px" padding, the email input "21px 16px". The page reads as tall and intentionally paced; each band is a single editorial spread, and the vertical scroll reads as flipping through a printed magazine rather than as scrolling a stacked SaaS landing page.

Elevation

Shadow Philosophy: the extracted page carries zero box-shadow declarations across measured surfaces. Depth comes entirely from the canvas swap between black and white bands. Where most editorial publishers reach for a soft drop-shadow under product mockups to lift the magazine cover off the page, MUBI sits the Notebook spread directly on a flat "#eaeaea" tint — the tone step is the depth, and the absence of any shadow is the brand's editorial signal. The page reads as printed signature folds stacked vertically, not as floating cards on a unified surface.

Shapes

The system runs one radius: {rounded.none} ("0px"). Every measured corner across button, input, panel, language picker, and footer tile renders square. The "Get Started" pill isn't a pill — it's a "64px"-tall flat rectangle in cobalt. The email input is a "64px"-tall flat rectangle with a 1px hairline. The Notebook editorial card is a flat panel. The language-picker dropdown is a flat rectangle. Square geometry as editorial signal: where Netflix establishes continuity with one shared "8px" rounding and Apple uses full pills on every interactive element, MUBI rejects radius — the layout reads as printed page rather than as application UI. Adding any radius (even a single "2px" softening on the CTA) breaks the broadsheet identity.

Components

Buttons

button-primary — {colors.brand-cobalt} ("#001489") fill, {colors.on-cobalt} ("#ffffff") text, "0px" radius, "13px 25px" padding, "64px" tall, no border. The signature "GET STARTED" rectangle — appears once in the hero email-capture and once in the closing CTA band. Carries {typography.button-label} at "24px" / weight 500 / uppercase.

button-primary-hover — Same fill and shape as {component.button-primary} with opacity: "0.85" on hover. No color swap, no inset shadow — the only state change is a flat opacity step.

button-secondary — {colors.canvas-white} fill, {colors.ink-on-light} text, "0px" radius, "13px 25px" padding, 1px black border. Used for non-CTA actions on light bands (e.g. "WATCH NOW" affordances). Same flat-rectangle shape as the primary, with the cobalt swapped for an outline-on-white treatment.

Inputs

email-input — {colors.surface-input} ("#ffffff") fill, {colors.ink-on-light} ("#000000") text, "0px" radius, "21px 16px" padding, "64px" tall, 1px {colors.hairline-soft} ("#c8c8c8") border. The inline email-capture field. The asymmetric padding gives room for the "Email Address" placeholder. The field appears twice — once in the hero, once in the closing CTA band.

email-input-focus — Same fill and shape as {component.email-input}, with the border swapping to 1px {colors.brand-cobalt} ("#001489") on focus. The only focused-state visual on the page; no glow, no fill change.

Bands & Surfaces

hero-section — {colors.canvas-black} ("#000000") background, white text, "170px 0px" padding. Houses the hero headline in {typography.hero-display} (uppercase Riforma at "60px" / weight 500), the sunset still as a full-bleed background, and the email-input + cobalt-CTA pair anchored to the bottom-left.

band-dark — {colors.surface-band-dark} fill, white text, "80px 0px" padding. The "cinema community" photographic band sits in this token — a black canvas carrying a full-bleed audience photograph with an overlaid uppercase pre-caption ("CINEMA LIKE NOWHERE ELSE.").

band-light — {colors.surface-band-light} fill, black text, "80px 0px" padding. The manifesto band ("ANY FILM. ANY SCREEN. ANY TIME. ANY WHERE.") sits in this token — a white canvas with the uppercase section title in {typography.section-title} and a wireframe-illustrated tablet/laptop/phone illustration row.

notebook-card — {colors.canvas-white} fill, black text, "0px" radius, "50px 0px" vertical padding, no border. The two-column Notebook editorial section — printed-magazine product mockup left, weight-300 body paragraph right.

notebook-body — {colors.canvas-white} fill, {colors.ink-body-muted} ("#666666") text in {typography.body-base} ("16px" / weight 300 / "22.4px" line-height). The signature MUBI editorial copy — sits in a mid-gray that's neither black nor hairline, reading as printed-magazine running text.

closing-cta-band — {colors.canvas-white} fill, black text, "70px 0px" padding. The final band before the footer — carries the "CINEMA LIKE NOWHERE ELSE." headline in {typography.section-head-h2} plus the email-input + cobalt-CTA pair repeated from the hero.

inline-email-pair — {colors.canvas-white} fill, black text, "0px" radius, zero gap between the email field and the button. The two-rectangle inline pair that appears in both the hero (over the black band, inverted) and the closing CTA band — the button sits flush against the input edge, sharing the same "64px" height.

Navigation & Footer

top-nav — {colors.canvas-black} fill, white text, "0px 22px" padding. Houses the MUBI wordmark top-left and the Sign In link top-right. No drop shadow, no border, no fixed positioning — sits flush at the top of the hero band.

footer-band — {colors.canvas-white} fill, {colors.brand-cobalt} ("#001489") text in {typography.body-sm} ("14px" / weight 300), "50px 0px" padding. The multi-column sitemap-as-footer — programming, Notebook, FilmLib, gift cards, contact links. Every link inside this band uses the cobalt as its text color, which is unusual for a footer (most marketing pages use muted gray here).

footer-link — {colors.canvas-white} fill, {colors.brand-cobalt} text in {typography.body-sm}, "0px 15px 0px 0px" padding. The individual link inside the footer-band; 15 horizontal padding on the right gives breathing room between links in a row.

legal-caption — {colors.canvas-white} fill, {colors.ink-secondary} ("#7d7d7d") text in {typography.body-xs} ("12px" / weight 300). The "© MUBI" copyright strip plus reCAPTCHA legal text at the very bottom — the only place on the page that drops to gray text.

Utility

language-picker — {colors.canvas-white} fill, black text, "0px" radius, "8px 0px 0px" padding, 1px {colors.hairline-soft} border. The single dropdown affordance in the closing footer — region toggle for the MUBI locale (en/il, en/us, en/uk, etc.).

divider — {colors.divider-light} ("#eaeaea") 1px rule. Used between footer columns on the closing white band; the only horizontal rule anywhere in the layout.

uppercase-caption — {colors.canvas-black} fill, white text, {typography.caption-uppercase} ("14px" / weight 500 / uppercase). The small "WATCH GREAT CINEMA" pre-caption that sits above the hero headline on the black hero band.

notebook-cta — {colors.canvas-white} fill, black text, "0px" radius, "12px 0px 0px" top padding, no border. The "READ MORE MOVIES" link affordance inside the Notebook editorial card; carries {typography.link-uppercase} ("18px" / weight 500 / uppercase) and renders as an underlined inline link rather than as a pill.

Do's and Don'ts

Do

• Reserve {colors.brand-cobalt} ("#001489") for the three sanctioned uses — the "Get Started" CTA fill, the focused-state email-input border, and every link inside the footer-band. Adding a fourth cobalt surface (a cobalt hairline, a cobalt label tag, a cobalt headline) breaks the single-voltage discipline.
• Alternate {colors.canvas-black} and {colors.canvas-white} between bands and let the canvas swap be the section divider. Borders or rules between bands collapse the broadsheet rhythm.
• Run every display tier ({typography.hero-display}, {typography.section-title}, {typography.button-label}, {typography.label-uppercase}) with text-transform: uppercase. Case carries the hierarchy.
• Use weight 300 for body and weight 500 for chrome. The two-weight binary is the brand silhouette.
• Render every interactive surface at {rounded.none} ("0px"). One-radius geometry is the system's printed-page identity.

Don't

• Don't round the "Get Started" CTA to "8px" or pill it — every measured corner on the page is "0px", and adding a single "2px" softening reads as application UI rather than as printed broadsheet. Keep the rectangle flat.
• Don't introduce a weight-400 or weight-700 display tier. The system runs Riforma at weight 300 and weight 500 only; adding 400 collapses the body-to-chrome gap, and 700 ruins the editorial restraint.
• Don't render the footer in muted gray ("#666666" or "#7d7d7d") — every footer link uses {colors.brand-cobalt} ("#001489"). The cobalt-on-white footer is the editorial sitemap signal; dropping it to gray turns the footer into a generic legal strip.
• Don't add a box-shadow under the Notebook product mockup. The page carries zero shadow declarations; the "#eaeaea" backdrop tone is the lift, and a soft drop-shadow reads as SaaS card chrome rather than as printed-magazine cover art.
• Don't use mixed-case display headings. The hero ("WATCH GREAT CINEMA LIKE NOWHERE ELSE") and every section head render in uppercase — dropping to title-case or sentence-case breaks the typographic broadsheet cadence.
• Don't use {colors.ink-secondary} ("#7d7d7d") for body copy — it's the legal-and-copyright-only tone with all 118 occurrences scoped to fine print and footer hairlines. Body text on the white band sits in {colors.ink-body-muted} ("#666666"); body text on the black band sits in {colors.ink-on-dark} ("#ffffff").

Known Gaps

• Motion and transitions: the hero sunset still carries a slow horizontal pan, and the email-input border animates from {colors.hairline-soft} to {colors.brand-cobalt} on focus — exact easing curves and durations are not captured in this DESIGN.md.
• Hover states: the footer links underline-fade on hover and the "Get Started" CTA drops to opacity: "0.85", but precise transition timings aren't extracted.
• Authenticated product UI: this spec covers only the signed-out marketing homepage. The actual streaming product — the "Film of the Day" tile, the program grid, the player chrome, the Notebook magazine reader, the FilmLib browse view — uses a parallel token set with film-still thumbnails and editorial-side rails that aren't part of this DESIGN.md.
• Localized hero variants: the hero copy ("WATCH GREAT CINEMA LIKE NOWHERE ELSE") changes per locale, and some markets carry a different CTA pill copy ("Try MUBI Free", "Start Watching"); the localization framework is not part of this DESIGN.md.
• The Notebook print magazine: MUBI's Notebook is a printed-and-digital magazine with its own typographic system (a Riforma-paired serif for long-form essays); this DESIGN.md captures the homepage card preview but not the magazine reader's tokens.
• Cookie consent and locale overlays: these live as separate components outside the marketing-band chrome and aren't part of the captured surface.