# Contract Mdfitalia · Design system migration spec

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

> This site is a masterclass in restrained, high-end editorial design, using extreme minimalism to elevate the showcased furniture products.

## 1. Identity DNA

The design system for MDF Italia's contract division operates like a serene, high-end furniture showroom, where the architecture of the interface exists solely to frame the product. Its identity is one of **restrained minimalism**, using an extreme economy of UI to let atmospheric photography carry the entire emotional and communicative weight.

**One-liner:** A premium furniture contract website featuring immersive photography and a restrained, elegant layout.
**Keywords:** furniture · contract · architecture · luxury · minimalism
**Analogy:** A serene, high-end furniture showroom that prioritizes atmospheric photography over cluttered UI.

## 2. Color

A high-contrast, neutral palette of pure white, light gray, and deep black provides a clean, gallery-like foundation. The deliberate absence of chromatic color ensures that the visual warmth and tonal variation of the product photography dictate the user's perception.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F6F6F6` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#141414` | secondary text |
| `--muted` | `#3E3E3E` | placeholder |
| `--line` | `rgba(229, 231, 235, 1)` | divider |

**Color principle:** A high-contrast, neutral palette that lets the product photography dictate the visual warmth.

This chromatic restraint is a core principle, guaranteeing that no competing UI element distracts from the showcased furniture.

## 3. Typography

The typographic system employs a clean, geometric sans-serif category, establishing a voice that is modern, professional, and unobtrusive. Headings are set with tight tracking to convey refinement, while body text uses a consistent 500 weight to create a denser, more structured text texture than conventional layouts.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 100px | 1.0 | 500 | -1px | Large display text or hero numbers |
| heading | 50px | 1.0 | 500 | -0.6px | Main section headings |
| subheading | 24px | 1.08 | 500 | -0.4px | Card titles and secondary headings |
| body | 16px | 1.125 | 500 | -0.4px | General body text and navigation |
| small | 15px | 1.27 | 400 | -0.375px | Legal text, metadata, and disclaimers |

**Type rules:**
- Headings use tight tracking (e.g., -0.4px to -1px) for a refined, modern look.
- Body text weight is predominantly 500, creating a denser, more structured feel than standard regular weight.

## 4. Spacing

The rhythm is defined by a tight, efficient spacing system that prioritizes a compact, information-dense layout over expansive whitespace.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A tight, efficient spacing system that prioritizes compact layout over generous whitespace.

## 5. Surfaces

Depth is communicated through minimal, precise elevation. Shadows are exceptionally soft and diffused, appearing as subtle lifts rather than pronounced drops, while borders are reduced to thin, almost imperceptible 1px lines that structure without decorating.

- **Radius:** sm 2px · md 4px · lg 8px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.03) 0px 4px 40px 0px
  - rgba(0, 0, 0, 0.3) 0px 30px 70px 0px
- **Borders:** 1px solid rgb(229, 231, 235)

## 6. Layout

The layout skeleton is a full-bleed photography framework, where immersive imagery claims the viewport from edge to edge. A clean, top-aligned navigation and a strict reduction of UI elements ensure the structural framework remains virtually invisible.

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

**Skeleton:** A full-bleed photography layout with a clean, top-aligned navigation and minimal UI elements.

## 7. Motion & Interaction

Motion is employed with surgical precision to acknowledge interaction without breaking immersion. The philosophy favors smooth, short transitions of opacity and minor spatial shifts, treating animation as a subtle functional cue rather than a decorative layer.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions for subtle UI interactions.

- **Hover:** Subtle opacity changes or minor spatial shifts to indicate interactivity without distracting from the imagery.
- **Click:** Immediate, clean feedback with no heavy animation.
- **Transition:** Smooth, short transitions (0.2s to 0.5s) for opacity and layout changes.
- **Keyboard:** Standard focus outlines, likely minimal to match the clean aesthetic.

## 8. Voice & Don'ts

The editorial voice is sophisticated and understated, relying on concise headlines and strong visual context rather than descriptive copy. This tone mirrors the interface's minimalism, allowing the product's quality to articulate the value proposition directly.

- **Tone:** Sophisticated, professional, and understated, letting the product speak for itself.
- **Headline style:** Concise, modern, and heavily reliant on strong visual photography to convey the message.
- **CTA style:** Direct and unobtrusive, often presented as simple text links or minimal outlined buttons.
- **Avoid:** Avoid bright, saturated accent colors that clash with the product photography. / Avoid heavy drop shadows or complex UI decorations that distract from the layout's minimalism. / Avoid overly decorative or script typefaces that conflict with the geometric sans-serif system.

### Don'ts
- ❌ Don't use bright primary colors — screenshot shows a strictly monochrome base palette.
- ❌ Don't use heavy, ornate borders — screenshot shows borderless or very thin, subtle dividers.
- ❌ Don't use overly wide or loose letter-spacing — screenshot shows tight tracking on all headings.
- ❌ Don't use large, busy UI patterns — screenshot shows a restrained, photography-focused layout.
- ❌ Don't use heavy drop shadows on cards — screenshot shows very subtle, soft elevation shadows.
- ❌ Don't use playful, rounded UI elements — screenshot shows sharp, clean, rectangular or minimally rounded components.

By design, the system deliberately avoids saturated accents, heavy decorative elements, and playful typography to preserve its pure, photography-forward editorial focus.

## System Prompt (paste into AI tool)

```
This design is for a premium furniture contract website, prioritizing atmospheric, full-bleed photography over complex UI. The palette is strictly monochrome, using #FFFFFF and #F6F6F6 for backgrounds, #000000 for primary text, and #3E3E3E for muted elements. Typography uses a clean, geometric sans-serif with tight negative letter-spacing for a sophisticated, modern feel. Critical donts include avoiding bright accent colors, avoiding heavy UI borders or drop shadows, and avoiding loose or playful typography. The layout is expansive and clean, letting the product imagery dominate the visual hierarchy.
```