PRESS & DLS
BRAND IDENTITY & MEDIA GUIDELINES
-
Aesthetic: Digital Brutalism. Utilitarian yet avant-garde, designed to look intentionally "undesigned" but highly curated.
-
Colors: Strictly monochromatic. We do not use accent colors; positive and negative space provide all necessary visual texture.
-
Press Assets: All imagery associated with DJZ ENTERTAINMENT must feature a high-contrast, direct-flash, black-and-white aesthetic. No gradients, no soft shadows, and no rounded corners.
(Note: For press inquiries, booking, or high-resolution DLS-compliant assets, please contact us at hello@djzentertainment.com.)
(Design and photography examples at the bottom of the page.)
DESIGN PHILOSOPHY
-
The visual identity of DJZ ENTERTAINMENT is built entirely on Digital Brutalism. It aggressively rejects soft shadows, gradients, and rounded corners in favor of hard lines, extreme contrast, and structural transparency.
Core Pillars:
-
UNAPOLOGETIC: High impact and maximum contrast.
-
STRUCTURAL: Visible grids, borders, and completely exposed layout skeletons.
-
RAW: Sharp edges, and pure blacks/whites.
(Design and photography examples at the bottom of the page.)
COLOR PALETTE
The palette is strictly monochromatic, relying entirely on positive and negative space to create a visual hierarchy without the use of accent colors.
Primary Colors:
-
VOID BLACK: Hex: #000000. Used for primary backgrounds, primary text, structural borders, and iconography.
-
STARK WHITE: Hex: #FFFFFF. Used for inverted backgrounds, inverted text, and button hover states.
-
Usage Rules:
-
High Contrast: Always maintain 100% contrast (Black text on White background, or White text on Black background).
-
No Grays: Do not use gray for hierarchy; utilize font sizing or borders instead.
-
Inversion: Use color inversion (flipping black/white) exclusively to denote interactivity, such as hover states and active selections.
Usage Rules:
-
High Contrast: Always maintain 100% contrast (Black text on White background, or White text on Black background).
-
No Grays: Do not use gray for hierarchy; utilize font sizing or borders instead.
-
Inversion: Use color inversion (flipping black/white) exclusively to denote interactivity, such as hover states and active selections.
(Design and photography examples at the bottom of the page.)
TYPOGRAPHY
The typography relies exclusively on the Syne family, deliberately creating a tension between the "art-house" eccentricities of its Extra Bold headers and the clean utility of the Regular body text.
Primary Header: Syne Extra Bold
-
Weight: 800 (Extra Bold).
-
Usage: Hero headlines, page titles, navigation links, section headers, and emphatic statements.
-
Styling: * Case: ALWAYS UPPERCASE to maximize visual weight and structural rigidity; there are no exceptions for sentence case in titles.
-
Tracking: Tight (-0.02em to -0.04em), ensuring the letters feel like they are colliding.
-
Scale: Massive; on desktop, headers should dominate the viewport (4rem to 12rem).
-
Body Copy: Syne Regular
-
Weight: 400 (Regular).
-
Usage: Paragraphs, descriptions, footer details, and metadata.
-
Styling: * Line Height: 1.2 to 1.4 (keep it tight and block-like).
-
Alignment: Left-aligned or fully justified to create brutalist blocks; never centered.
-
Scale: Functional (1rem to 1.25rem).
-
(Design and photography examples at the bottom of the page.)
LAYOUT & GRID SYSTEM
The layout exposes the structural skeleton of the website, feeling architectural rather than decorative.
-
Visible Grids: Use 5px solid borders to separate content sections; celebrate the grid instead of hiding it.
-
Asymmetry: While the grid is rigid, content placement should be asymmetrical to create tension, leaving large "empty" slots of white or black space.
-
Use 25px of padding for elements in boxes to space the element(s) from the 5px border.
-
Marquees: Use infinite horizontal scrolling text in ALL CAPS to separate sections or announce news.
(Design and photography examples at the bottom of the page.)
UI COMPONENTS & IMAGERY
Buttons & CTAs:
-
Shape: Sharp rectangles with a 0px or strictly consistent 5px border radius.
-
Style: 5px solid White border, White background, and Black text.
-
Text: Uppercase, Syne Extra Bold.
-
Hover State: An immediate, hard switch (no fade transition) where the background becomes Black and the text becomes White.
Imagery:
-
Treatment: All images must be exceptionally high-contrast.
-
Effect: Saturation: +50 - Shadows: -50 - Highlights: +50 - Sharpness: +50 - Brightness: Use this sparingly. If the photo looks too gray, lower the brightness. If the flash looks too dim, raise it slightly. Vignette: Add a little bit of darkness to the corners to focus the eye on the center. Grain: Add the smallest amount (A little goes a long way).
-
Presentation: Images are contained strictly within grid lines (5px) or placed as floating distinct blocks with sharp edges.
Navigation:
-
Desktop: Headers with bold, oversized links.
-
Separators: Vertical lines or 5px borders between menu items.
-
Typography: Strictly UPPERCASE for headers. Body can be lowercase.
(Design and photography examples at the bottom of the page.)
CSS / IMPLEMENTATION SNIPPETS
The following foundational code block acts as the developer hand-off to enforce the strict requirements of the Design Language System.
:root {
--color-black: #000000;
--color-white: #FFFFFF;
--font-header: 'Syne', sans-serif;
--font-body: 'Syne', sans-serif;
}
body {
background-color: var(--color-white);
color: var(--color-black);
font-family: var(--font-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
/* Enforce Uppercase on all Headings */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-header);
font-weight: 800;
text-transform: uppercase; /* STRICT REQUIREMENT */
letter-spacing: -0.03em;
line-height: 0.9;
}
.button-brutal {
background: transparent;
border: 5px solid var(--color-black); /* Updated to match 5px rule */
color: var(--color-black);
padding: 1rem 2rem;
font-family: var(--font-header);
font-weight: 800;
text-transform: uppercase;
cursor: pointer;
transition: all 0s; /* No smooth transition */
}
.button-brutal:hover {
background: var(--color-black);
color: var(--color-white);
}
DESIGN EXAMPLES
Photography EXAMPLES
.png)