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

# Fidèle Editions · Design System

> Art publishing with vivid blue, quiet space, and tactile print.

**Theme:** light · **Industry:** media · **Source:** https://fidele-editions.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._

Fidèle Editions combines an independent publishing catalogue with the voice of a Parisian Risograph studio. A warm cream canvas, vivid blue typography, and documentary product imagery make the homepage feel like a carefully composed print journal.

## North star

Let vivid blue editorial text and tactile print imagery breathe against a quiet cream canvas, using rules—not boxes—to organize the page.

## Overview

The page is built around a warm, nearly uniform cream canvas (#f8f7ef), which lets the saturated blue (#1664eb) carry nearly all interface text, headings, and navigational emphasis. A brighter blue (#006ce5) appears on selected links, while pale gray (#e2e2df) sits behind product photography in flat catalogue tiles. BaselGrotesk Book provides a consistent, clean editorial voice; larger headings create contrast without introducing a competing palette. The layout alternates wide product rows, asymmetrical image-and-copy features, short editorial columns, and full-bleed studio imagery. Thin blue rules mark section transitions rather than enclosing every block. Photographs remain tactile and varied—books, apparel, printmaking, and studio scenes—with no heavy decorative framing. Keep the spacing generous enough to separate editorial beats, while retaining a compact, information-rich catalogue feel.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Press Blue | `#1664eb` | `--color-press-blue` | brand | Primary text, headings, product names, navigation, and the vivid brand mark. |
| Paper Cream | `#f8f7ef` | `--color-paper-cream` | neutral | Dominant page canvas and background behind nearly every editorial section. |
| Link Blue | `#006ce5` | `--color-link-blue` | accent | Secondary emphasis for selected links such as interview calls to action. |
| Catalogue Gray | `#e2e2df` | `--color-catalogue-gray` | surface | Flat backing behind product-image cards; not a general page band. |
| Image Ivory | `#fdf9f9` | `--color-image-ivory` | semantic | Sparse measured text color with no defining interface role; avoid using as a core brand color. |

### Semantic aliases

`--color-canvas` → `#f8f7ef` (Paper Cream) · `--color-surface` → `#e2e2df` (Catalogue Gray) · `--color-text` → `#1664eb` (Press Blue) · `--color-accent` → `#1664eb` (Press Blue) · `--color-accent-2` → `#006ce5` (Link Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1664eb` | `#f8f7ef` | 4.82:1 | AA |
| `#1664eb` | `#e2e2df` | 3.99:1 | AA-large |
| `#1664eb` | `#f8f7ef` | 4.82:1 | AA |
| `#1664eb` | `#e2e2df` | 3.99:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| BaselGrotesk Book | `--font-body` | webfont | 400 | Main interface and editorial font for navigation, body copy, links, and headings. | Inter |
| BaselGrotesk Regular | `--font-baselgrotesk-regular` | webfont | 400 | Secondary regular styling, including selected editorial links and product-card text. | Inter |
| BaselGrotesk Bold | `--font-baselgrotesk-bold` | webfont | 400, 700 | Occasional stronger emphasis in the brand and editorial hierarchy. | Inter |

- **BaselGrotesk Book:** Use a light, unembellished sans voice; measured text is predominantly regular weight with natural case.
- **BaselGrotesk Regular:** Use sparingly for emphasis within the same sans family; avoid heavy bold styling.
- **BaselGrotesk Bold:** Rare relative to the Book cut; reserve heavier weight for brief emphasis, not whole sections.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 62px | 400 | 0.92 | 0 | — | OTMagisterUnlicensedTrial Regular | Oversized expressive Fidèle wordmark near the footer. |
| h1 | 41px | 400 | 0.92 | 0 | — | BaselGrotesk Book | Primary page and major editorial headings. |
| h2 | 37px | 400 | 0.96 | 0 | — | BaselGrotesk Book | Section titles such as catalogue and feature headings. |
| h3 | 32px | 400 | 0.92 | 0 | — | BaselGrotesk Book | Secondary editorial headings and product-group titles. |
| h4 | 28px | 400 | 0.96 | 0 | — | BaselGrotesk Book | Smaller feature and news subheadings. |
| body | 14px | 400 | 1 | 0 | — | BaselGrotesk Book | Compact descriptions, product details, and footer information. |
| button | 24px | 400 | 1.2 | 0.067em | — | BaselGrotesk Book | Prominent actions and larger call-to-action text. |
| nav | 22px | 400 | 1.3 | 0 | — | BaselGrotesk Book | Large language selector and expanded navigation contexts. |
| link | 22px | 400 | 1 | 0 | — | BaselGrotesk Book | Editorial links and contact or catalogue links. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 5, 7, 10, 11, 12, 14, 15, 16, 19, 21, 24, 42 px.
- Section rhythm 42px · element gap 16px · card padding — · max content width 1411px.

The measured page max width is 1411px, with content aligned to a consistent outer edge and several media sections running nearly full bleed. Product showcases use multi-column rows; editorial features switch between two-column image-and-copy compositions, while news updates form paired text columns. Heading alignment varies by block, with most content left aligned and the fairs section centered. Section rhythm is measured at a 42px gap, with comfortable density and compact catalogue captions. Thin horizontal blue rules punctuate major transitions without boxing in the content.

## Shape & elevation

- Radius: xs `4px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.1s ease` on interactive elements.

The interface is visually flat: measured shadows are absent and card corners are square. Product tiles use a pale gray surface behind their images, while thin blue hairlines separate selected blocks. Keep text and imagery on the page plane; use spacing and section rules for hierarchy rather than raised cards, gradients, or layered UI chrome.

## Imagery

Photography is central: apparel and books are shown as catalogue products, while wide process images document printing and studio work. Editorial photos pair a portrait or publication image with concise copy; later image-led blocks show print color samples and shelves. Preserve the natural, documentary character and varied color of the photographs. Product backdrops may use flat pale gray, but avoid turning photographic imagery into decorative mockups.

## Components

### Site header

Compact cream header with blue navigation at left, centered Fidèle wordmark, and language, search, and bag controls at right.

### Shipping announcement

Full-width saturated blue strip with centered small white shipping message and globe symbols.

### Product catalogue tile

Square-corner pale gray image surface with blue product title, maker, and price arranged as compact text below.

### Editorial split feature

Two-column composition pairing a rectangular photograph with blue heading, brief copy, and a blue text link.

### Section rule

Thin blue horizontal line spanning the content width to distinguish major page beats.

### Studio image band

Wide documentary photograph displayed prominently with minimal framing and no surrounding card treatment.

### Footer

Cream three-column information area with utility links, large blue branding, contact details, and compact subscription fields.

### Measured component styles

- **Primary button** (“Skip to content”): background #121212 · text #ffffff · radius 0px · padding 0px 48px · 400 24px BaselGrotesk Book
- **Link** (“vincent@fidele-editions.com”): transparent background · text #1664eb · radius 0px · padding 0px · 400 22px BaselGrotesk Book
- **Input**: transparent background · text #1664eb · radius 0px · padding 24px 156.8px 24px 24px · 400 25.6px Assistant
- **Card**: background #e2e2df · radius 0px · padding 0px · 400 14px BaselGrotesk Regular
- **Navigation item** (“Shop About Journal”): transparent background · text #1564eb · radius 0px · padding 0px · 400 14px BaselGrotesk Book

## Do

- Use #f8f7ef as the dominant canvas.
- Set interface text and headings in #1664eb.
- Reserve #006ce5 for selected link emphasis.
- Use #e2e2df behind catalogue product imagery.
- Let documentary print and product photos retain their natural color.
- Separate major blocks with thin blue rules and open space.

## Don't

- Do not introduce gradients or prominent shadows.
- Do not round product cards or place every section in a box.
- Do not replace the cream canvas with stark white.
- Do not use the measured illustration colors as extra brand colors.
- Do not overuse bold weights or all-caps headings.
- Do not make catalogue details larger than editorial headings.

## Agent prompt

Build a new editorial commerce page in the Fidèle Editions visual style. Use Paper Cream (#f8f7ef) as the broad canvas and Press Blue (#1664eb) for navigation, headings, and most interface text; reserve Link Blue (#006ce5) for occasional calls to action. Use Catalogue Gray (#e2e2df) only behind product images. Set a clean BaselGrotesk-like sans voice, with restrained expressive display lettering for brand moments. Compose the page from compact product grids, asymmetric photo-and-copy features, paired editorial text blocks, and occasional full-bleed documentary imagery. Keep corners square, shadows absent, and sections mostly unboxed. Use thin blue rules and generous gaps to mark transitions. Prioritize real-looking books, apparel, printmaking, and studio photography; keep captions concise and maintain a tactile, independent-publisher character.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-grid | Introductory statement and section title above a wide, multi-column product row. | browse products, view price and maker | blue headings, gray image tiles, compact captions |
| 2 | video | Wide, single-column media spanning most of the content width. | watch studio process | large media frame, minimal surrounding chrome |
| 3 | other | Brand mark and shipping image lead into concise distribution information. | find distribution contacts, read studio introduction | split imagery, blue text, thin divider |
| 4 | feature-split | Two columns pairing an editorial portrait with a heading, description, and link. | read interview | left-aligned copy, blue link, editorial photograph |
| 5 | content-feed | Two centered text columns for fairs and the PrintWorks line. | scan updates, follow external links | paired columns, small centered headings, blue copy |
| 6 | gallery | Single full-bleed photograph across the content width. | view print samples | wide image, no card frame |
| 7 | product-grid | Section title followed by a two-column product catalogue. | browse series, compare book titles and prices | square product tiles, blue captions, gray backdrops |
| 8 | feature-split | Short news copy and link beside a tall publication photograph. | read more | asymmetric two-column layout, blue text link, large photo |
| 9 | gallery | Full-width image-led transition above the footer. | view brand imagery | full-bleed media, minimal framing |
| 10 | footer | Three-column footer with utility links, oversized wordmark, contact details, and form controls. | open legal pages, contact publisher, subscribe | cream background, blue links, large brand lettering |

## Source CSS custom properties (selected)

```css
--color-background: 255,255,255;
--gradient-background: #ffffff;
--color-foreground: 18,18,18;
--color-background-contrast: 191,191,191;
--color-shadow: 18,18,18;
--color-button: 18,18,18;
--color-button-text: 255,255,255;
--color-secondary-button: 255,255,255;
--color-secondary-button-text: 18,18,18;
--color-link: 18,18,18;
--color-badge-foreground: 18,18,18;
--color-badge-background: 255,255,255;
--color-badge-border: 18,18,18;
--payment-terms-background-color: rgb(255 255 255);
--font-body-family: Assistant, sans-serif;
--font-body-style: normal;
--font-body-weight: 400;
--font-body-weight-bold: 700;
--font-heading-family: Assistant, sans-serif;
--font-heading-style: normal;
--font-heading-weight: 400;
--font-body-scale: 1.0;
--font-heading-scale: 1.0;
--media-border-opacity: 0.05;
--media-border-width: 1px;
--media-radius: 0px;
--media-shadow-opacity: 0.0;
--media-shadow-horizontal-offset: 0px;
--media-shadow-vertical-offset: 4px;
--media-shadow-blur-radius: 5px;
--media-shadow-visible: 0;
--product-card-corner-radius: 0.0rem;
--product-card-text-alignment: left;
--product-card-border-width: 0.0rem;
--product-card-border-opacity: 0.1;
--product-card-shadow-opacity: 0.0;
--product-card-shadow-visible: 0;
--product-card-shadow-horizontal-offset: 0.0rem;
--product-card-shadow-vertical-offset: 0.4rem;
--product-card-shadow-blur-radius: 0.5rem;
```

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