# Palazzomonti · Design system migration spec

> Source: https://palazzomonti.org  ·  Curated by OpenDesign  ·  en

> This site is a great example of a refined, minimalist editorial design that relies on typography and whitespace.

## 1. Identity DNA

Palazzomonti's design system functions as a contemporary art gallery, where the architecture is one of deliberate restraint. Its identity is built on a foundation of cultural authority, using generous whitespace and classic typography to create an environment of calm and focused curation.

**One-liner:** A refined and minimalist editorial layout for a cultural center, emphasizing generous whitespace and classic typography.
**Keywords:** Cultural Center · Residency · Art · Architecture · Minimalist
**Analogy:** A contemporary art gallery website with a refined, understated aesthetic.

## 2. Color

The color system is a study in high-contrast restraint, built on a monochrome base of pure black and white. A single, calm teal accent provides a point of measured emphasis without disrupting the overall quietude.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#B0E0E9` | card background |
| `--ink` | `#000000` | body text |
| `--accent` | `#226D7A` | single accent |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** High-contrast monochrome base with a single, calm teal accent.

The principle is absolute chromatic restraint, using color only to punctuate, never to decorate.

## 3. Typography

The typographic voice is singular and authoritative, employing a transitional-serif for both display and body text. This choice establishes a formal, editorial tone, prioritizing readability through generous line-height and avoiding bold weights except for functional labels.

- **Display:** transitional-serif
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 36px | 1.28 | 400 | normal | Section heading |
| body | 20px | 1.4 | 400 | normal | Body copy |
| label | 16px | 1.75 | 700 | normal | Button text |

**Type rules:**
- Use transitional-serif for both display and body text.
- Maintain generous line-height for readability.
- Avoid bold weights except for labels.

## 4. Spacing

The spatial rhythm is defined by generous vertical spacing and large padding, creating a measured, unhurried pace for content consumption.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** generous vertical spacing with large top and bottom padding

## 5. Surfaces

Surfaces are defined by clarity and flatness, with no shadows to obscure their planes. A single, thin black border provides the only structural delineation, reinforcing the system's crisp, architectural lines.

- **Radius:** sm 4px · md 8px · lg 0px · pill 999px
- **Borders:** 1px solid #000000

## 6. Layout

The layout skeleton is a full-width, split composition with asymmetric columns, establishing a dynamic but orderly visual field. This structure supports a generous, single-column text flow that prioritizes reading comfort.

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

**Skeleton:** Full-width split layout with asymmetric columns

## 7. Motion & Interaction

Motion philosophy is one of understated fluidity, with all elements granted smooth, automatic transitions. The intent is to create a sense of effortless continuity rather than to call attention to the interface itself.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - All elements have transitions enabled

- **Hover:** Subtle color transition
- **Click:** No visible click states
- **Transition:** All elements have 'all' transitions
- **Keyboard:** Standard focus rings

## 8. Voice & Don'ts

The editorial voice is formal, descriptive, and deliberately understated, conveyed through short, declarative headlines in the serif typeface. This tone avoids any playful excess or visual clutter, maintaining a consistent posture of cultural seriousness.

- **Tone:** Formal, descriptive, and understated
- **Headline style:** Short, declarative sentences in serif font
- **CTA style:** Uppercase, pill-shaped outline buttons
- **Avoid:** Playful tone / Excessive punctuation / Visual clutter

### Don'ts
- ❌ Don't use sans-serif fonts — screenshot shows transitional-serif typography.
- ❌ Don't use bright, saturated colors — screenshot shows a muted teal accent (#226D7A).
- ❌ Don't use rounded corners — screenshot shows sharp edges on buttons.
- ❌ Don't use drop shadows — screenshot shows flat surfaces.
- ❌ Don't use dark mode — screenshot shows a bright white background.
- ❌ Don't use complex layouts — screenshot shows a generous, single-column text flow.

The system deliberately forgoes dark mode, rounded corners, drop shadows, and sans-serif typography to preserve its singular, refined character.

## System Prompt (paste into AI tool)

```
Positioning: A refined, minimalist editorial website for a cultural center. Key colors: #FFFFFF background, #000000 ink, #226D7A accent. Font categories: transitional-serif for both display and body. Critical donts: Do not use sans-serif fonts, do not use bright saturated colors, do not use drop shadows. The design relies on generous whitespace and classic typography to convey a sense of calm and cultural authority.
```