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

# AVNIER · Design System

> Monochrome workwear, framed like a film still

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

AVNIER pairs functional clothing with cinematic, high-contrast imagery and a restrained monochrome interface. The homepage moves between immersive campaign panels, concise brand copy, category navigation and a tightly organized product presentation.

## North star

Keep the interface stark and functional, letting cinematic photography provide the drama while typography and rules stay precise.

## Overview

The page is anchored by a white canvas, but its first impression is a large, nearly black photographic hero with white navigation and copy layered over campaign imagery. Black and white do most of the interface work: text, links, controls and section contrast remain crisp, while the measured light gray canvas appears behind product imagery. Space Mono supplies the utilitarian voice for uppercase navigation, labels and compact descriptions; the custom avnier-font gives headings a more distinctive, condensed display presence. Layout alternates between broad image-led panels and quieter white sections, with generous gaps around the brand introduction and category list. Product images are arranged in a simple, evenly distributed grid, and outlined category dividers keep browsing legible without adding decorative chrome. Thin dark rules and square-edged controls preserve a flat, technical feel. Campaign photography can introduce richer colors, but those belong to the images rather than the core interface palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, quiet content sections, and the foreground text and links over dark campaign imagery. |
| Workwear Black | `#000000` | `--color-workwear-black` | brand | Primary text, dark photographic hero treatment, inverse sections, and the high-contrast primary control. |
| Studio Gray | `#e5e5e5` | `--color-studio-gray` | neutral | Measured light-gray canvas tone, visible behind product imagery and in muted image-led bands. |
| Film Silver | `#999999` | `--color-film-silver` | neutral | Appears in measured gradient data and grayscale image details; secondary to the page’s black-and-white identity. |
| Graphite Rule | `#383838` | `--color-graphite-rule` | semantic | Section and interface borders, providing restrained dark dividers rather than prominent decorative framing. |

### Semantic aliases

`--color-canvas` → `#e5e5e5` (Studio Gray) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#000000` (Workwear Black) · `--color-text` → `#000000` (Workwear Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#383838` (Graphite Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#e5e5e5` | 16.67:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ffffff` | `#e5e5e5` | 1.26:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 99%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Space Mono | `--font-mono` | webfont | 400 | Navigation, body copy, captions, buttons, links, and utility labels | Space Mono |
| avnier-font | `--font-display` | webfont | 500 | Display headings and prominent campaign or brand titles | Oswald |

- **Space Mono:** Predominantly uppercase with compact, technical rhythm; button and link text use measured positive tracking.
- **avnier-font:** Custom display face used for uppercase h1 and h2 and title case h3; preserve its distinctive condensed feel.

### Type scale — Golden Ratio (ratio ≈ 1.617, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 55px | 500 | 1.18 | 0 | uppercase | avnier-font | Primary campaign headline |
| h2 | 33px | 500 | 1.3 | 0 | uppercase | avnier-font | Section and brand-story headings |
| h3 | 25px | 500 | 1.18 | 0 | — | avnier-font | Product or feature titles |
| body | 13px | 400 | normal | 0 | uppercase | Space Mono | Compact uppercase descriptive copy |
| caption | 12px | 400 | 1.25 | 0 | uppercase | Space Mono | Small uppercase image and utility labels |
| button | 15px | 400 | 1.2 | 0.067em | uppercase | Space Mono | Uppercase action labels |
| nav | 13px | 400 | normal | 0 | uppercase | Space Mono | Uppercase primary navigation |
| link | 12px | 400 | 1.4 | 0.083em | uppercase | Space Mono | Tracked uppercase browse and discovery links |
| eyebrow | 16px | 400 | normal | 0.125em | uppercase | Space Mono | Spaced uppercase section preheads |
| code | 13px | 400 | normal | 0 | uppercase | Space Mono | Compact uppercase technical or utility text |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 8, 10, 12, 13, 15, 19, 20, 22, 27, 30, 50, 80 px.
- Section rhythm 80px · element gap 8px · card padding — · max content width 1340px.

The measured content max width is 1340px, with sections arranged as broad image panels, a single-column brand introduction, category rows, and a four-column product presentation. Hero content shares the stage with full-width photography; quieter copy sections align left and leave ample surrounding white space. The 80px section gap and comfortable density create clear transitions without card-heavy composition. Thin category separators organize browsing, while product thumbnails sit in a restrained, evenly spaced grid. The page ends with a compact multi-column utility footer.

## Shape & elevation

- Shadow `hairline` (button): `rgb(0, 0, 0) 0px 0px 0px 1px`
- Shadow `hairline-2` (input): `rgba(0, 0, 0, 0.55) 0px 0px 0px 1px`
- Motion: standard transition `0.25s ease` on interactive elements.

The interface is predominantly flat, with no measured card shadow system or rounded component language. Use thin dark rules to separate category rows and restrained outlines for controls. Hero depth comes from photography and a measured black-to-transparent overlay, not stacked panels or interface shadows.

## Imagery

Campaign and lifestyle photography carries the visual drama, often cropped as large, dark panels with white copy layered over the image. The imagery spans monochrome workwear close-ups and colorful collaboration scenes; richer hues are photographic, not interface accents. Product photographs are isolated against pale backgrounds and presented in a regular grid. Avoid illustrations or decorative graphics that compete with the clothing and campaign frames.

## Components

### Campaign hero

Large photographic panel with compact uppercase navigation, centered brand mark, white campaign copy, and a discovery link.

### Announcement strip

