---
title: "Minimal Collective design system"
variant: extended
source: https://minimalcollective.digital/
captured_at: 2026-10-12
theme: dark
industry: media
generator: Design DNA (https://four.wiralomi.com/style/minimalcollective-digital)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Minimal Collective · Design System

> A quiet grid for culture in motion

**Theme:** dark · **Industry:** media · **Source:** https://minimalcollective.digital/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Minimal Collective presents music, art, technology and culture through a restrained editorial interface. A steady grey canvas, precise grid lines and overlapping media make the work itself the visual focus.

## North star

Keep the interface quiet and systematic so vivid cultural imagery, not decorative UI, carries the page.

## Overview

The page is built on a consistent mid-grey canvas (#5a5a5a), with black typography and white reversed text used where image contrast demands it. Black and white are structural rather than decorative: they define the wordmark, headings, metadata, outlined labels and occasional dark signup panels. PolySans is used throughout at regular weight. Large, tightly tracked display and heading styles contrast with compact uppercase navigation and metadata, giving the content an editorial cadence. A twelve-column opening composition introduces the platform with centered copy and overlapping event and music imagery. Lower content shifts into three-column editorial, event, store and project areas, separated by fine dark rules and generous vertical pauses. Images retain their own rich colors and are not treated as a brand palette. The interface stays flat: no shadows or gradients, with thin borders, small outlined labels and restrained rounded controls.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Editorial Black | `#000000` | `--color-editorial-black` | neutral | Primary headings, body copy, wordmark, link text, outlined labels and dark signup panels. |
| Canvas Grey | `#5a5a5a` | `--color-canvas-grey` | surface | Continuous page canvas and navigation background; the dominant field behind the content grid. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Reversed headings and labels over dark imagery, plus selected navigation and control text. |
| Rule Charcoal | `#242424` | `--color-rule-charcoal` | semantic | Fine grid and section divider borders against the grey canvas. |

### Semantic aliases

`--color-canvas` → `#5a5a5a` (Canvas Grey) · `--color-surface` → `#000000` (Editorial Black) · `--color-surface-2` → `#ffffff` (Paper White) · `--color-text` → `#ffffff` (Paper White) · `--color-text-muted` → `#000000` (Editorial Black) · `--color-border` → `#242424` (Rule Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#5a5a5a` | 6.9:1 | AA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#000000` | `#5a5a5a` | 3.04:1 | AA-large |
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PolySans | `--font-body` | webfont | 400 | All page typography, from display headings and editorial titles to uppercase navigation and metadata. | DM Sans |

- **PolySans:** Regular weight throughout; display and headings use tight negative tracking, while body and navigation are uppercase with neutral tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.415, base 13.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 76.5px | 400 | 1 | -0.029em | — | PolySans | Oversized introductory statement and prominent editorial messaging. |
| h1 | 49.5px | 400 | 0.9 | -0.02em | — | PolySans | Primary hero statement and major page-level headings. |
| h2 | 31.5px | 400 | 1 | -0.032em | — | PolySans | Editorial feature and section titles. |
| h3 | 27px | 400 | 1 | -0.037em | — | PolySans | Secondary article, project and event titles. |
| h4 | 22.5px | 400 | 1 | -0.044em | — | PolySans | Smaller card headings and supporting content titles. |
| body | 13.5px | 400 | 1 | 0 | uppercase | PolySans | Compact uppercase descriptions, metadata and labels. |
| nav | 13.5px | 400 | 1 | 0 | uppercase | PolySans | Uppercase primary navigation and interface links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 1, 5, 6, 9, 14, 18 px.
- Section rhythm 216px · element gap 2px · card padding — · max content width 1094px.

The opening uses a twelve-column composition with centered introductory copy and media crossing the text field. Subsequent content settles into three-column grids, with fine rules defining cells and occasional wide editorial images spanning several columns. The measured page max width is 1094px. Section changes are marked by substantial vertical pauses, leaving the overall density spacious despite the amount of content. Text is generally left-aligned in content grids; the opening statement is centered.

## Shape & elevation

- Radius: button `5px` · nav `9999px` · link `5px` · xs `5px` · pill `9999px`
- No box shadows measured: the page is flat.

The interface is flat, with no measured shadows or gradients. Thin charcoal rules structure the canvas into columns and section bands. Layering comes from overlapping media tiles and content crossing grid lines, not from card shadows. Buttons and category labels use fine outlines and restrained corner rounding.

## Imagery

Photography, video and artwork are the primary sources of color. The hero layers event and music-media tiles over the grey grid, while editorial cards use architectural, cultural and documentary imagery. Images are cropped into clear rectangular frames and may overlap text or grid cells. Preserve their native color and contrast; do not apply a uniform brand tint or confuse image colors with interface palette.

## Components

### Header navigation

A restrained top bar on the grey canvas, with a black wordmark at left and compact menu control at right; separated from content by a fine rule.

### Hero media collage

Centered introductory statement over the grid, partially crossed by overlapping rectangular event and music images with small outlined category labels.

### Editorial card

Image-led article tile with compact uppercase category and date metadata, followed by a black editorial title and short supporting copy.

### Outlined category label

Small uppercase text inside a thin black or white border, used as editorial, premiere, interview or event metadata.

### Section action

Simple outlined control with black text and border, used for actions such as All editorials and All projects.

### Signup panel

Black rectangular registration panel with reversed text, an understated email field and a compact submit control.

### Grid dividers

Thin #242424 rules mark columns and section boundaries while leaving the grey canvas visible.

### Measured component styles

- **Primary button** (“All editorials”): transparent background · text #000000 · border 1px solid #000000 · radius 4.5px · padding 4.5px 18px 6.8px 18px · 400 27px PolySans
- **Link** (“EXTENDED FEATURE EXTENDED FEATURE EXTEND”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px PolySans
- **Input**: transparent background · text #5a5a5a · radius 0px · padding 18px 0px 4.5px 0px · 400 18px PolySans
- **Card** (“Pre-register for future events Submit”): background #000000 · text #f5f5f5 · radius 0px · padding 0px · 400 18px PolySans
- **Navigation item** (“Minimal Collective Menu open or close”): transparent background · text #5a5a5a · radius 0px · padding 0px · 400 18px PolySans

## Do

- Use #5a5a5a as the continuous interface canvas.
- Reserve vivid color for editorial and event imagery.
- Build content from clear columns and thin divider rules.
- Use PolySans or a close regular-weight sans-serif substitute.
- Keep navigation and metadata compact and uppercase.
- Use black or white outlined labels according to contrast.

## Don't

- Don't add gradients, drop shadows or raised cards.
- Don't introduce unmeasured accent colors into interface controls.
- Don't tint all photography to match the grey canvas.
- Don't replace the open grid with dense rounded cards.
- Don't use heavy typography weights or loose display tracking.
- Don't make every section the same image-and-text arrangement.

## Agent prompt

Build a new editorial culture page in the Minimal Collective style. Use Canvas Grey (#5a5a5a) as the full-page field, Editorial Black (#000000) for primary text and Paper White (#ffffff) only for reversed text or labels where contrast calls for it. Use Rule Charcoal (#242424) for fine grid dividers. Set all type in regular-weight PolySans, or a close free sans-serif substitute; keep display headings tightly tracked and navigation and metadata compact and uppercase. Compose sections on a clear column grid, with generous vertical pauses and mostly flat surfaces. Let native-color photography, artwork and video provide the visual variety. Prefer rectangular image crops, small outlined category tags, restrained outlined actions and occasional black signup panels. Avoid shadows, gradients, ornamental decoration and invented interface colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Twelve-column opening with centered statement and overlapping media tiles. | Menu toggle, Clickable media tiles, Category labels | Grey canvas, Fine grid rules, Centered display copy, Image collage |
| 2 | other | Three-column structural band with no visible text or media. | Visual breathing room | Grey canvas, Grid continuity |
| 3 | other | Three-column band continuing the established canvas and rules. | Section transition | Grey canvas, Thin dividers |
| 4 | content-feed | Three-column editorial area with image-led article entries and title hierarchy. | Open article links, Category metadata, Date metadata | Rectangular images, Compact uppercase tags, Black editorial titles |
| 5 | other | Three-column pause between editorial entries and the next content band. | Visual breathing room | Grey canvas, Grid continuity |
| 6 | feature-split | Three-column grid with a wide editorial image and title-led feature. | Read feature, Editorial metadata | Wide image crop, Compact tags and date, Tightly tracked title |
| 7 | other | Three-column transition band with no visible content. | Section transition | Grey canvas, Fine grid rules |
| 8 | content-feed | Three-column editorial row with image, metadata and multi-line title. | Open article link, Category and date labels | Documentary image, Editorial typography, Grid dividers |
| 9 | footer | Single-column footer containing site links, newsletter form and legal details. | Newsletter signup, Social links, Policy navigation | Compact text, Input and submit control, Fine rules |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/minimalcollective-digital