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

# VEJA · Design System

> Quiet monochrome framing, vivid everyday stories.

**Theme:** light · **Industry:** fashion · **Source:** https://www.veja-store.com/fr_fr/ · **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._

VEJA’s storefront pairs a restrained monochrome interface with expansive lifestyle photography and clean product imagery. Editorial storytelling about materials and production sits alongside clear category navigation and shoppable sneaker selections.

## North star

Keep the interface visually quiet so authentic campaign and product photography carries the brand story.

## Overview

The page uses a white canvas and near-black typography to keep attention on photography rather than decorative interface styling. Black anchors the logo, navigation, headings, and footer text; muted charcoal supports secondary copy, while gray appears in restrained form controls and hairlines. Pale gray is reserved for product-card backgrounds. Helvetica carries the entire hierarchy: uppercase navigation, labels, and headings give the storefront a direct editorial voice, balanced by sentence-case body copy. The layout alternates between full-bleed campaign imagery, compact category tiles, three-column product cards, and content-led brand storytelling. White space and thin separators distinguish blocks without relying on shadows or ornamental containers. Photography supplies the page’s changing palette—earthy footwear and natural settings, workshop scenes, and people in motion—while the interface stays consistent and neutral. The result feels practical and fashion-led, with shopping paths integrated into a story about responsible production.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas and clean backing for navigation, product areas, newsletter, and footer. |
| Logo Black | `#000000` | `--color-logo-black` | brand | Logo ground, strong headings, primary navigation, icons, and high-contrast text and rules. |
| Soft Charcoal | `#212529` | `--color-soft-charcoal` | neutral | Secondary navigation and supporting footer or content text, softer than pure black. |
| Quiet Gray | `#888888` | `--color-quiet-gray` | semantic | Muted footer copy and understated newsletter button text, input details, and borders. |
| Mist Surface | `#f4f4f6` | `--color-mist-surface` | surface | Pale background for product cards; keep it limited to product presentation. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f4f4f6` (Mist Surface) · `--color-text` → `#000000` (Logo Black) · `--color-text-muted` → `#212529` (Soft Charcoal) · `--color-text-subtle` → `#888888` (Quiet Gray) · `--color-border` → `#888888` (Quiet Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f4f4f6` | 19.12:1 | AAA |
| `#212529` | `#ffffff` | 15.43:1 | AAA |
| `#212529` | `#f4f4f6` | 14.04:1 | AAA |
| `#888888` | `#ffffff` | 3.54:1 | AA-large |
| `#888888` | `#f4f4f6` | 3.23:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica | `--font-body` | system | 400, 700 | Site-wide font for navigation, headings, body text, labels, links, and controls. | Arial |

- **Helvetica:** Use regular and bold weights; uppercase navigation, headings, captions, and buttons. Body copy stays sentence case.

### Type scale — Custom (ratio ≈ 1.936, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 700 | 1.2 | 0 | uppercase | Helvetica | Large uppercase campaign or editorial display headings. |
| h1 | 30px | 700 | 1.15 | 0 | uppercase | Helvetica | Primary uppercase section headings such as product and project titles. |
| body | 16px | 400 | 1.88 | 0 | — | Helvetica | Descriptive brand, sustainability, and footer copy. |
| caption | 13px | 400 | 1.15 | 0 | uppercase | Helvetica | Small uppercase product labels and compact metadata. |
| button | 16px | 400 | 1.15 | 0 | uppercase | Helvetica | Uppercase action labels, including newsletter sign-up. |
| nav | 14px | 400 | 1.15 | 0 | uppercase | Helvetica | Compact uppercase category and utility navigation. |
| link | 16px | 400 | 1.15 | 0 | — | Helvetica | Product, editorial, and footer links in regular case. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 5, 8, 10, 20, 40, 50 px.
- Section rhythm 50px · element gap 5px · card padding — · max content width 1400px.

Use a wide, responsive storefront with a measured desktop maximum content width of 1400px. The header is a single horizontal band with the logo, evenly distributed category links, and utility icons. The page rhythm alternates full-width campaign imagery with tiled category and product collections, then returns to editorial stories, newsletter, social imagery, and a multi-column footer. Product and category areas use clear columns; headings are left-aligned or centered according to section purpose. Spacing feels comfortable, with distinct section breaks and little ornamental padding.

## Shape & elevation

