Skip to content
DesignMunkDesignMunk Submit a site

DG Cinema

dg-cinema.com
We are creativity, courage, future—redefining cinematic storytelling.
Creative Entertainment Webflow Homepage Benzin Inter
Share Visit site
dg-cinema.com DESKTOP · 1440
DG Cinema

AI Breakdown

Design export

---
version: alpha
name: DG Cinema
description: We are creativity, courage, future—redefining cinematic storytelling.
colors:
  primary: "#ffffff"
  secondary: "#848484"
  tertiary: "#e50913"
  neutral: "#09080a"
  border: "#374151"
  brand-profound-pink: "#c59395"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Benzin Bold
    fontSize: 61px
    fontWeight: 700
    lineHeight: 1.2
  headline-md:
    fontFamily: Benzin Bold
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.13
  headline-sm:
    fontFamily: Benzin Bold
    fontSize: 31px
    fontWeight: 400
    lineHeight: 1.19
  headline-xs:
    fontFamily: Inter
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.18
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 6px
  sm: 14px
  md: 30px
  lg: 50px
  xl: 68px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# DG Cinema: Metallic Headlines and Blood-Red on Black

## Overview

A cinematic, high-contrast dark mode built for showcasing moving images. The tone is bold, confident, and industrial—headlines are heavy, copy is minimal, and visuals dominate. Audience: film and commercial clients, collaborators, and talent. Layout is spacious but tense, with tight crops and controlled red accents that signal energy without flooding the page.

## Colors

