Modern Dark (Cinema)

Also called: Cinematic dark UI, Streaming UI, Ambient dark

A dark theatre for content: full-bleed key art, colour that bleeds from imagery onto the page, film grain, subtle glass and tall poster type.

“Movie night”Futuristic & TechEra: 2015 → today (streaming era)DreamyLuxuryBoldSerious

Open full screen ↗

modern-dark-cinema / landingEN

modern-dark-cinema / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm4pxRadius md6pxRadius lg10pxRadius xl14pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

full-bleed key artambient light bleedteal & orange gradingfilm graincondensed poster capitalsletterboxed widescreensmoked glass panelswhite “Play” buttonbilling-block metadatared tag bar

Modern Dark (Cinema) treats every screen like a streaming billboard. Large widescreen imagery carries the colour — teal-and-orange grading, glowing horizons — and that colour bleeds outward as soft ambient light onto the near-black page, like a TV in a dark room. Headlines are tall condensed capitals in the manner of film posters, metadata is set like a billing block, panels are barely-there smoked glass, and a fine film grain sits over everything. The UI stays quiet so the pictures can be loud.

Best for

Streaming, film and music platforms
Game launches and trailers
Event, festival and premiere pages
Photography and video portfolios

Avoid for

Form-heavy admin tools
Products with no strong imagery
Bright, friendly family brands

✓ Do

Let one big image per view own the colour; derive glows from it (blur 40–60px, 50–70% opacity)
Set headlines in tall condensed capitals with tight leading (0.95–1.05, Latin only; Thai headings 1.3)
Keep panels near-black smoked glass: rgba(255,255,255,.055) fill, 1px rgba(255,255,255,.11) edge, 14px blur, 10px radius

✕ Don't

Don’t add saturated UI colour that competes with the imagery
Don’t use flat pure #000 with no light — the room needs ambient glow
Don’t use rounded, bubbly type or big radii

Not to be confused with

Dark Mode (OLED) →OLED dark mode is a flat true-black utility theme; Cinema is image-led with colour bleeding off the artwork and film grain.Bold Typography (Poster) →Poster typography makes type the image; Cinema uses condensed caps only as titling over full-bleed graded key art, with the colour coming from the picture.Glassmorphism →Glassmorphism makes the glass panels the hero over colour blobs; Cinema keeps glass almost invisible and lets photography lead.

On mobile

Open on a full-width poster card with the title over the art; keep ambient glow to one blurred layer behind that card, use a solid black tab bar with a white active icon, and drop grain on low-end devices.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinOswald · 500/600

The quick brown fox

Heading · ThaiKanit · 500/600

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinDM Sans · 400/500/700

Clear words make shared decisions.

Body · ThaiPrompt · 300/400/500

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Kanit’s heavy, upright loopless strokes give Thai the same punchy poster presence as condensed Oswald; Prompt keeps body text clean and geometric like DM Sans.

Colour palette

Design tokens

Radius	`sm 4px · md 6px · lg 10px · xl 14px · pill 999px`
Border	`1px`
Shadow	`0 20px 50px rgba(0,0,0,0.6)`
Display	`clamp(3.4rem, 8vw, 6.75rem)`
Motion	`420ms cubic-bezier(.16,1,.3,1)`
Density	`×1.05`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Modern Dark (Cinema) (modern-dark-cinema) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a dark mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Oswald:wght@500;600&family=DM+Sans:wght@400;500;700&family=Kanit:wght@500;600&family=Prompt:wght@300;400;500&display=swap
 */
