Dahlen Rust
#b94e3aSupporting palette color for small decorative accents when the core palette needs contrast.
VISIONNAIRE
vision-naire.com
Website preview
The design language
VISIONNAIRE is an editorial streetwear shop rendered as a gallery on bone-white: large-format photography, heavy uppercase tracking, and a stripped-down achromatic palette that lets garment prints and color-block hero panels do the visual work. The interface avoids chrome — no shadows, no rounded card stacks, no gradient washes — relying on hard edges, hairline rules, and a single warm cream (#f7f5e8) to break the black-on-white monotony. Pill buttons (50px radius) and generous letter-spacing on every label give the system a fashion-magazine cadence rather than a retail-grid feel. Product tiles are dense and uniform (4 across), prioritising catalogue breadth over white-space breathing room, and the entire chrome reads as uppercase, tracked, and slightly shouted — like a runway programme.
Color palette
brand
neutral
Obsidian
#000000Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color
Bone White
#ffffffPage canvas, product card backgrounds, modal surfaces — the base everything sits on
Vellum Cream
#f7f5e8Warm off-white used for color-block hero panels, editorial sections, and the newsletter module background — the only chromatic surface in the system
Charcoal
#231f20Near-black for body copy on white and cream surfaces — slightly softer than pure obsidian, preserving AAA contrast on the warm cream
Pewter
#888888Muted icon strokes, separators, and secondary graphic details.
Typography
Type scale
Major Second (1.125) · 14px basedisplay
45px · 500 · 1.15 · 0.72px trackingThe quick brown fox jumps
heading-lg
33px · 500 · 1.15 · 0.53px trackingThe quick brown fox jumps
text-30
30px · 500 · 1.5The quick brown fox jumps
heading
24px · 500 · 1.2 · 0.38px trackingThe quick brown fox jumps
heading-sm
21px · 700 · 1.2 · 0.34px trackingThe quick brown fox jumps
subheading
18px · 500 · 1.3 · 0.5px trackingThe quick brown fox jumps
text-15
15px · 500 · 1.5The quick brown fox jumps
body
14px · 500 · 1.5 · 0.4px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
PP Neue Montreal
- Weights
- 500
- Sizes
- 8px, 10px, 11px, 12px, 14px, 15px, 18px, 21px, 24px, 30px, 33px, 45px
- Line height
- 1.15-2.78
- Letter spacing
- 0.016em to 0.10em — tracking is INVERSE to size: smallest text (8px) gets the widest tracking (0.10em), display (45px) gets the tightest (0.016em)
- Fallback
- Inter (500/700) with letter-spacing manually applied, or Space Grotesk (500/700)
The sole typeface across the entire site. All UI labels are uppercase, weight 500, with generous tracking — the fashion-magazine signature. Headings and display sizes use weight 700 with tightened tracking for editorial weight
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1400px
- Section gap
- 30-35px
- Card padding
- 20px
- Element gap
- 4px
Border radius
tags
50pxcards
50pxbuttons
50pxnavLinks
40pxproductImages
15pxSpacing scale
1px2px4px5px10px15px18px20px23px25px30px35px40px50px70pxGuidelines
Do
- Use PP Neue Montreal (or Inter/Space Grotesk substitute) at weight 500 for all UI labels and weight 700 for headings — never mix in a second typeface family
- Set all UI text to uppercase with 0.04-0.10em letter-spacing — the tracking IS the brand voice
- Use 50px border-radius for all buttons, badges, and pill-shaped interactive elements
- Use the cream Vellum (#f7f5e8) for color-block editorial panels — it is the only surface that is not pure black or pure white
- Alternate sections between white, cream, and black backgrounds with 30-35px gaps — never use shadows to create depth between sections
- Keep product cards borderless and shadowless with 15px image radius — depth comes from image-to-canvas contrast, not elevation
- Use the inverse letter-spacing rule: the smaller the text, the wider the tracking (0.10em at 10px, 0.016em at 45px)
Don’t
- Do not introduce colour outside of Obsidian, Bone White, Vellum Cream, Charcoal, Pewter, and Dahlen Rust — the system is 0% colourful by design
- Do not use drop-shadows on any component — the system is intentionally flat
- Do not use lowercase text in any UI label — every label is uppercase with tracking
- Do not use card stacks with white-on-white subtle borders — use a 1px Obsidian hairline or rely on the Vellum cream surface for separation
- Do not add gradients, blurs, or glassmorphism effects — the brand reads as ink on paper, not as a glass UI
- Do not use border-radius below 15px on images or below 40px on buttons — the system is either pill-rounded or soft-rounded, never sharp-cornered
- Do not introduce a secondary typeface for body copy or descriptions — PP Neue Montreal serves every weight and size
Components
Announcement Marquee Bar
Top scrolling promotional barFull-bleed black background (#000000), white uppercase text at 12px weight 500, letter-spacing 0.023em, 2px vertical padding. Text repeats horizontally with CSS marquee animation. Content: shipping/promo messages in French.
Main Navigation Header
Primary site navigationWhite background, centered. VISIONNAIRE® logo at far left in 14px weight 700 uppercase with 0.064em tracking. Nav links (NOUVEAUTÉS, SHOP, COLLECTIONS, ARCHIVES) in 14px weight 500 uppercase, 25px horizontal spacing between items, 0.058em tracking. Cart icon at far right with 0-1 count badge. No dropdown menus visible — flat horizontal nav only.
Split Editorial Hero
First-screen brand/collection statement50/50 split. Left half: full-bleed lifestyle photograph (model wearing product against a wall). Right half: solid Vellum Cream (#f7f5e8) panel with centered brand wordmark — VISIONNAIRE® in 21px weight 500 dark, 'DAHLEN' in 45px weight 700 Dahlen Rust (#b94e3a), 'ART CLUB' in 12px weight 500 tracked. 'VOIR' pill button (50px radius) overlaid on both halves. No gradient, no overlay — hard edge between photo and color block.
VOIR Pill Button
Primary call-to-action on hero and collection tiles50px border-radius (fully rounded). Two variants: (1) Outlined ghost — 1px #000000 border, transparent fill, 14px weight 500 uppercase text in black, letter-spacing 0.058em, 20px horizontal / 10px vertical padding. (2) Filled — #000000 background, white text, identical dimensions. Always uppercase, always tracked.
Product Grid Card
Catalogue tile in product listingWhite background, no border, no shadow. Product image with 15px border-radius at top. Below image: product name in 12px weight 500 uppercase, 0.047em tracking, centered. Size selector row (XXS XXS S M L XL XXL) in 10px weight 500 uppercase, 0.039em tracking, with hover/active size underlined. Price in 12px weight 500 below sizes, centered. 20px internal padding. 4-column grid with 30px gap between cards.
Size Selector
Inline size picker on product cardsHorizontal row of size codes (XXS through XXL) in 10px weight 500 uppercase, 0.039em tracking, 4-5px gaps between codes. Default state: Pewter (#888888). Active/selected: Obsidian (#000000) with underline. No dropdown — all sizes visible inline.
Collection Banner
Section divider/collection promo blockFull-width Vellum Cream (#f7f5e8) background band. Collection title in 33px weight 700 uppercase, 0.053em tracking, centered. 'ÉPUISÉ' (sold out) state shown as white pill badge with 50px radius overlaying the product image, 12px weight 500 uppercase, 0.047em tracking.
ÉPUISÉ Sold-Out Badge
Status indicator for unavailable productsWhite background (#ffffff), black text in 12px weight 500 uppercase, 50px border-radius pill, centered over the product image. 20px horizontal / 10px vertical padding. High-contrast pill on top of product photography.
Newsletter Modal
Email capture overlayWhite background card, no border, no shadow. 1px hairline (#000000) divider between header and body. 'VISIONNAIRE CLUB®' header in 14px weight 700 uppercase, Dahlen Rust (#b94e3a). 'ABONNEZ-VOUS À NOTRE NEWSLETTER' in 18px weight 500 uppercase, black. Email input: 1px #000000 bottom border only, 15px horizontal padding, no visible fill. 'VALIDER' link in 12px weight 500 uppercase as a text action, black, underlined on hover. Close (×) icon top-right in 14px.
Cookie Consent Bar
Bottom-of-page legal noticeFull-width black (#000000) bar, white text at 11px weight 500, 0.033em tracking. Single line of disclaimer text, left-aligned. No visible accept/dismiss button in the data — text-only compliance strip.
Product Image Thumbnail
Visual element within product card15px border-radius on the product photograph. No border, no shadow, no overlay. Image fills the card width. Square or 4:5 aspect ratio for garment-on-white photography. Background of photo is pure white or neutral grey — no lifestyle context within the grid.
Surfaces & elevation
Level 0
Bone Canvas
#ffffffBase page background and product grid surface
Level 1
Vellum Panel
#f7f5e8Editorial color-block panels — hero, collection banners, newsletter module
Level 2
Obsidian Field
#000000Inverted sections and CTA button fills
No shadows. The system is deliberately flat — depth is achieved through solid color-block alternation (white → cream → black) and hairline 1px borders, never through drop-shadow elevation. This is a deliberate editorial-print choice: the page should look like ink on paper, not like a skeuomorphic UI.
Layout & imagery
Layout
Full-bleed sections that alternate between photography and flat colour blocks. The hero is a hard 50/50 vertical split: photo left, solid cream right. Below the hero, sections flow seamlessly with 30-35px vertical gaps. The product grid is a strict 4-column layout with 20px internal card padding and 30px inter-card gaps — dense and uniform, prioritising catalogue volume. Navigation is a single horizontal bar with centered links. No sidebar, no mega-menu, no sticky elements beyond the top nav. The page reads top-to-bottom as: marquee → nav → split hero → product grid (row 1) → product grid (row 2) → repeating sections. Max-width 1400px for the product grid; hero and marquee are full-bleed.
Imagery
Product photography is the dominant visual element and is treated with editorial precision: garments photographed on a clean white or light-grey background, no models in the grid view (models appear only in the hero), no lifestyle context, no props. The hero uses a single full-bleed lifestyle shot (model in interior, natural light, slightly desaturated). Graphic prints on garments (camo, leopard, illustrated artwork) provide the only colour within the product grid. Imagery treatment: sharp, flat, catalogue-grade — the object IS the hero, not the setting. No overlays, no duotone treatments, no decorative graphics. The right half of the hero is a pure flat colour block — no texture, no pattern, no gradient.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #ffffff - cream panel: #f7f5e8 - border: #000000 (1px hairline) - muted text: #888888 - accent (wordmark only): #b94e3a - primary action: no distinct CTA color **3-5 Example Component Prompts** 1. **Product Grid Card**: White background, no border, no shadow. Product image with 15px border-radius, square aspect. Below: product name centered in PP Neue Montreal 12px weight 500 uppercase, letter-spacing 0.56px, #000000. Size row (XXS XS S M L XL XXL) in 10px weight 500 uppercase, #888888, 5px gaps, active size in #000000 with underline. Price in 12px weight 500 #000000 below. 20px internal padding. 2. **VOIR Ghost Button**: Transparent background, 1px #000000 border, 50px border-radius. Text 'VOIR' in PP Neue Montreal 14px weight 500 uppercase, letter-spacing 0.81px, #000000. Padding 10px vertical / 20px horizontal. Hover: fill #000000, text #ffffff. 3. **Split Editorial Hero**: 50/50 grid, full-bleed. Left: lifestyle photograph. Right: #f7f5e8 solid background. Centered text stack: 'VISIONNAIRE®' in 21px weight 500 uppercase #000000, 'DAHLEN' in 45px weight 700 #b94e3a, 'ART CLUB' in 12px weight 500 #000000. VOIR ghost button bottom-left of right panel. 4. **ÉPUISÉ Badge**: White background #ffffff, 50px border-radius. Text 'ÉPUISÉ' in PP Neue Montreal 12px weight 500 uppercase, letter-spacing 0.56px, #000000. Padding 10px vertical / 20px horizontal. Positioned centered over product image. 5. **Announcement Marquee**: Full-width #000000 background, 2px vertical padding. Repeating text in PP Neue Montreal 12px weight 500 uppercase, letter-spacing 0.28px, #ffffff, CSS marquee scroll animation.
Similar brands
Represent CLO
Same black/white monochrome product grid with pill-shaped CTAs and uppercase tracked labels in a single sans-serif
KITH
Editorial fashion layout with alternating white and cream sections, pill buttons, and catalogue-dense product grids
Stüssy
Streetwear brand using ultra-minimal chrome, uppercase tracked nav, and a product-first grid with no decorative UI
Aimé Leon Dore
Fashion-editorial site with cream and white tonal panels, pill buttons, and dense uniform product grids
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
