# Marxdesign Co Nz · Design system migration spec

> Source: https://marxdesign.co.nz  ·  Curated by OpenDesign  ·  en

> The site is worth including as a prime example of minimalist, typography-led portfolio design that prioritizes content over decoration.

## 1. Identity DNA

This design system operates like a high-end architectural blueprint—every element is positioned with deliberate, structural intent. The visual language is a minimalist portfolio where bold typography and high-contrast photography are the primary load-bearing materials, stripped of all decorative excess.

**One-liner:** Minimalist portfolio featuring bold typography and high-contrast photography.
**Keywords:** Idea-driven · design portfolio · minimal · bold · agency
**Analogy:** A high-end architectural blueprint or a gallery exhibition guide.

## 2. Color

The palette is a strict, high-contrast monochrome using black and white, creating a stark and immediate visual hierarchy. Color is reserved entirely for the content itself, allowing warm, earthy photographic accents to provide the only variation.

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

**Color principle:** High-contrast monochrome with warm photographic accents.

The principle is absolute: interface elements remain monochrome, letting the photographic work command full attention.

## 3. Typography

The typographic voice is confident and structural, led by a clean humanist sans-serif. Display text uses negative letter spacing for a dense, monumental quality, while body text maintains a consistent, legible weight.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 1.0 | 400 | -1px | Major hero titles |
| headline | 27px | 1.1 | 400 | -0.5px | Secondary headers |
| body | 19px | 1.35 | 400 | -0.675px | Main body text |

**Type rules:**
- Use negative letter spacing for large display text.
- Maintain a consistent font weight of 400 for text.
- Left-align most body and headline text.

## 4. Spacing

Rhythm is established through generous vertical whitespace between sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 10 / 18 / 30 / 64 / 96 px
- **Rhythm:** Generous vertical whitespace between sections.

## 5. Surfaces

Surfaces are flat and borderless, creating a sense of open, uncluttered depth. The absence of shadows and visible borders reinforces the clean, gallery-like presentation.

- **Radius:** sm 4px · md 0px · lg 0px · pill 999px
- **Borders:** None visible.

## 6. Layout

The layout skeleton is an asymmetric grid that prioritizes visual tension over perfect balance. Large photographic elements are often placed off-grid, disrupting the structure to create dynamic, editorial compositions.

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

**Skeleton:** Asymmetric grid with large, off-grid image placements.

## 7. Motion & Interaction

Motion is understated and functional, designed to support content rather than distract. Transitions are limited to subtle opacity fades over 0.3 seconds, providing a smooth sense of continuity during scroll.

- **Durations:** micro 220ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Fade-in transitions on scroll.

- **Hover:** Cursor pointer on interactive elements.
- **Click:** Trigger navigation or project view.
- **Transition:** Opacity and visibility transitions over 0.3s.
- **Keyboard:** Standard tab focus.

## 8. Voice & Don'ts

The editorial voice is confident, professional, and understated, using short, direct headlines. Calls to action are subtle text links, never loud buttons, maintaining the site's composed tone.

- **Tone:** Confident, professional, and understated.
- **Headline style:** Short, direct, and punchy.
- **CTA style:** Subtle text links.
- **Avoid:** Cluttered layouts / Excessive decorative elements / Saturated color palettes

### Don'ts
- ❌ Don't use a multi-color palette — screenshot shows a strict black-and-white base with photographic accents.
- ❌ Don't center-align all content — screenshot shows left-aligned text and asymmetric layouts.
- ❌ Don't use heavy borders or shadows — screenshot shows flat, borderless surfaces.
- ❌ Don't use decorative serif fonts for the main UI — screenshot shows a clean sans-serif.
- ❌ Don't crowd elements together — screenshot shows extensive use of negative space.
- ❌ Don't use rounded corners on cards — screenshot shows sharp, rectangular image frames.

The system deliberately avoids cluttered layouts, excessive decoration, saturated palettes, and rounded forms, committing fully to a sharp, content-first aesthetic.

## System Prompt (paste into AI tool)

```
This is a minimalist portfolio site for a design agency. The visual identity is built on a high-contrast black and white palette (ink: #000000, bg: #ffffff) with warm photographic tones. The typography is dominated by a clean sans-serif (humanist-sans) with significant negative letter-spacing for large display text. Layouts are asymmetric and grid-based with generous negative space. Critical constraints: Never use centered text for the main body, avoid any colored UI components or borders, and maintain a strict monochrome aesthetic for all interface elements. The design focuses on large, high-quality photography as the primary visual interest.
```