:root {
  --radius: 10px;
  --background: #09090B;
  --foreground: #F3F0EA;
  --card: rgba(255,255,255,0.055);
  --card-foreground: #F3F0EA;
  --popover: rgba(255,255,255,0.055);
  --popover-foreground: #F3F0EA;
  --primary: #F3F0EA;
  --primary-foreground: #0A0A0C;
  --secondary: #D7261E;
  --secondary-foreground: #FFFFFF;
  --muted: rgba(255,255,255,0.03);
  --muted-foreground: #A39E96;
  --accent: rgba(255,255,255,0.03);
  --accent-foreground: #F3F0EA;
  --destructive: #F0524A;
  --border: rgba(255,255,255,0.11);
  --input: rgba(255,255,255,0.11);
  --ring: #F3F0EA;
  --chart-1: #F08A3C;
  --chart-2: #3FB8C4;
  --chart-3: #F3F0EA;
  --chart-4: #C2386B;
  --chart-5: #8C8780;
  --sidebar: rgba(255,255,255,0.055);
  --sidebar-foreground: #F3F0EA;
  --sidebar-primary: #F3F0EA;
  --sidebar-primary-foreground: #0A0A0C;
  --sidebar-accent: rgba(255,255,255,0.03);
  --sidebar-accent-foreground: #F3F0EA;
  --sidebar-border: rgba(255,255,255,0.11);
  --sidebar-ring: #F3F0EA;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Modern Dark (Cinema) (modern-dark-cinema) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a dark mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Oswald:wght@500;600&family=DM+Sans:wght@400;500;700&family=Kanit:wght@500;600&family=Prompt:wght@300;400;500&display=swap
 */
@theme {
  --color-bg: #09090B;
  --color-surface: rgba(255,255,255,0.055);
  --color-surface-2: rgba(255,255,255,0.03);
  --color-text: #F3F0EA;
  --color-text-muted: #A39E96;
  --color-primary: #F3F0EA;
  --color-on-primary: #0A0A0C;
  --color-secondary: #D7261E;
  --color-on-secondary: #FFFFFF;
  --color-accent: #F0A848;
  --color-border: rgba(255,255,255,0.11);
  --color-success: #4CC38A;
  --color-warning: #F0A848;
  --color-danger: #F0524A;
  --color-chart-1: #F08A3C;
  --color-chart-2: #3FB8C4;
  --color-chart-3: #F3F0EA;
  --color-chart-4: #C2386B;
  --color-chart-5: #8C8780;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.5);
  --shadow-md: 0 20px 50px rgba(0,0,0,0.6);
  --shadow-lg: 0 40px 100px rgba(0,0,0,0.7);
  --font-heading: "Oswald", "Kanit", system-ui, sans-serif;
  --font-body: "DM Sans", "Prompt", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Prompt", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Modern Dark (Cinema) (modern-dark-cinema). Default mode: dark. Fonts: https://fonts.googleapis.com/css2?family=Oswald:wght@500;600&family=DM+Sans:wght@400;500;700&family=Kanit:wght@500;600&family=Prompt:wght@300;400;500&display=swap",
  "color": {
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0353,
            0.0353,
            0.0431
          ],
          "hex": "#09090b"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff",
          "alpha": 0.055
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff",
          "alpha": 0.03
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9412,
            0.9176
          ],
          "hex": "#f3f0ea"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.6196,
            0.5882
          ],
          "hex": "#a39e96"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9412,
            0.9176
          ],
          "hex": "#f3f0ea"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0392,
            0.0471
          ],
          "hex": "#0a0a0c"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8431,
            0.149,
            0.1176
          ],
          "hex": "#d7261e"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.6588,
            0.2824
          ],
          "hex": "#f0a848"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff",
          "alpha": 0.11
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.298,
            0.7647,
            0.5412
          ],
          "hex": "#4cc38a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.6588,
            0.2824
          ],
          "hex": "#f0a848"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.3216,
            0.2902
          ],
          "hex": "#f0524a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.5412,
            0.2353
          ],
          "hex": "#f08a3c"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.7216,
            0.7686
          ],
          "hex": "#3fb8c4"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9412,
            0.9176
          ],
          "hex": "#f3f0ea"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7608,
            0.2196,
            0.4196
          ],
          "hex": "#c2386b"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.549,
            0.5294,
            0.502
          ],
          "hex": "#8c8780"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.5
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 10,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.6
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 20,
            "unit": "px"
          },
          "blur": {
            "value": 50,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.7
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 40,
            "unit": "px"
          },
          "blur": {
            "value": 100,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Oswald",
        "Kanit",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "DM Sans",
        "Prompt",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Prompt",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 420,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.16,
      1,
      0.3,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!