# Minimalissimo · Design system migration spec

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

> A perfect example of minimalist editorial design that demonstrates how restraint and curation can create a premium, gallery-like digital experience.

## 1. Identity DNA

The design system for Minimalissimo functions as a high-end exhibition catalog, where the UI recedes to let the curated content speak. Its identity is defined by restraint and a focus on visual culture, establishing a refined, contemplative framework for its global audience.

**One-liner:** A global platform curating the best in minimalist design and culture.
**Keywords:** Minimalist · Curatorial · Design · Culture · Refined
**Analogy:** A high-end gallery exhibition catalog.

## 2. Color

The palette is deliberately limited to a strict monochrome, using #000000 ink on a #F7F7F7 off-white ground. This choice ensures that the color and emotion of the curated photography are the sole sources of visual interest.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F7F7F7` | main background |
| `--bg-soft` | `#EFEFEF` | card background |
| `--bg-quiet` | `#FFFFFF` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#999999` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Monochromatic palette focusing on content photography with minimal UI interference.

The principle is total neutrality, making the interface a quiet frame for the content it holds.

## 3. Typography

Typography is exclusively geometric sans-serif, set at a uniform weight of 400. This singular voice creates a clean, intellectual tone, with a generous line-height that prioritizes reading clarity over stylistic flourish.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.2 | 400 | -0.5px | Article titles and section headings |
| body | 16px | 1.4 | 400 | 0px | Descriptive text and metadata |
| caption | 14px | 1.4 | 400 | 0px | Image labels and secondary info |

**Type rules:**
- Strict weight 400 (regular) for all text elements
- High contrast black on off-white background
- Generous line-height for readability

## 4. Spacing

All vertical and horizontal rhythm is built on a consistent 8px-based spacing scale.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 40 / 48 / 64 / 80 / 96 px
- **Rhythm:** 8px-based spacing for consistent vertical rhythm

## 5. Surfaces

Surfaces are rendered with near-flatness, employing only a subtle 1px border for definition. Depth is implied through content layering rather than drop shadows or gradients.

- **Radius:** sm 4px · md 8px · lg 8px · pill 9999px
- **Borders:** 1px solid rgba(0,0,0,0.1)

## 6. Layout

The structural skeleton is a grid-based layout with equal-height columns, creating a uniform gallery presentation. Generous whitespace between elements provides necessary visual breathing room, allowing each curated item its own distinct space.

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

**Skeleton:** Grid-based layout with equal-height columns

## 7. Motion & Interaction

Motion is applied with exceptional subtlety, limited to opacity transitions on image hovers and smooth color shifts for interactive states. The philosophy is that animation should inform, not announce.

- **Durations:** micro 150ms · small 300ms · medium 0ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Opacity transitions for image hover states
  - Smooth color and background-color transitions for interactive elements

- **Hover:** Opacity reduction on images and subtle text color changes
- **Click:** Immediate state change with no complex animations
- **Transition:** 0.3s cubic-bezier(0.4, 0, 0.2, 1) for most transitions
- **Keyboard:** Standard focus states with no visible focus rings in screenshot

## 8. Voice & Don'ts

The editorial voice is intellectual and contemplative, reflected in concise, descriptive headlines. Calls to action are understated, taking the form of minimal text links or simple ghost buttons.

- **Tone:** Intellectual and contemplative
- **Headline style:** Concise, descriptive titles for curated content
- **CTA style:** Understated text links and minimal button prompts
- **Avoid:** Flashy graphics / Excessive animations / Complex navigation / Vibrant colors

### Don'ts
- ❌ don't use bright accent colors — screenshot shows a monochromatic palette
- ❌ don't use heavy drop shadows — screenshot shows flat surfaces with minimal depth
- ❌ don't use decorative serif fonts — screenshot shows a geometric sans-serif throughout
- ❌ don't use bold weights for body text — screenshot shows uniform weight 400
- ❌ don't use complex card borders — screenshot shows subtle 1px dividers or none
- ❌ don't use cluttered navigation — screenshot shows a clean, simple header

The system deliberately omits decorative flair, complex animations, and vibrant accent colors to maintain its focus on pure, curated content.

## System Prompt (paste into AI tool)

```
Minimalissimo is a global platform for minimalist design and culture. It uses a strictly monochromatic palette with #F7F7F7 backgrounds and #000000 ink. Typography is exclusively geometric sans-serif at weight 400, creating a clean and intellectual aesthetic. The layout is a 3-column grid showcasing curated photography. Critical donts: avoid bright accent colors, use geometric sans-serif only, maintain weight 400, avoid drop shadows, keep navigation minimal, and focus on content photography over UI elements.
```