# Brunoarizio · Design system migration spec

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

> Worth including as a benchmark for extreme minimalist portfolio design that relies entirely on typography, spacing, and pacing.

## 1. Identity DNA

Bruno Arizio’s design system operates like a private gallery: architecture is minimal, light is unobstructed, and every surface defers to the work on display. The identity is defined by a single font weight, a stark monochrome palette, and a strict vertical rhythm—all calibrated to let photography and typography carry the narrative without competition.

**One-liner:** A minimalist portfolio for a globally recognized independent designer and creative director.
**Keywords:** design · art · photography · global · independent
**Analogy:** High-end independent design studio portfolio.

## 2. Color

The palette is monastic: pure white for ground, solid black for type, and a single neutral gray for secondary text. There are no accent colors, gradients, or decorative tones—chromatic restraint ensures that photographic content provides all the visual variation.

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

**Color principle:** Stark monochrome palette with pure white backgrounds, solid black typography, and neutral gray for secondary text.

Color functions not as expression but as a neutral frame, a decision that keeps the system flexible across any project the studio presents.

## 3. Typography

Typography is set in a geometric sans-serif at a uniform weight of 400, with letter-spacing tightened to -0.22px for a compact, refined texture. The scale is deliberately small—13px for body text—forcing intimacy and precision, while navigation and descriptive copy share the same restrained typographic treatment.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 16px | 1.07 | 400 | -0.22px | Primary navigation and short descriptive copy |

**Type rules:**
- Extremely tight letter-spacing (-0.22px) for a refined, compact appearance.
- Heavy use of small font sizes around 13px for body text.
- Strictly uniform font weight of 400 across all visible elements.

## 4. Spacing

Rhythm is governed by two consistent measures: 18px of horizontal padding and 45px of vertical separation between sections.

- **Base unit:** 18px
- **Scale:** 11 / 18 / 23 / 45 px
- **Rhythm:** Defined by consistent 18px horizontal padding and 45px vertical section padding.

## 5. Surfaces

Surfaces are completely flat: no shadows, no borders, no visual dividers. Separation between content blocks is achieved entirely through white space, making negative space the primary structural element of every screen.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** No visible structural borders; separation relies entirely on white space.

## 6. Layout

The layout skeleton is a single-column, full-width vertical stack with generous vertical spacing between content blocks. It resists grid complexity in favor of a clean, linear reading path that flows uninterrupted from top to bottom.

- **Container max:** 1440px
- **Grid:** 1 columns, gutter 0px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width stacked layout with generous vertical spacing between sections.

## 7. Motion & Interaction

Motion is deliberately slow, with transitions set to 1 second for opacity, transform, and clip-path changes. The pacing is ceremonial rather than functional—a choice that prioritizes smooth, considered movement over instant interactive feedback.

- **Durations:** micro 220ms · small 400ms · medium 1000ms
- **Easing:** `cubic-bezier(0.22, -0.01, 0.13, 0.99)`
- **Patterns:**
  - Slow, deliberate transitions (1s) for opacity, transform, and clip-path.

- **Hover:** Cursor changes to pointer on interactive text elements.
- **Click:** Subtle opacity or transform changes likely linked to the 1s transitions.
- **Transition:** Slow 1-second cubic-bezier transitions define the overall interactive feel.
- **Keyboard:** Standard browser focus behavior on links.

## 8. Voice & Don'ts

The editorial voice is professional, confident, and understated: headlines state credentials and client lists plainly, and the single call to action is a simple underlined email link. There is no marketing language, no superlatives, and no decorative flourish in the written content.

- **Tone:** Professional, confident, and understated.
- **Headline style:** Direct and descriptive, stating credentials and client lists plainly.
- **CTA style:** Highly minimal, using a simple underlined email link for inquiries.
- **Avoid:** Marketing jargon / Excessive decoration / Bright or distracting colors / Complex UI components

### Don'ts
- ❌ don't use multiple font weights — screenshot shows a uniform 400 weight across all text.
- ❌ don't apply decorative shadows — screenshot shows completely flat, borderless surfaces.
- ❌ don't use a wide letter-spacing — screenshot shows a tight, negative letter-spacing of -0.22px.
- ❌ don't introduce complex navigation patterns — screenshot shows only three simple text links.
- ❌ don't use a multi-color palette — screenshot relies strictly on black, white, and gray.
- ❌ don't use fast, snappy animations — screenshot specifies slow 1-second transitions.

What the system deliberately omits—multiple font weights, decorative shadows, complex navigation, bright colors, fast animations—is as defining as what it includes.

## System Prompt (paste into AI tool)

```
This is a minimalist portfolio website for an independent designer and creative director. The visual DNA is defined by a stark, high-contrast monochrome palette (#FFFFFF background, #000000 ink, #A6A6A6 muted) and a clean, geometric sans-serif typeface used at small sizes with tight letter-spacing. The layout is incredibly spacious, relying on generous padding (18px horizontal, 45px vertical) and vertical stacking rather than complex grids. Critical donts include: never use multiple font weights, do not add shadows or complex borders, and never use wide letter-spacing. The motion profile is slow and deliberate, utilizing a custom cubic-bezier (0.22, -0.01, 0.13, 0.99) for transitions. The overall effect is refined, quiet, and highly professional, letting the work speak for itself.
```