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

# Bécane — Collection · Design System

> Urban fashion presented with editorial restraint

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

Bécane’s collection page pairs a pale, nearly monochrome canvas with compact navigation and bold, condensed typography. A widely spaced lineup of models turns the collection into the main visual event, while a centered manifesto closes the page.

## North star

Keep the interface nearly monochrome and let the model lineup, oversized type, and deliberate whitespace carry the collection.

## Overview

The page builds its identity from a restrained off-white canvas (#f6f6f6), near-black typography (#0a0a0a), and fine pale dividers (#e6e6e6). Small uppercase navigation and labels stay quiet, while the oversized “COLLECTION” heading and tightly stacked manifesto use the custom Eurostile Becane face to create a technical, fashion-editorial voice. The first viewport is deliberately sparse: collection metadata sits high on the left, a small collection control sits opposite, and a long row of model cutouts crosses the center with generous empty space around it. The imagery carries the only notable colour variation, coming from the garments rather than decorative UI. Product discovery is presented as a simple white strip with compact labels. The page avoids ornamental effects; hierarchy comes from scale, placement, contrast, and whitespace. Red is present in measured data but does not define the visible collection-page composition.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Road Ink | `#0a0a0a` | `--color-road-ink` | brand | Primary headings, navigation, labels, and other high-contrast text. |
| Studio Mist | `#f6f6f6` | `--color-studio-mist` | neutral | Main page canvas and broad background behind the collection imagery. |
| Signal Red | `#ff0000` | `--color-signal-red` | accent | Measured accent; not a defining visible colour in this collection-page screenshot. |
| Divider Grey | `#e6e6e6` | `--color-divider-grey` | semantic | Thin navigation and section divider rules. |
| Quiet Grey | `#b2b2b2` | `--color-quiet-grey` | neutral | Muted navigation counts and secondary interface text. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Small navigation and product-discovery surface strips against the off-white canvas. |

### Semantic aliases

`--color-canvas` → `#f6f6f6` (Studio Mist) · `--color-surface` → `#ffffff` (Paper White) · `--color-text` → `#0a0a0a` (Road Ink) · `--color-text-muted` → `#b2b2b2` (Quiet Grey) · `--color-border` → `#e6e6e6` (Divider Grey) · `--color-accent` → `#ff0000` (Signal Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0a0a0a` | `#f6f6f6` | 18.32:1 | AAA |
| `#0a0a0a` | `#ffffff` | 19.8:1 | AAA |
| `#b2b2b2` | `#f6f6f6` | 1.96:1 | fail |
| `#b2b2b2` | `#ffffff` | 2.12:1 | fail |
| `#ff0000` | `#f6f6f6` | 3.7:1 | AA-large |
| `#ff0000` | `#ffffff` | 4:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Eurostile Becane | `--font-body` | webfont | 700, 400 | All measured page text, including display headings, body statement, navigation, and eyebrow labels. | Oxanium |

- **Eurostile Becane:** Use bold uppercase display text; keep navigation and eyebrow labels small, regular-weight, uppercase, and lightly tracked.

### Type scale — Major Third (ratio ≈ 1.25, base 30px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 30px | 700 | 1.1 | 0 | uppercase | Eurostile Becane | Large uppercase brand manifesto and prominent collection messaging. |
| nav | 8px | 400 | 1.1 | 0.04em | uppercase | Eurostile Becane | Compact uppercase primary navigation, counts, and collection controls. |
| eyebrow | 8px | 400 | 1.1 | 0.04em | uppercase | Eurostile Becane | Small uppercase collection labels above larger headings. |

## Spacing & layout

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

Use a spacious, single-column composition within the measured 1400px maximum page width. Keep navigation in compact edge-aligned groups, then place collection metadata at the upper left and the collection control toward the upper right. Center a horizontal lineup of model imagery across the page, leaving substantial open canvas above and below it. The product-discovery strip anchors the lower edge of the collection block; the following manifesto becomes a narrow centered text column. Section rhythm is generous and the overall density is comfortable.

## Shape & elevation

- Radius: button `1px` · media `1px` · nav `3px` · xs `1px` · sm `3px`
- No box shadows measured: the page is flat.

The interface is almost entirely flat: there are no measured shadows or gradients. Separate content through whitespace and fine divider rules rather than cards or layered panels. Small white navigation and discovery strips sit subtly against the off-white canvas; corners are restrained and should not become a prominent styling feature.

## Imagery

Use isolated fashion-model cutouts rather than lifestyle scenes, arranged as a long horizontal lineup with consistent visual scale. The screenshot shows varied outfits and poses against the canvas, with no decorative frames or strong image backgrounds. Preserve garment colours as the page’s principal source of chromatic variation; keep imagery crisp and leave ample negative space around it.

## Components

### Compact navigation

Small uppercase Eurostile Becane links in black, with muted grey counts and a restrained white backing strip.

### Collection heading

A bold, uppercase display heading aligned to the left beneath a small collection eyebrow.

### Model lineup

A wide horizontal row of isolated model images centered on the off-white canvas.

### Product discovery strip

A compact white horizontal strip pairing a product count on the left with a discovery link on the right.

### Brand manifesto

A narrow, centered column of bold uppercase copy with tight line spacing and emphatic typographic rhythm.

### Measured component styles

- **Primary button** (“CART 00”): transparent background · text #0a0a0a · radius 0px · padding 0px · 400 8px Eurostile Becane · uppercase
- **Link** (“14 PRODUCTS DISCOVER”): transparent background · text #0a0a0a · radius 0px · padding 0px · 400 8px Eurostile Becane · uppercase
- **Navigation item** (“ALL 27 STORIES 04 CART 00”): transparent background · text #0a0a0a · radius 0px · padding 0px · 400 8px Eurostile Becane · uppercase

## Do

- Use #f6f6f6 as the dominant canvas.
- Set primary text in #0a0a0a.
- Keep navigation and labels uppercase and compact.
- Use the measured display font or a close geometric substitute.
- Give collection imagery generous surrounding whitespace.
- Let clothing supply most of the page’s colour.

## Don't

- Do not introduce gradients or prominent shadows.
- Do not turn the page into a dense product-card grid.
- Do not use decorative colour blocks as the main hierarchy.
- Do not make secondary navigation as bold as the collection heading.
- Do not add oversized rounded cards or pill controls.
- Do not treat the measured red as a dominant page colour.

## Agent prompt

Build a new fashion page in Bécane’s restrained editorial style. Use Studio Mist (#f6f6f6) as the broad canvas and Road Ink (#0a0a0a) for headings and interface text; reserve Divider Grey (#e6e6e6) for fine rules and Quiet Grey (#b2b2b2) for secondary counts. Keep navigation compact, uppercase, and unobtrusive. Use Eurostile Becane when available, with a geometric sans-serif substitute; make display statements bold, uppercase, and tightly stacked. Arrange fashion imagery in a broad, carefully spaced composition, allowing garment colours to provide visual variety. Use whitespace, alignment, and type scale for hierarchy rather than shadows, gradients, or decorative cards. A restrained Paper White (#ffffff) strip may hold compact discovery controls; Signal Red (#ff0000) is not a default dominant accent.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-showcase | Sparse single-column collection block with compact top controls, left-aligned title, centered model lineup, and lower discovery strip. | collection navigation, product count, discover link | uppercase micro-labels, bold display heading, isolated model lineup, spacious canvas |
| 2 | other | A narrow centered text column below a spacious transition, with small footer links at the section edges. | brand story, footer navigation | bold uppercase manifesto, centered text, minimal edge-aligned links |

## Source CSS custom properties (selected)

```css
--main-font-name: "Eurostile Becane";
--main-font: "Eurostile Becane","Helvetica Neue","Arial",sans-serif;
--color-off-black: #0a0a0a;
--color-medium-grey: #b2b2b2;
--color-divider: #e6e6e6;
--color-off-white: #f6f6f6;
--color-white: #fff;
--color-overlay: hsla(0,0%,96%,.8);
--color-hover: #666;
--color-main: #0a0a0a;
--color-background: #f6f6f6;
--color-inner-background: #fff;
--gap-s: 8rem;
--gap: 10rem;
--border-size: 0.5rem;
--border-radius: 3rem;
--inner-border-radius: 1rem;
```

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