# Minimalcollective Digital · Design system migration spec

> Source: https://minimalcollective.digital  ·  Curated by OpenDesign  ·  en

> The site is a perfect example of restrained, high-end editorial design that prioritizes typography and layout over decoration.

## 1. Identity DNA

The design system for Minimalcollective Digital operates like a curated gallery: every element is placed with intention, and the architecture itself becomes part of the exhibition. Built on an intersectional art-tech ethos, the platform bridges music, art, and technology through a refined, gallery-style interface. Its visual language is one of deliberate restraint, where the absence of ornament becomes the defining feature.

**One-liner:** A refined, gallery-style platform for art-tech intersections.
**Keywords:** curatorial · intersectional · art-tech · minimal
**Analogy:** A digital gallery platform bridging music, art, and technology.

## 2. Color

The color system is a study in high-contrast monochrome, employing a strict palette of black, white, and varying grays. There are no saturated accent colors; the gray mid-tones provide the only variation, ensuring content remains the focal point.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#3A3A3A` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#5A5A5A` | secondary text |
| `--muted` | `#5A5A5A` | placeholder |
| `--line` | `rgba(0,0,0,0.6)` | divider |

**Color principle:** High-contrast monochrome palette with gray mid-tones.

This approach ensures visual hierarchy is established purely through typographic weight and compositional layout, never through chromatic noise.

## 3. Typography

Typography is handled as a clean, humanist-sans voice, set exclusively at a 400 font weight. The system rejects decorative or script fonts, relying on size, spacing, and case variation—including frequent uppercase for tags and labels—to create structure.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 49.5px | 1.0 | 400 | -2.25px | Main headline |
| heading | 31.5px | 1.0 | 400 | -1px | Section titles |
| body | 18px | 1.2 | 400 | 0 | Primary body text |
| caption | 13.5px | 1.0 | 400 | 0 | Labels and tags |

**Type rules:**
- Large headings use tight negative letter-spacing.
- Text is predominantly black on gray backgrounds.
- Uppercase is used frequently for tags and labels.

## 4. Spacing

Spacing follows a consistent 4.5px base unit, creating a measurable rhythm across all components and grid gaps.

- **Base unit:** 4.5px
- **Scale:** 4.5 / 9 / 13.5 / 18 / 27 / 36 / 54 / 72 px
- **Rhythm:** 4.5px base unit with consistent increments.

## 5. Surfaces

Surfaces are treated as flat planes, with no use of drop shadows or complex gradients. The only structural depth is implied through 1px solid borders in black or semi-transparent black.

- **Radius:** sm 4.5px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - none
- **Borders:** 1px solid black or 1px solid rgba(0,0,0,0.6) used for structure.

## 6. Layout

The layout skeleton is a clean, asymmetric masonry grid, organizing content into editorial cards and a central hero section. This structure prioritizes compositional balance over strict alignment, allowing images and text to interact dynamically.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Masonry-style asymmetric grid.

## 7. Motion & Interaction

Motion philosophy is one of minimal intervention, where all state changes are executed through smooth 0.2s opacity and background-color transitions. The system avoids elaborate animations, focusing instead on immediate, responsive feedback for hover and click interactions.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Patterns:**
  - Smooth 0.2s opacity and background-color transitions.

- **Hover:** Subtle color changes or opacity shifts.
- **Click:** Immediate response with micro-transitions.
- **Transition:** All elements have 0.2s transitions for smooth state changes.
- **Keyboard:** Standard focus states implied.

## 8. Voice & Don'ts

The editorial voice is professional and sophisticated, manifesting in large, center-aligned headlines that are predominantly lowercase or mixed case. Calls to action are understated, often appearing as simple text links or outline buttons.

- **Tone:** Professional and sophisticated.
- **Headline style:** Large, center-aligned, and lowercase or mixed case.
- **CTA style:** Understated, often outline-style or simple text links.
- **Avoid:** Bright, saturated colors. / Decorative or script fonts. / Dense, paragraph-heavy layouts.

### Don'ts
- ❌ Don't use bright accent colors — screenshot shows a monochrome palette.
- ❌ Don't use bold font weights — screenshot shows only weight 400.
- ❌ Don't use rounded corners for main elements — screenshot shows mostly sharp or 4.5px radii.
- ❌ Don't center-align all text — screenshot shows left-aligned navigation and tags.
- ❌ Don't use drop shadows — screenshot shows completely flat surfaces.
- ❌ Don't use decorative serif fonts — screenshot shows clean, humanist sans-serif typography.

The system deliberately avoids dense paragraph-heavy layouts and any use of bright, saturated color, upholding its principle of refined minimalism.

## System Prompt (paste into AI tool)

```
This is a refined editorial platform for an art-tech collective. The design DNA features a monochrome palette with a medium gray (#3A3A3A) background, black ink (#000000), and subtle gray accents (#5A5A5A). Typography is strictly humanist-sans with a 400 font weight, utilizing a tight negative letter-spacing for large, expressive headlines. The layout is a clean, asymmetric masonry grid with minimal 1px borders. Critical donts: never use bright, saturated accent colors; never use bold or italic font weights; and never use heavy drop shadows or complex gradients.
```