---
title: "MDF Italia — Contract design system"
variant: extended
source: https://www.mdfitalia.com/en/contract
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/contract-mdfitalia-com-en)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# MDF Italia — Contract · Design System

> Quiet typography, architectural spaces, considered design.

**Theme:** light · **Industry:** design · **Source:** https://www.mdfitalia.com/en/contract · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A spacious contract-design landing page led by immersive hospitality photography and restrained typography. A white canvas, black text, and orderly image grids keep attention on the furniture and the spaces it shapes.

## North star

Keep the interface quiet and precisely structured so full-scale interior photography, not decoration, defines the page.

## Overview

The visual strategy is deliberately quiet: a white canvas (#ffffff) and black typography (#000000) let large architectural photographs carry most of the visual character. Warm wood, stone, upholstery, and muted landscape tones come from the photography rather than from a separate brand-colour system. Headings use Plain in light weights, with compact tracking and close line spacing; body copy and links stay small and functional. The opening is a full-bleed image with navigation laid directly over it, followed by a large editorial statement and a sequence of open, white sections. Product and project imagery is organized in clear grids, with generous separation between category bands. Pale grey (#f9f9f9) appears on selected cards and buttons, while muted grey (#b2b2b2) softens secondary copy. The interface avoids decorative borders, strong shadows, gradients, and rounded controls, preserving a clean architectural presentation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas across the page, maintaining a clean field around editorial copy and project imagery. |
| Architect Ink | `#000000` | `--color-architect-ink` | neutral | Main text, navigation, links, inverse media areas, and the dark video play treatment. |
| Soft Graphite | `#b2b2b2` | `--color-soft-graphite` | semantic | Muted supporting text and secondary details, visually subordinate to black headings and links. |
| Porcelain Mist | `#f9f9f9` | `--color-porcelain-mist` | surface | Light card and button surfaces; a subtle tonal distinction from the white canvas. |
| Slate Hairline | `#6b7280` | `--color-slate-hairline` | semantic | Sparse border and interface detail colour; not a prominent decorative rule. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Architect Ink) · `--color-surface-2` → `#f9f9f9` (Porcelain Mist) · `--color-text` → `#000000` (Architect Ink) · `--color-text-muted` → `#b2b2b2` (Soft Graphite) · `--color-border` → `#6b7280` (Slate Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f9f9f9` | 19.95:1 | AAA |
| `#b2b2b2` | `#ffffff` | 2.12:1 | fail |
| `#b2b2b2` | `#000000` | 9.9:1 | AAA |
| `#b2b2b2` | `#f9f9f9` | 2.01:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Plain | `--font-body` | webfont | 500, 400, 300 | Brand-wide interface type for headings, navigation, body copy, buttons, and links. | Inter |

- **Plain:** Use measured light, regular, and medium weights; keep tracking slightly tight and casing natural.

### Type scale — Golden Ratio (ratio ≈ 1.581, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 100px | 300 | 1 | -0.05em | — | Plain | Oversized editorial display treatment where the page needs a strong statement. |
| h1 | 50px | 300 | 1 | -0.025em | — | Plain | Primary page and section-level headline, including the contract introduction. |
| h2 | 30px | 400 | 1.07 | -0.025em | — | Plain | Major content headings such as Office and Hospitality. |
| h3 | 24px | 400 | 1.08 | -0.025em | — | Plain | Project card titles and supporting content subheads. |
| body | 16px | 500 | 1.13 | -0.025em | — | Plain | Introductory descriptions, project summaries, and form copy. |
| button | 16px | 500 | 1.13 | -0.025em | — | Plain | Compact action labels on calls to action and form controls. |
| nav | 24px | 400 | 1.08 | -0.025em | — | Plain | Primary navigation labels and expanded menu category names. |
| link | 16px | 500 | 1.13 | -0.025em | — | Plain | Text links such as View all, Discover more, and catalogue downloads. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 5, 6, 8, 10, 12, 16, 18, 20, 24, 32, 48, 69 px.
- Section rhythm 48px · element gap 12px · card padding — · max content width 1376px.

The page uses a wide desktop composition with measured maximum content width of 1376px and a comfortable density. A full-bleed hero precedes mostly white, left-aligned content sections. Editorial copy occupies a single column; values and project areas use multi-column grids, with image-led cards and compact descriptions. Section changes rely on substantial vertical breathing room rather than coloured bands. Keep headings anchored to the content edge, while the hero title is centered. The lower catalogue area pairs two columns before the contact form and a restrained footer.

## Shape & elevation

- Radius: xs `2px`
- Shadow `lg` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.03) 0px 4px 40px 0px`
- Motion: standard transition `0.5s ease` on interactive elements.

The interface is predominantly flat: white space, square image edges, and minimal visible rules do the structural work. Do not add prominent shadows or floating panels. Keep cards unframed unless their pale surface distinguishes them from the canvas; the measured interface includes only a very subtle navigation shadow.

## Imagery

Use large, high-quality photographs of furnished offices, hospitality interiors, and architectural spaces. Images are warm and naturally toned, with material texture and real-world lighting; they are the main source of colour rather than graphic overlays. The first image fills the viewport width, while project images sit in clean rectangular grids. Include the embedded workplace video as an image-led media block with a simple central play cue. Avoid decorative illustration as a competing visual language.

## Components

### Overlay navigation

Place the wordmark and compact navigation directly over the full-bleed hero image; use black Plain text and restrained utility icons.

### Hero carousel

Use a full-width interior photograph as the first-view canvas, with discreet pagination indicators near the bottom edge.

### Editorial introduction

Pair a large, light-weight heading with concise supporting copy and a simple text action on a white background.

### Value tiles

Arrange four value statements in a multi-column row, using sparse line-art circles and minimal text rather than boxed cards.

### Project gallery cards

Show large rectangular project images in a grid, followed by compact titles, muted descriptions, and understated discovery links.

### Contact form

Use plain, square-cornered form fields with thin rules, compact labels, clear required indicators, and a light submit button.

### Catalogue pair

Set two catalogue features side by side, each with a dark-backed preview image, short description, and download link.

### Measured component styles

- **Primary button** (“Start now”): background #f6f6f6 · text #000000 · radius 0px · padding 18px 48px · 500 16px Plain
- **Secondary button** (“Play Video”): background #000000 · text #ffffff · radius 0px · padding 0px · 500 30px Arial
- **Link** (“View all”): transparent background · text #000000 · radius 0px · padding 0px · 500 16px Plain
- **Input** (“Profession (*) Architect Contractor / De”): transparent background · text #000000 · radius 0px · padding 4px 0px · 500 16px Plain
- **Card** (“Wide range of standard products Iconic p”): background #f9f9f9 · text #000000 · radius 0px · padding 0px · 400 16px Plain
- **Navigation item** (“Products”): transparent background · text #000000 · radius 0px · padding 0px · 500 16px Plain

## Do

- Let architectural photography lead the first impression.
- Use white canvas and black text as the core interface palette.
- Keep heading weights light and letter spacing subtly tight.
- Use clean rectangular image grids for office and hospitality projects.
- Separate sections with generous whitespace rather than coloured bands.
- Keep links and form controls understated and easy to scan.

## Don't

- Do not introduce bright accent colours absent from the measured palette.
- Do not put decorative gradients behind headings or cards.
- Do not use rounded, pill-shaped buttons or image frames.
- Do not compete with the interior photography using decorative graphics.
- Do not make secondary text as prominent as the primary headings.
- Do not add heavy borders, shadows, or dense dashboard-like panels.

## Agent prompt

Build a new MDF Italia-style page with a restrained architectural editorial feel. Use Gallery White (#ffffff) as the primary canvas and Architect Ink (#000000) for navigation, headings, and links. Reserve Porcelain Mist (#f9f9f9) for subtle card or button surfaces, Soft Graphite (#b2b2b2) for supporting copy, and Slate Hairline (#6b7280) only for sparse interface rules. Use Plain or a close sans-serif substitute, with light display headings, natural casing, and subtly tight tracking. Start with a full-bleed interior photograph and overlay simple navigation. Follow with left-aligned editorial content, open multi-column image grids, and generous whitespace. Keep imagery warm and realistic, controls square and understated, and decoration minimal. Build semantic responsive sections without inventing bright brand accents or heavy elevation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed hero image with centered page title and navigation overlaid. | image carousel, overlaid navigation, pagination indicators | full-width photography, black navigation text, centered title |
| 2 | feature-split | Single-column editorial introduction on a white canvas. | introductory copy, show more action | large light headline, compact body text, text link |
| 3 | feature-grid | Four-column values row with sparse circular line-art motifs. | scannable value statements | minimal line art, large text labels, open white spacing |
| 4 | gallery | Wide project grid with image-led cards and a section-level View all link. | view all link, discover more links | large rectangular photos, compact card captions, white background |
| 5 | gallery | Multi-column hospitality project gallery with section heading and View all link. | view all link, project discovery | interior photography, image grid, compact captions |
| 6 | video | Full-width video preview with a central play control. | play video, video preview | large still image, central play cue, minimal surrounding interface |
| 7 | product-showcase | Two-column catalogue section pairing book previews with descriptions and download actions. | download catalogue, paired resources | dark preview backgrounds, white book covers, text links |
| 8 | contact | Single-column contact introduction and form with aligned fields. | lead capture form, required fields, privacy consent | underlined fields, plain labels, light submit button |
| 9 | footer | Compact two-column footer with information and newsletter areas. | footer navigation, newsletter entry point | small text links, open columns, white background |

## Source CSS custom properties (selected)

```css
--swiper-pagination-color: #000;
--swiper-navigation-color: #fff;
--swiper-pagination-bullet-inactive-color: #ededed;
--swiper-theme-color: #007aff;
--tw-text-opacity: 1;
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-ring-color: rgba(59,130,246,.5);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/contract-mdfitalia-com-en