- **primary (#FFFFFF):** Primary text and filled buttons; guarantees crisp contrast on the dark canvas.
- **secondary (#848484):** Metadata, captions, and UI chrome that should recede behind imagery.
- **tertiary (#E50913):** Accent for highlights, active states, and cinematic emphasis; use sparingly for maximum impact.
- **neutral (#09080A):** The base canvas—noir black that keeps media and type forefront.
- **border (#374151):** Subtle separators for inputs, cards, and dividers when shadows are avoided.
- **brand-profound-pink (#C59395):** Occasional tint for photography overlays or soft glows; supportive, not a primary brand cue.
- **surface ({colors.neutral} -> #09080A):** Surfaces for cards and sections; align with the base canvas for seamless depth.
- **on-surface ({colors.primary} -> #FFFFFF):** Default on-dark text and icon color for legibility.

## Typography

- Benzin Bold (custom/self-hosted). Display face for impact. Not freely loadable via Google; use only where provided. Suitable substitutes when unavailable: Anton (Google), Bebas Neue (Google), or League Spartan (Google) for a geometric, bold feel.
- Inter (Google). Workhorse UI and body copy family; available across weights.
- Levels:
  - headline-lg: Benzin Bold 61px/1.2/700 for hero headlines.
  - headline-md: Benzin Bold 44px/1.13 for section intros.
  - headline-sm: Benzin Bold 31px/1.19 for subheads and card titles.
  - headline-xs: Inter 22px/1.18 for small callouts or overlines.
  - body-md: Inter 16px/1.5 for paragraphs, captions, and labels. Use Inter for all long-form text to preserve readability on dark backgrounds.

## Layout

Spacing uses a compact-to-wide scale: 6, 14, 30, 50, 68px. Build vertical rhythm with md (30px) between related elements, lg (50px) between blocks, and xl (68px) for section breaks. Horizontal gutters can mirror md (30px). Cards and media use 16px internal padding as specified by the card component. Favor wide single-column sections punctuated by gallery rows to foreground imagery.

## Elevation & Depth

Depth is nearly shadowless. Only a soft sm shadow is available; md+ are none. Rely on tonal contrast (neutral #09080A vs on-surface #FFFFFF), thin borders (#374151), and controlled red (#E50913) accents to signal hierarchy and interactivity. Whitespace and scale shifts—especially headline sizes—carry most of the emphasis. Any glows or vignettes should be handled as image treatments, not UI shadows.

## Shapes

Two radii define the language: 4px (sm) for controls and small chips; 8px (md) for cards and media frames. Keep corners squared-off overall to maintain the industrial, equipment-like feel. Do not exceed 8px unless matching embedded media already has softer edges.

## Components

Buttons and card
- Primary button: background #FFFFFF, text #09080A, 4px radius, 8px 16px padding, 40px height. Use for principal CTAs like "Get in touch".
- Secondary button: text #FFFFFF on transparent, 4px radius, 8px 16px padding, 40px height. Reserve for less prominent actions.
- Link button: text #FFFFFF, 0px radius; inline with body copy.
- Card: background #09080A, text #FFFFFF, 8px radius, 16px internal padding.

### Hero Headline Banner
- Type: headline-lg (Benzin Bold 61px/1.2). Center or left-align over #09080A. Primary color #FFFFFF; optional cinematic image/lighting behind the type. Spacing: lg above, md below.

### Filmstrip Gallery Row
- A row of 4–6 thumbnails. Each item uses md radius (8px). Gutter md (30px). Captions in Inter 16px, secondary #848484. Hover: apply a subtle red overlay using #E50913 at low opacity.

### Numeric Slider Pagination
- Inline sequence "3 . . 2 . . 1 . . 0 . . 1 . . 2 . . 3" in Inter 16px. Inactive numbers in #848484; active marker or tick in #E50913. Spacing xs (6px) between dots.

### Team Stacked Slogan
- Multi-line statement broken for rhythm. Use headline-sm (31px) for key words, body-md for connectors. Text #FFFFFF; block spacing lg (50px). Optionally interleave portrait stills as cards.

### Services Grid
- Section title in headline-md (44px). Three columns of service cards (card component), each with a headline-sm title and body-md description. Internal spacing sm–md; external grid gaps md (30px).

### Project Logline Modal
- Full-screen overlay in #09080A. Content column max-width ~680px; headline-sm for "Logline", body-md for synopsis. Close link styled as button-link. Use border #374151 for input/blocks if forms appear.

### Contact Form with Upload
- Inputs with 1px border #374151, 4px radius; labels in Inter 16px. Primary button for submit. Uploadcare widget inherits the same border and radius. Section padding xl (68px).

## Do's and Don'ts

- Do keep #E50913 accents rare—active states, key links, and current index only.
- Do set long copy in Inter 16px/1.5; reserve Benzin Bold for headlines and short labels.
- Do use md (30px) gutters and lg/xl vertical spacing to let imagery breathe.
- Don't add heavy shadows; only the sm shadow is available and should be subtle.
- Don't exceed 8px corner radius; rounded styles beyond md read off-brand.
- Don't use #848484 on moving image backgrounds—switch to #FFFFFF for contrast.

## Agent Prompt Guide

Quick color reference
- Text: #FFFFFF
- Background: #09080A
- Border: #374151
- Accent: #E50913

1) Build a hero section with headline and CTA
- Canvas #09080A. H1: Benzin Bold, 61px/1.2, color #FFFFFF. Subtext: Inter 16px/1.5, color #848484, max-width 680px, margin-top 30px. Primary button: 40px height, 8px 16px padding, radius 4px, background #FFFFFF, text #09080A; margin-top 30px.

2) Create a filmstrip gallery row
- Section padding-top 50px, padding-bottom 50px. Use a 5-up row; each item: background #09080A, radius 8px, gap 30px. Caption: Inter 16px, color #848484. On hover, overlay rgba(229,9,19,0.16).

3) Add numeric slider pagination
- Centered row with Inter 16px/1.5. Numbers color #848484; active index color #E50913. Dot separators spaced 6px. Top margin 30px.

4) Build a three-card Services grid
- Title: Benzin Bold 44px/1.13, color #FFFFFF. Grid: 3 columns, gap 30px. Each card: background #09080A, radius 8px, padding 16px, title Benzin Bold 31px, body Inter 16px/1.5 #FFFFFF.

5) Contact section with upload input
- Section padding 68px. Inputs: 1px border #374151, radius 4px, text #FFFFFF on #09080A. Submit: primary button spec (40px height, #FFFFFF bg, #09080A text). Accent focus ring: 1px #E50913.

## Similar Brands

- Netflix: Shared dark canvas with #E50913 accent; Netflix is denser and more product-UI, while DG Cinema is sparser and portfolio-driven.
- A24: Bold display type over black with heavy imagery; A24 leans editorial and serif moments, DG Cinema stays geometric and utilitarian.
- Industrial Light & Magic: Dark, cinematic showcase of work; ILM uses more neutral blues and heavier 3D renders, DG Cinema centers red tints and live-action stills.
- Sony Pictures: Corporate entertainment palette with dark sections; Sony relies on gradients and larger image carousels, DG Cinema keeps interactions minimal.

More like this

Browse Creative →
set.space
Set Creative
Set
Location management for the screen industry—gather, organize, and present all locations.
Homepage · 4 days ago
exalt-studio.com
Exalt Studio Agency
Exalt Studio
Turn complex software into clear, scalable product systems.
Homepage · 6 days ago
liinks.co
Liinks Creative
Liinks
One link for everything—build, share, and stand out.
Homepage · 6 days ago
selfmadewebdesigner.com
Self-Made Web Designer Creative
Self-Made Web Designer
Turn frustration into freelancing success—become a web designer fast.
Homepage · 1 week ago