# Modern Dark (Cinema) > 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. - Nickname: Movie night - Also called: Cinematic dark UI, Streaming UI, Ambient dark - Category: Futuristic & Tech - Moods: Dreamy, Luxury, Bold, Serious - Industries: Media & Entertainment, Gaming, Creative & Portfolio, Luxury & Premium, Travel & Hospitality - Style page: https://uilingo.dev/styles/modern-dark-cinema/ 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 ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Modern Dark (Cinema)" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line 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. Design keywords: full-bleed key art, ambient light bleed, teal & orange grading, film grain, condensed poster capitals, letterboxed widescreen, smoked glass panels, white “Play” button, billing-block metadata, red tag bar. ## Visual language A dark theatre for content. Big widescreen key art — teal-and-orange graded skies, a flat glowing sun on the horizon, night-city silhouettes — carries all the colour, and that colour spills off the image as soft ambient light onto a near-black page, like a TV glowing in a dark room. Headlines are tall condensed capitals in the manner of film posters, metadata is set like a billing block in tracked small caps, panels are barely-there smoked glass, and a fine film grain sits over everything. The UI stays quiet and neutral (white 'Play' button, one red accent) so the pictures stay loud. ## Signature details (must be visible) - Full-bleed billboard hero, min-height: min(92vh, 880px): key art covering the section with a left-to-right darkening scrim linear-gradient(90deg, rgba(9,9,11,.94) 0%, rgba(9,9,11,.6) 38%, transparent 70%) and a bottom fade to the page colour. Hero copy is LEFT-aligned and anchored bottom-left (max-width 640px, padding-bottom 96px), never centred - Key art is a graded film still, never a 3D render. Without photos, paint it in CSS/inline SVG: sky linear-gradient(180deg, #0B2129 0%, #1C4A52 38%, #3E5A55 56%, #E08A45 63%, #2A1A12 68%); a crisp flat sun disc radial-gradient(circle at 70% 64%, #FFE2B0 0 4.5%, #F8B062 5%, rgba(240,138,60,.7) 8%, rgba(240,138,60,.22) 20%, transparent 40%) half-sunk behind the skyline; then two crisp, never-blurred silhouette layers (clip-path or SVG path): far #22140D and near #070505. Never a shaded or specular 3D sphere, never a blurred sun - Ambient bleed: duplicate each image (or CSS scene) as an absolutely positioned sibling with filter: blur(48px) saturate(1.5); opacity .6; z-index:-1 — the parent gets position:relative; isolation:isolate so the z-index:-1 blurred copy stays behind the art but inside the section. Hero-to-next-section spill: hero ::after with z-index:0 and mix-blend-mode:screen, inset:auto 0 -200px, height 400px, radial-gradient(50% 50% at 70% 50%, rgba(240,138,60,.28), transparent 70%), so it straddles the hero edge with no seam (hero copy z-index:1). Cards get coloured under-glows 0 30px 80px -40px rgba(240,138,60,.35) / rgba(63,184,196,.3) - Poster type: Oswald 600 uppercase (Kanit 600 for Thai, sentence case). Display clamp(3.4rem, 8vw, 6.75rem) for Latin, clamp(2.8rem, 6vw, 5rem) for Thai; line-height 1.0 for Latin caps, 1.3 for any heading containing Thai. Billing-block metadata in Oswald 0.72rem, 0.2em tracking, uppercase, muted grey; Thai at 0.8rem in the body font with no tracking - Film grain: SVG feTurbulence noise at 7–12% opacity, mix-blend-mode overlay, over the background and imagery - Widescreen stills at 2.39:1 and 2:3 posters, both with an inner vignette inset 0 0 120px rgba(0,0,0,.55) - Smoked glass panels: fill = token surface rgba(255,255,255,.055), 1px border = token rgba(255,255,255,.11), backdrop blur 14px, radius 10px, and no colour blobs behind them — colour comes only from the key art - Quiet chrome: warm-white #F3F0EA primary ('Play'), translucent grey secondary ('More info'), one red #D7261E for tags, active states and progress; #F0A848 only for warning states, ratings and small stat highlights — never on buttons, links or large fills ## Design tokens — use these exact values Colours (dark mode): - background #09090B - surface rgba(255,255,255,0.055) - surface-2 rgba(255,255,255,0.03) - text #F3F0EA - text-muted #A39E96 - primary #F3F0EA (text on it #0A0A0C) - secondary #D7261E (text on it #FFFFFF) - accent #F0A848 - border rgba(255,255,255,0.11) - success #4CC38A · warning #F0A848 · danger #F0524A - chart series #F08A3C, #3FB8C4, #F3F0EA, #C2386B, #8C8780 Radius: sm 4px, md 6px, lg 10px, xl 14px, pill 999px Border width: 1px Shadows: sm `0 2px 10px rgba(0,0,0,0.5)`, md `0 20px 50px rgba(0,0,0,0.6)`, lg `0 40px 100px rgba(0,0,0,0.7)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 420ms cubic-bezier(.16,1,.3,1) ## Typography (Latin + Thai) - Headings: Oswald 500/600 with Thai fallback Kanit 500/600 - Body: DM Sans 400/500/700 with Thai fallback Prompt 300/400/500 - Google Fonts URL: 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 - CSS stacks: heading `"Oswald", "Kanit", system-ui, sans-serif`; body `"DM Sans", "Prompt", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3.4rem, 8vw, 6.75rem), heading weight 600, heading tracking 0.005em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Primary button: warm white #F3F0EA with near-black label, 6px radius, bold, with a ▶ play triangle in hero contexts; hover pure #FFF - Secondary button: translucent grey rgba(120,120,128,.32) with 16px backdrop blur and white label (the 'More info' button); hover .45 - Eyebrows, tags and fieldset legends: Oswald 500 uppercase 0.85rem, 0.22em tracking (Thai 0.95rem, no tracking), preceded by a 4px-wide, 1.1em-tall vertical red #D7261E bar - Poster card: 2:3 key art with a bottom fade linear-gradient(0deg, rgba(9,9,11,.95), rgba(9,9,11,.35) 42%, transparent 62%), condensed uppercase title over the art, a 30px red icon tag top-left, billing-block meta under the poster; hover scale(1.02) - Cards: smoked glass recipe, hover scale(1.02) and border rgba(255,255,255,.22); highlight card adds the red wash linear-gradient(160deg, rgba(215,38,30,.35), rgba(215,38,30,.08) 60%) with a rgba(215,38,30,.5) border - Badges: small 4px-radius dark chips rgba(255,255,255,.1); solid/new badge is red #D7261E with white text - Inputs: rgba(255,255,255,.06) fill, token hairline border, 6px radius; focus = rgba(255,255,255,.6) border with a 3px rgba(255,255,255,.1) ring; checked checkboxes/switches red. Radio cards keep Thai labels unbroken (2×2 grid when four options don't fit) - Tabs: Oswald uppercase 0.8rem, 0.12em tracking (Thai: no caps, no tracking) with a red underline for the active tab - Dashboard header: a mini billboard — the key art (sun on the horizon) behind the page title with a left fade and an orange under-glow 0 40px 90px -40px rgba(240,138,60,.5). Charts: #F08A3C (chart-1, also glows and ambient bleed only) and teal #3FB8C4 lines with matching drop-shadow glows, faint solid grid rgba(255,255,255,.08), glowing donut, heatmap color-mix(in oklab, #F08A3C calc(var(--v)*1%), #1B4A55) so low values recede to deep teal and high values glow orange - Mobile tab bar: solid near-black rgba(9,9,11,.94) bar fixed to the bottom of the screen, grey #7D7871 icons, white active icon with a tiny 4px red dot below it ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: full-viewport immersive hero with centred copy over the background effect. Navigation: minimal style. Sections in order: hero → showcase → features → testimonials → stats → pricing → faq → cta. Feature section as grid. Hero copy is bottom-left aligned (max-width 640px, padding-bottom 96px), never centred. This overrides the generic hero line. Nav: transparent nav over the hero with a top scrim linear-gradient(180deg, rgba(9,9,11,.85), transparent); wordmark in Oswald 600 uppercase, 0.08em tracking, 1.3rem, beside a 4px-radius red logo tile; links at 72% white, active link bold white; on the right a Sign in text link and a small warm-white primary button; on mobile, collapse the links into a menu icon. Landing opens on the billboard hero (min-height: min(92vh, 880px)) with the nav laid over it, copy and Play / More-info buttons bottom-left; the art's colour spills into the next section through the screen-blended orange glow that straddles the hero edge. Then a showcase whose panel opens on a 2.39:1 still (orange/teal under-glow) above the product mock. The features section IS the poster row: features = six 2:3 poster cards, grid repeat(6,1fr) at gap 16px (3 columns ≤1100px, 2 ≤600px), one per feature. Each has a 30px red #D7261E icon tag 10px from the top-left, the title over the bottom of the art (Oswald 600 uppercase 1.45rem lh 1; Thai Kanit 1.12rem lh 1.3), and the feature description as billing-block meta under the poster. Vary key art per poster across three stills: ember sunset (teal→#D9773C with sun), dusk magenta (#090A22→#2A1652→#C2386B with skyline bars), moonlit teal (#143A57→#7FB0C6 with a small cold moon #E6F4FF). Follow with testimonials, big condensed stats over a top hairline, pricing, FAQ and a left-aligned CTA set over another widescreen still. Form pages put a dimmed key-art still behind the pitch column — the scene at 70% 60% / cover dimmed by linear-gradient(90deg, rgba(9,9,11,.85), rgba(9,9,11,.35) 70%), 2.39:1, radius 10px, masked linear-gradient(180deg, #000 60%, transparent 100%), with its blurred copy as ambient bleed — and keep the red eyebrow bar and billing-block meta. Articles use widescreen figures with glow and related cards with poster-like stills. Dashboard: top nav with a condensed wordmark, a billboard page header, then glassy KPI and chart cards with colour-matched under-glows. On Thai pages keep headlines Thai-only (Kanit 600, lh 1.3, clamp(2.8rem,6vw,5rem)). The poster feel comes from scale, key art and Latin-caps billing tags (4K · HDR · 16+ · 2026), not from stacking an English title above the Thai one. Colour rules: decorative literals are allowed — key-art stops, sun, glows, vignette, hero scrim rgba(9,9,11,.94), secondary grey rgba(120,120,128,.32) and the highlight wash linear-gradient(160deg, rgba(215,38,30,.35), rgba(215,38,30,.08) 60%). Declare them as extra custom properties (--art-*, --glow-*); all UI chrome (text, surfaces, borders, buttons, links, states) uses the tokens. Body text: DM Sans 400 / Prompt 400 for Thai; Prompt 300 only for large leads ≥ 1.25rem. ## Content Use realistic product copy (fictional brand) suited to: Streaming, film and music platforms. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Bright UI colours competing with the imagery — keep chrome white, grey and one red - Flat pure black with no ambient light or grain - Shaded, glossy 3D spheres or objects as key art — that reads as 3D render / Claymorphism, not a graded film still - Rounded, bubbly fonts or radii above ~14px - Sepia, scratches or light leaks — that is Vintage Analog film - Frosted glass over colour blobs as the main feature — that is Glassmorphism - Small thumbnail imagery; pictures must be large widescreen stills or 2:3 posters ## Stack notes One self-contained HTML file with a