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

# VISIONNAIRE · Design System

> Graphic restraint meets lived-in fashion imagery

**Theme:** light · **Industry:** fashion · **Source:** https://vision-naire.com/ · **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._

VISIONNAIRE’s homepage pairs stark black-and-white navigation and product details with expansive fashion campaign photography. A spacious, image-led storefront moves from new arrivals through editorial collections and categories to a newsletter and compact footer.

## North star

Keep the interface nearly monochrome and let large, authentic fashion photography carry the colour and editorial character.

## Overview

The visual system is built around a white canvas (#ffffff), black typography and fine black rules; the measured palette is intentionally spare. The pale cream (#f7f5e8) appears in measured text, while warm earth and garment colours belong primarily to the campaign photography rather than the interface palette. PP Neue Montreal carries everything, from oversized uppercase navigation to small, widely tracked product labels. The page alternates full-width, two-column campaign imagery with airy product grids, category cards, and a broad editorial image band. Product tiles keep their presentation quiet so the garment photography and names lead. Generous white gaps separate these different image densities, while fine borders and outlined pill-shaped “VOIR” links provide restrained interaction cues. The result feels like a fashion lookbook organized as a direct storefront: editorial imagery sets the mood, and minimal interface chrome keeps shopping legible.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas, product-grid ground, and the white outline text used over campaign photography. |
| Graphic Ink | `#000000` | `--color-graphic-ink` | brand | Logo, navigation, product details, footer text, and thin borders on the otherwise white interface. |
| Soft Ivory | `#f7f5e8` | `--color-soft-ivory` | neutral | Measured muted text colour; a subtle supporting tone, not a defining page background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Graphic Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#f7f5e8` (Soft Ivory) · `--color-border` → `#000000` (Graphic Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#f7f5e8` | `#ffffff` | 1.09:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PP Neue Montreal | `--font-body` | webfont | 500, 700 | Site-wide typeface for navigation, headings, product details, links, and forms. | DM Sans |

- **PP Neue Montreal:** Use medium weight throughout, with bold emphasis for select form controls. Navigation and headings are uppercase; labels and small links use pronounced tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.339, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 45px | 500 | 1.15 | 0.016em | uppercase | PP Neue Montreal | Primary campaign or page title, set in uppercase. |
| h2 | 33px | 500 | 1.5 | 0.021em | uppercase | PP Neue Montreal | Section headings such as latest pieces. |
| h3 | 24px | 500 | 1.2 | 0.029em | uppercase | PP Neue Montreal | Secondary editorial or category headings. |
| h4 | 21px | 500 | 1.5 | 0.033em | uppercase | PP Neue Montreal | Smaller supporting section headings. |
| body | 14px | 500 | 1.3 | 0.03em | — | PP Neue Montreal | Product names, descriptions, and standard page copy. |
| caption | 11px | 500 | 1.5 | 0.1em | — | PP Neue Montreal | Compact product and campaign captions. |
| nav | 33px | 500 | 1.5 | 0.021em | uppercase | PP Neue Montreal | Large uppercase primary navigation labels. |
| link | 11px | 500 | 1.5 | 0.1em | — | PP Neue Montreal | Small utility and product links. |
| eyebrow | 12px | 500 | 1.5 | 0.058em | uppercase | PP Neue Montreal | Uppercase introductory labels above content. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 10, 15, 18, 20, 25, 35, 40, 50, 70 px.
- Section rhythm 50px · element gap 40px · card padding 30px · max content width 1340px.

A spacious, full-width storefront uses a measured page max width of 1340px, with the first campaign and later editorial imagery arranged in two columns. Product showcases use four columns, while the category band uses three. Sections alternate between dense image or product areas and generous white breathing room. Left-aligned section headings and compact labels keep the grid easy to scan; the newsletter and footer return to a simple single-column flow.

## Shape & elevation

- Radius: media `15px` · link `9999px` · xs `15px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.25, 0, 0, 1)` on interactive elements.

The interface is predominantly flat: white sections meet without shadows, and product tiles rely on spacing rather than raised cards. Use thin black rules for structural separation and fine black outlines on controls. Campaign images sit flush in their grid; outlined pill links overlay photos as the main layered element.

## Imagery

Photography is the main expressive element: fashion models, styled campaign scenes, and product cutouts on pale backgrounds. Campaign imagery often fills its panel and is cropped to emphasize people, garments, and setting; product imagery stays centered and clean. The page’s warmer browns, greens, and creams come from photos and products, not additional interface colours. No illustrative or 3D style defines the page.

## Components

### Announcement strip

A narrow black bar at the very top repeats a compact white European free-shipping message.

### Primary navigation

White horizontal header with a bold wordmark, large uppercase links, thin black dividers, and a compact bag icon.

### Campaign tile

Large fashion photo in a two-column grid, with a white outlined pill link and small caption placed over the image.

### Product card

Centered garment image with compact uppercase name, size options, and price beneath; keep card chrome minimal.

### Outlined action link

“VOIR” appears in uppercase white on photography inside a thin white outlined pill; other grid actions use restrained black outlines.

### Newsletter form

A white signup area pairs an uppercase multi-line heading with an email input underlined in black and a small validation action.

### Footer links

A compact list of customer service, social, and legal links in small black type, with copyright aligned separately.

### Measured component styles

- **Primary button** (“VALIDER”): transparent background · text #000000 · radius 0px · padding 15px 4px · 700 15px PP Neue Montreal · uppercase
- **Link** (“ZIPPER MUSIC THERAPY”): transparent background · text #000000 · radius 0px · padding 0px · 500 11px PP Neue Montreal
- **Input**: transparent background · text #000000 · radius 0px · padding 15px 0px · 700 15px PP Neue Montreal · uppercase
- **Card** (“MON PANIER Votre panier est vide.”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 25px 35px · 500 14px PP Neue Montreal
- **Navigation item** (“NOUVEAUTÉS”): transparent background · text #000000 · radius 0px · padding 0px · 500 33px PP Neue Montreal · uppercase

## Do

- Use white as the dominant interface canvas.
- Set navigation and display headings in uppercase.
- Let campaign photography occupy large, clean grid panels.
- Keep product details compact and directly beneath images.
- Use thin rules and outlined pills instead of filled UI chrome.
- Leave broad white gaps between major storefront sections.

## Don't

- Do not add unmeasured interface colours.
- Do not place shadows behind product cards.
- Do not let decorative UI compete with garment photography.
- Do not turn the product grid into heavy boxed cards.
- Do not use dense paragraphs where short labels suffice.
- Do not treat photo colours as brand-palette colours.

## Agent prompt

Build a fashion storefront page in the VISIONNAIRE visual style. Use Gallery White (#ffffff) as the canvas and Graphic Ink (#000000) for the wordmark, navigation, product details, rules, and footer; reserve Soft Ivory (#f7f5e8) for subtle muted text only. Use a clean sans-serif close to PP Neue Montreal, with medium-weight uppercase display and navigation text and widely tracked compact labels. Organize content into broad campaign-photo panels, a four-column product grid, and image-led category links, separated by generous white space. Keep imagery authentic and editorial, allowing its natural garment and setting colours to supply warmth. Use thin borders, outlined pill actions, flush image grids, and no shadows. Include a minimal newsletter form and compact utility footer. Prioritize clear shopping labels and a quiet interface around the photography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two full-width campaign panels side by side beneath the announcement and navigation. | Campaign discovery, View links over images | Full-bleed photography, Outlined pill links, Small image captions |
| 2 | product-grid | Four-column product grid on a white canvas, followed by a centered collection link. | Browse new arrivals, Compare products, Select a size | Centered product images, Compact names and prices, Minimal card chrome |
| 3 | gallery | Long two-column sequence of editorial campaign panels. | Explore collections, Open campaign links | Large photography tiles, Overlay pill actions, Short captions |
| 4 | product-grid | Four-column product grid on white, with a centered link below. | Browse remaining pieces, Check sizes and prices | Product cutouts, Compact uppercase details, Minimal outlines |
| 5 | category-nav | Three side-by-side category links combining imagery and short labels. | Choose a category, Browse by product type | Fashion imagery, Simple category labels, White spacing |
| 6 | newsletter | Editorial image band followed by a white newsletter signup area. | Explore brand story, Subscribe by email | Wide brand image, Large uppercase signup heading, Underlined email field |
| 7 | footer | Compact service and legal links on a white background, with copyright set apart. | Contact customer service, Open social and legal links | Small black text, Vertical link list, Separated copyright |

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