# Consumedinkey · Design system migration spec

> Source: https://www.consumedinkey.com  ·  Curated by OpenDesign  ·  en

> A striking example of minimalist editorial design that uses extreme restraint and atmospheric photography to create a focused, immersive user experience for a musical project.

## 1. Identity DNA

Consumedinkey presents itself not as a website, but as a stark, atmospheric gallery exhibition for a musical project. The design system is built on the principle of absolute restraint, using a minimal toolkit to create an immersive, focused experience where content and photography are the sole exhibits.

**One-liner:** A minimalist, atmospheric website for a musical collaboration, using stark contrasts and photographic elements.
**Keywords:** minimalist · avant-garde · musical · abstract · immersive
**Analogy:** A stark, atmospheric gallery exhibition for a musical project.

## 2. Color

The color system operates on a binary of pure black and pure white, a high-contrast monochrome palette that eliminates all chromatic distraction. Photographic greyscale provides the only tonal variation, ensuring the visual field remains stark and focused.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#ffffff` | body text |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High-contrast monochrome palette, using pure black and white to create a stark, focused atmosphere.

This strict monochrome discipline is the foundational constraint, creating a calm, enigmatic atmosphere where every element exists in sharp relief against its opposite.

## 3. Typography

The typographic voice is clean, geometric, and uniformly restrained, set in HelveticaLT or a similar humanist-sans at a consistent weight of 400. This deliberate lack of weight variation, paired with subtle positive letter-spacing, creates a neutral, functional text layer that defers to the photographic content.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 400 | 0.64px | Large display titles and track numbers |
| body | 16px | 1.12 | 400 | 0.64px | Navigation links, track names, and standard text |

**Type rules:**
- Use HelveticaLT or similar humanist-sans.
- Keep font weight consistently at 400.
- Apply a subtle, positive letter-spacing to all text.

## 4. Spacing

The rhythm of the layout is established through generous padding and consistent, open gaps, creating a breathable space where elements can float with intention.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding and consistent gaps create an open, breathable layout.

## 5. Surfaces

Surfaces are defined by their sharp, hard edges and absolute lack of shadow or border-radius. Content floats directly against solid color or full-bleed imagery, creating a flat, graphic plane with no illusion of depth.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Sharp, hard edges. No border-radius. Content floats in space.

## 6. Layout

The layout skeleton begins with an immersive, full-bleed photographic hero that establishes the atmospheric tone. This transitions into a dark content section anchored by a central visual, flanked by columns of text in a structured, yet open, composition.

- **Container max:** 1920px
- **Breakpoints:** 768 px

**Skeleton:** A full-bleed hero section, followed by a dark content section with a central visual and flanking text columns.

## 7. Motion & Interaction

Motion is treated as a subtle, functional concern rather than a decorative one, with a single global transition property applied to all elements. This suggests that all state changes—from hover to navigation—should be smooth and consistent, avoiding jarring shifts.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - All elements have a global transition property, suggesting smooth state changes on interaction.

- **Hover:** Elements with pointer cursor change state, likely via color or opacity shift.
- **Click:** Standard pointer click behavior.
- **Transition:** Global 'all' transition applied to all elements.
- **Keyboard:** Standard browser tab navigation is implied by the cursor styles.

## 8. Voice & Don'ts

The editorial voice mirrors the visual design: calm, restrained, and enigmatic. Headlines are simple and declarative, while calls to action are minimal and direct, often using pipe separators for a clean, structural separation of intent.

- **Tone:** Calm, restrained, and enigmatic.
- **Headline style:** Simple, declarative, using the album title and artist names.
- **CTA style:** Minimal and direct, using pipe separators for actions.
- **Avoid:** Avoid exclamation marks or overly enthusiastic language. / Avoid complex sentences or paragraphs. / Avoid bright, saturated colors. / Avoid decorative fonts or excessive font weights.

### Don'ts
- ❌ Don't use border-radius on any element — screenshot shows perfectly sharp corners everywhere.
- ❌ Don't introduce a vibrant accent color — screenshot is strictly monochrome black and white.
- ❌ Don't use decorative or serif fonts — screenshot uses a clean, geometric sans-serif (HelveticaLT).
- ❌ Don't add drop shadows or box shadows — elements appear flat against the background.
- ❌ Don't use complex background patterns or gradients — backgrounds are solid colors or full-bleed images.
- ❌ Don't use multiple font weights — screenshot shows a consistent, uniform weight (400) throughout.

The system is defined as much by its exclusions as its inclusions, deliberately omitting vibrant color, decorative typography, and complex components to maintain its stark, focused identity.

## System Prompt (paste into AI tool)

```
This is a minimalist, atmospheric website for the musical collaboration 'Consumed In Key'. It uses a stark, high-contrast monochrome palette of pure black (#000000) and white (#ffffff), with a single atmospheric black-and-white photographic element. The typography is a clean, geometric humanist-sans-serif (HelveticaLT) set at a consistent 400 weight with subtle letter-spacing. The layout is immersive and open, using generous padding and full-bleed imagery. Critical design constraints: 1) Maintain absolute color restraint with no accent colors. 2) Use sharp, hard edges with zero border-radius on all elements. 3) Keep typography minimal, uniform in weight, and subtly spaced. Avoid any decorative elements, complex components, or high-energy interactions. The goal is to create a calm, focused, and enigmatic visual experience that complements the musical content.
```