White horizontal service ticker with uppercase shipping, payment, and returns messages separated by small symbols.

### Brand introduction

Left-aligned uppercase heading, compact mono paragraph, and a small link on a spacious white section.

### Category rows

Large uppercase category links divided by thin dark horizontal rules, with a simple arrow aligned at the far edge.

### Product grid

Evenly distributed product cutouts on a pale gray field, with minimal surrounding interface decoration.

### Editorial split

Two side-by-side photographic story panels, each with a small uppercase label and discovery link.

### Utility footer

Dark, multi-column navigation and service area with compact mono text, newsletter field, and social links.

### Measured component styles

- **Primary button** (“IGNORER ET PASSER AU CONTENU”): background #000000 · text #ffffff · border 1px solid · radius 0px · padding 9px 30px 11px 30px · 400 15px Space Mono · uppercase · shadow rgb(0, 0, 0) 0px 0px 0px 1px
- **Link** (“TOUS LES PRODUITS”): transparent background · text #ffffff · radius 0px · padding 10px 0px · 400 12px Space Mono · uppercase
- **Input** (“--- Afghanistan Albania Algeria Andorra ”): transparent background · text #ffffff · radius 0px · padding 0px 10px · 400 12px Space Mono · uppercase
- **Navigation item** (“SHOP MARQUE SECONDE MAIN ARCHIVE SALE”): transparent background · text #000000 · radius 0px · padding 0px · 400 13px Space Mono

## Do

- Use black and white as the interface’s main contrast.
- Let campaign photography dominate the hero.
- Keep utility copy uppercase and compact.
- Separate categories with thin, dark rules.
- Leave generous whitespace around editorial copy.
- Use square-edged, restrained controls.

## Don't

- Do not introduce unmeasured accent colors.
- Do not round cards or buttons.
- Do not add ornamental gradients to the interface.
- Do not crowd product images with extra labels.
- Do not use oversized paragraphs or verbose navigation.
- Do not mistake colors inside campaign photos for brand UI colors.

## Agent prompt

Build a new AVNIER-style fashion page with a stark, editorial workwear mood. Use Gallery White (#ffffff) for open content areas and Workwear Black (#000000) for primary type, inverse bands, and high-contrast controls; reserve Studio Gray (#e5e5e5) for subdued product-image backing. Use Graphite Rule (#383838) sparingly for dividers, and treat Film Silver (#999999) as image or gradient detail rather than a brand accent. Set navigation and utility copy in Space Mono, uppercase and compact; use a distinctive condensed display face for prominent headings. Structure the page around cinematic full-width campaign photography, spacious brand copy, ruled category links, and a clean product grid. Keep layout flat, square-edged, and generous in section spacing. Use photographic color only within imagery, not as interface decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Large campaign carousel with image-led panels, top navigation, and overlay copy. | Campaign carousel, Discovery link, Slide index | White uppercase navigation, Dark photo overlay, Centered wordmark |
| 2 | other | Single-column, left-aligned copy on a spacious white field. | Brand story, Learn-more link | Uppercase display heading, Compact mono paragraph |
| 3 | category-nav | Stacked full-width category rows with text aligned left and arrows at right. | Direct category browsing, Item counts | Large uppercase labels, Thin horizontal rules, Outline arrow |
| 4 | product-grid | Four-column product presentation with evenly distributed cutout images. | Product discovery, Image-led browsing | Pale gray backing, Minimal product framing |
| 5 | cta | Wide, graphic shopping banner with oversized outlined lettering and an arrow. | Shop-through action | Oversized outline typography, Product detail image |
| 6 | feature-split | Two equal editorial image panels with small overlay labels. | Explore brand stories, Separate story links | Side-by-side photography, Small uppercase overlays |
| 7 | footer | Service benefits above a dense, multi-column footer with newsletter form. | Service information, Newsletter signup, Footer navigation | Dark footer band, Compact mono labels, Small utility icons |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--font-body-family: 'Space Mono', monospace;
--font-body-style: normal;
--font-body-weight: normal;
--font-heading-family: 'avnier-font';
--font-heading-style: normal;
--font-heading-weight: 400;
--font-body-scale: 1.0;
--font-heading-scale: 1.0;
--color-base-text: 0, 0, 0;
--color-base-background-1: 255, 255, 255;
--color-base-background-2: 243, 243, 243;
--color-base-solid-button-labels: 255, 255, 255;
--color-base-outline-button-labels: 0, 0, 0;
--color-base-accent-1: 0, 0, 0;
--color-base-accent-2: 0, 0, 0;
--payment-terms-background-color: #FFFFFF;
--gradient-base-background-1: #FFFFFF;
--gradient-base-background-2: #f3f3f3;
--gradient-base-accent-1: #000000;
--gradient-base-accent-2: #000000;
--color-foreground: 0, 0, 0;
--color-background: 255, 255, 255;
--gradient-background: #FFFFFF;
--color-link: 0, 0, 0;
--color-button: 0, 0, 0;
--color-button-text: 255, 255, 255;
--alpha-button-background: 1;
--alpha-button-border: 1;
--color-badge-background: 255, 255, 255;
--color-badge-border: 0, 0, 0;
--alpha-badge-border: .1;
--color-card-hover: 0, 0, 0;
--color-icon: rgb(0, 0, 0);
--duration-short: .1s;
--duration-default: .2s;
--duration-long: .5s;
--ll-error-color: #ff453a;
--ll-title-color: #000;
--ll-desc-color: #767676;
```

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