- Radius: button `5px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

The interface is predominantly flat: there are no measured shadows or gradients. Separate product cards and footer columns with subtle gray or black hairlines where useful, while image blocks provide their own depth and contrast. Keep corners square across cards and layout elements; the newsletter sign-up control is the measured exception, with a small rounded outline.

## Imagery

Use documentary-style fashion and product photography, not illustrations or 3D. Hero and lookbook images can run edge to edge; category tiles show people wearing the products, while product cards isolate sneakers against pale neutral backdrops. Favor natural light, real locations, workshop and production details, and candid movement. Keep overlays limited to legible white labels on imagery.

## Components

### Global navigation

White horizontal header with black VEJA mark, uppercase category links, and compact search, account, and bag icons.

### Campaign hero

Full-bleed lifestyle photograph with minimal interface overlay and small carousel indicators.

### Category tiles

Multi-column fashion photographs with centered white uppercase category labels.

### Product cards

Three-column sneaker display on #f4f4f6, followed by small uppercase product names and prices.

### Editorial story

Large project and lookbook photography paired with centered white display text or compact supporting copy.

### Newsletter form

Minimal email input and outlined sign-up button; gray text and border keep the form understated.

### Footer navigation

Dense multi-column help, information, project, and social links, followed by payment marks and legal details.

### Measured component styles

- **Primary button** (“SʼINSCRIRE”): transparent background · text #888888 · border 1px solid #888888 · radius 5px · padding 5px 35px · 400 18px Helvetica · uppercase
- **Link** (“HOMME”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Helvetica
- **Input**: transparent background · text #000000 · radius 0px · padding 0px · 400 16px Helvetica
- **Card**: background #f4f4f6 · text #000000 · radius 0px · padding 0px · 400 16px Helvetica
- **Navigation item** (“HOMME FEMME ENFANT RUNNING ACCESSOIRES V”): transparent background · text #212529 · radius 0px · padding 0px · 400 16px Helvetica

## Do

- Keep page chrome white, black, and restrained gray.
- Let strong photography dominate the first viewport.
- Use Helvetica or a close neutral sans-serif throughout.
- Set navigation and display labels in uppercase.
- Keep product imagery clean and product names compact.
- Separate sections with whitespace or subtle hairlines.

## Don't

- Do not add gradients or decorative shadows.
- Do not introduce bright interface accent colors.
- Do not place dense text over campaign imagery.
- Do not use rounded cards or pill-shaped controls.
- Do not make the navigation visually heavier than the imagery.
- Do not treat photographic colors as interface palette colors.

## Agent prompt

Build a responsive VEJA-style fashion storefront page with a quiet, image-led editorial feel. Use Gallery White (#ffffff) as the main canvas, Logo Black (#000000) for strong text and navigation, Soft Charcoal (#212529) for secondary copy, Quiet Gray (#888888) for muted details and outlined controls, and Mist Surface (#f4f4f6) only behind product cards. Use Helvetica or Arial, with uppercase navigation and headings and restrained regular-weight body copy. Create a compact horizontal header, large edge-to-edge lifestyle hero, category tiles, clean sneaker product cards, editorial story blocks, newsletter signup, and structured footer. Favor real, natural-looking fashion and production photography. Keep surfaces flat, corners square except for a subtly rounded signup button, and avoid gradients, shadows, and unnecessary decorative UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign image beneath the header, with carousel controls. | campaign carousel, slide indicators | edge-to-edge photography, minimal controls |
| 2 | category-nav | Multi-column image tiles with centered labels and carousel navigation. | shop by category, carousel | full-image tiles, white uppercase labels |
| 3 | product-grid | Left-aligned heading above three product columns. | browse new arrivals, view product details | pale card backgrounds, compact product labels |
| 4 | feature-split | Single full-width forest photograph with centered title. | explore brand project | full-bleed image, centered white heading |
| 5 | feature-grid | Introductory copy above a multi-column carousel of production and impact images. | learn about sourcing, browse story cards | uppercase statement, image-led editorial cards |
| 6 | gallery | Full-width lookbook image followed by a gallery of linked collections. | browse lookbooks, open collection stories | large editorial photography, minimal white title |
| 7 | newsletter | Compact single-row form with label, email input, and outlined submit button. | enter email, subscribe | thin input rules, muted outlined button |
| 8 | gallery | Section title above a four-column strip of social photographs. | browse social posts, follow brand | square image tiles, compact gallery |
| 9 | footer | Multi-column link groups beneath a delivery and returns message. | find customer support, browse brand resources | column dividers, small muted links |
| 10 | footer | Payment marks above a final row of brand copy and legal links. | review payment methods, open legal policies | payment icon row, small-print text |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--scrollbar-border-radius: 1rem;
```

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