# Giopandone · Design system migration spec

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

> An excellent example of a restrained, Swiss-inspired design portfolio where typography and spacing dictate the hierarchy.

## 1. Identity DNA

Giopandone is a digital portfolio built with the discipline of a minimalist Swiss-style design studio. Every element serves a typographic or compositional purpose, creating a system where restraint itself becomes the primary visual language. This is a toolkit designed for a brand experience designer, where the absence of decoration is the most powerful statement.

**One-liner:** A restrained, typography-driven portfolio for a brand experience designer.
**Keywords:** design · portfolio · minimal · editorial · premium
**Analogy:** A minimalist Swiss-style design portfolio.

## 2. Color

The color system is a study in high-contrast monochrome, built on a strict foundation of black, white, and a calibrated secondary gray. A single vibrant blue accent exists not for decoration, but as a precise tool for directional emphasis.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `rgba(0,0,0,0.45)` | secondary text |
| `--accent` | `#1840E7` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Strict high-contrast monochrome with a single vibrant blue accent used sparingly for emphasis.

The governing principle is absolute: color is a functional signal, never an ornamental layer.

## 3. Typography

Typography carries the full weight of hierarchy and voice. The system pairs geometric and neo-grotesque sans-serif categories, establishing a voice that is professional, restrained, and typographically dominant.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -0.6px | Hero headlines |
| body | 13px | 1.23 | 400 | 0 | Body copy |
| caption | 12.24px | 1.63 | 400 | 0 | Metadata and navigation |

## 4. Spacing

A strict 4px baseline grid orchestrates all vertical rhythm, ensuring mathematical precision in every element's placement and generous whitespace.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict 4px baseline grid with ample vertical whitespace.

## 5. Surfaces

Depth is implied through stark juxtaposition, not atmospheric effects. The system is entirely flat, relying on a single, functional 1px border to define separation where needed.

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

## 6. Layout

The layout skeleton is a strict, asymmetric grid that prioritizes negative space as an active compositional element. Generous margins and intentional misalignment create dynamic tension without sacrificing structural clarity.

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

**Skeleton:** Strict grid with generous negative space and asymmetric alignments.

## 7. Motion & Interaction

Motion philosophy is one of minimal, functional feedback. Transitions are quick (0.25s) and limited to subtle opacity or color shifts, ensuring interactions feel instant and precise rather than performed.

- **Durations:** micro 220ms · small 250ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle opacity transitions on hover

- **Hover:** Color or opacity shift, typically transitioning to the muted ink color.
- **Click:** Instant navigation.
- **Transition:** 0.25s all transition on interactive elements.
- **Keyboard:** Standard focus states.

## 8. Voice & Don'ts

The editorial voice is confident and direct, expressed through bold, concise headlines and minimal text-based navigation. Every word is a deliberate typographic choice, not a flourish.

- **Tone:** Professional, restrained, and highly confident.
- **Headline style:** Bold, concise, and typographically dominant.
- **CTA style:** Minimalist text links, often in uppercase.
- **Avoid:** Decorative elements / Rounded corners / Vibrant multi-color palettes / Playful animations

### Don'ts
- ❌ Don't use rounded corners — screenshot shows sharp, square edges on all containers.
- ❌ Don't use drop shadows — screenshot shows flat surfaces without depth effects.
- ❌ Don't use multiple accent colors — screenshot shows only a single blue accent against monochrome.
- ❌ Don't use centered text layouts — screenshot shows left-aligned and asymmetric typography.
- ❌ Don't use busy backgrounds — screenshot shows stark white negative space.
- ❌ Don't use decorative borders — screenshot shows only functional, thin dividing lines.

This system deliberately omits rounded corners, drop shadows, decorative borders, and centered layouts to enforce its uncompromising, grid-driven aesthetic.

## System Prompt (paste into AI tool)

```
This is a minimalist design portfolio for a brand experience designer. It features a strict monochrome palette (white #FFFFFF background, black #000000 text, muted rgba(0,0,0,0.45) secondary text) with a single vibrant blue accent (#1840E7). Typography relies on geometric and neo-grotesque sans-serif categories, with a massive display logo and small, uppercase navigation. The layout is highly structured, utilizing a strict 4px baseline grid, sharp square corners, and generous negative space. Critical donts: never use rounded corners, avoid drop shadows, never use multi-color palettes, avoid centered text, never use busy backgrounds, and avoid decorative borders.
```