DZ Commune design system

---
version: alpha
name: DZ Commune
description: "Dark monochrome interface measured from dzcommune.com: Pixeloid Sans type with Geist, tonal surfaces and pill-shaped controls."
colors:
  background: "#1A1A1A"
  surface: "#1A1A1A"
  on-surface: "#F5F5F5"
  on-background: "#F5F5F5"
  on-surface-strong: "#FFFFFF"
  surface-container-low: "#0D0D0D"
  overlay: "#0D0D0D40"
  outline: "#0D0D0D38"
  primary: "#F5F5F5"
  on-primary: "#0D0D0D"
  inverse-surface: "#FFFFFFF0"
typography:
  headline-display:
    fontFamily: Pixeloid Sans
    fontSize: 42px
    fontWeight: 400
    lineHeight: 1.4
  headline-lg:
    fontFamily: Geist
    fontSize: 23.5px
    fontWeight: 700
    lineHeight: 1.45
    letterSpacing: -0.005em
  label-md:
    fontFamily: Geist
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.015em
  label-sm:
    fontFamily: Geist
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: -0.01em
  code:
    fontFamily: Geist Mono
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.04em
  headline-display-mobile:
    fontFamily: Pixeloid Sans
    fontSize: 32.5px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 2.7px
  md: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 7.2px
  md: 10px
  lg: 26.96px
  xl: 53.34px
  gutter: 10px
  section: 53.34px
  margin: 16.16px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 0px
    height: 40px
  button-primary-hover:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface}"
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 7.2px 10.8px
  input-field:
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: 0px
    padding: 0px 2px
  link:
    textColor: "{colors.on-primary}"
---

# DZ Commune Design System

## Overview

DZ Commune describes itself as: “DZ Commune is Disha Patani’s clothing brand and community. Shop jackets, jerseys, hoodies, tops and co-ords from Drop 01.” The interface is dark, built on **Charcoal (#1A1A1A)** with **Snow (#F5F5F5)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Pixeloid Sans** and **Geist**, with **Geist Mono** for code. Headlines run large; body text is compact. Depth comes from hairline borders and inset highlights rather than drop shadows. Controls are pill-shaped.

Measured from [dzcommune.com](https://dzcommune.com/) on November 5, 2026 at 1440×900 and 390×844 from 277 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 9 roles.

- **Charcoal (#1A1A1A):** Page background, seen 4 times. Token `background`.
- **Snow (#F5F5F5):** Primary text and headings, seen 15 times. Token `on-surface`.
- **White (#FFFFFF):** Headings and emphasis, seen 3 times. Token `on-surface-strong`, CSS `--bg`.
- **Charcoal (#0D0D0D):** Raised areas one step from the page, seen 12 times. Token `surface-container-low`, CSS `--ink`.
- **Charcoal 25% (#0D0D0D40):** Translucent fill for cards and controls, seen 36 times. Token `overlay`.
- **Charcoal 22% (#0D0D0D38):** Borders and dividers, seen 1 time. Token `outline`.
- **Snow (#F5F5F5):** Primary buttons and calls to action, seen 25 times. Token `primary`.
- **Charcoal (#0D0D0D):** Text and icons on primary. Token `on-primary`.
- **White 94% (#FFFFFFF0):** High-contrast fills, seen 9 times. Token `inverse-surface`.

## Typography

**Pixeloid Sans**, **Geist** and **Geist Mono** (monospace) share the interface. Fallback stack: `Pixeloid Sans, Geist Mono, monospace`.

- **headline-display:** Pixeloid Sans 42px at weight 400, line height 1.4 (32.5px on mobile). Page title (h1).
- **headline-lg:** Geist 23.5px at weight 700, line height 1.45, tracking -0.005em. Section headings (h2).
- **label-md:** Geist 15px at weight 500, line height 1.2, tracking -0.015em. Buttons, navigation and labels.
- **label-sm:** Geist 12px at weight 400, line height 1.45, tracking -0.01em. Small labels and badges.
- **code:** Geist Mono 10px at weight 400, line height 1.3, tracking 0.04em, uppercase. Code and technical values.

## Layout

Spacing does not follow a strict grid: 17% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 4px, sm 7.2px, md 10px, lg 26.96px, xl 53.34px.
- **Sections:** 53.34px vertical padding between major sections.
- **Gaps:** 10px is the most common gap in flex and grid layouts.
- **Page margin:** 16.16px on each side of full-width sections.
- **Breakpoints:** 700px, 760px, 800px, 860px, 900px, 901px, 960px, 1199px.

## Elevation & Depth

The design avoids drop shadows. Layers are separated by tonal surface steps (#0D0D0D) and hairline rings:

- `rgba(13, 13, 13, 0.16) 0px 0px 0px 1px inset`
- `rgba(13, 13, 13, 0.14) 0px 0px 0px 1px inset`
- `rgba(245, 245, 245, 0.72) 0px 0px 0px 1px inset`

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **sm (2.7px):** 180 elements.
- **full (9999px):** 116 elements.
- **md (16px):** 84 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“pause the film”):** #F5F5F5 fill, #0D0D0D text, 11.7px/400, 999px radius, padding 0px, shadow `rgba(13, 13, 13, 0.14) 0px 0px 0px 1px inset`.
- **button-primary-hover:** background #0D0D0D, text #F5F5F5 on hover.
- **button-ghost (“Shop”):** transparent fill, #F5F5F5 text, 11.7px/500, 899.1px radius, padding 7.2px 10.8px.
- **input-field (“Your email”):** transparent fill, #0D0D0D text, 15.12px/400, padding 0px 2px.
- **link:** transparent fill, #0D0D0D text, padding 0px.

## Do's and Don'ts

- Do use #1A1A1A for the page and lift surfaces in small steps: #0D0D0D.
- Do keep text in 2 levels: #F5F5F5, #FFFFFF.
- Do let contrast carry emphasis; primary actions use #F5F5F5 on #1A1A1A.
- Do reuse the measured spacing steps (7.2px, 10px, 26.96px).
- Do make buttons and chips fully rounded (9999px); most other elements use 2.7px corners.
- Don't add drop shadows for depth; use hairline rings and tonal surfaces.
- Don't introduce new font families beyond Pixeloid Sans, Geist and Geist Mono.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.3s, 0.45s, 0.25s, 0.4s. Longer ambient animations run 0.65s.

- **Easing:** `ease`, `cubic-bezier(0.16, 1, 0.3, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/dzcommune.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).