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

# Franco Maria Ricci Editore · Design System

> Quiet editorial elegance for art and literature

**Theme:** light · **Industry:** ecommerce · **Source:** https://www.francomariaricci.com/en · **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._

An art-book publisher’s homepage pairs restrained editorial typography with vivid images of books, art, and archival spaces. Alternating gallery-like product grids and spacious story panels make the books themselves the visual focus.

## North star

Let the artwork and book covers carry the color; keep the surrounding typography, surfaces, and grid quiet and precise.

## Overview

The page uses a restrained palette of black, white, pale gray, and muted gold, while the opening feature introduces a blue-gray field that belongs to the featured artwork rather than the core brand system. Bodoni’s high-contrast serif gives headings, descriptions, and much of the navigation a literary, finely crafted voice; Arial is reserved for uppercase, bold action links. The structure moves between full-width image-led stories, light-gray product collections, and white editorial panels. Product covers sit centered in evenly divided grids, while paired image-and-copy sections balance imagery with generous breathing room. The large opening feature gives a book cover and its illustrated backdrop room to dominate. Hairline black dividers define product cells, but the design avoids decorative shadows and rounded UI. Gold is used sparingly for selected headings and details, keeping the overall impression monochrome and gallery-like.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Printer’s Ink | `#000000` | `--color-printer-s-ink` | neutral | Primary text, navigation, footer, and thin dividers; also anchors the dark magazine feature. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas and open editorial panels; also supports white text links on dark imagery. |
| Paper Gray | `#f6f6f6` | `--color-paper-gray` | surface | Pale band behind release tabs and the three-column selection grid. |
| Silver Field | `#b2b2b2` | `--color-silver-field` | surface | Opening hero’s text-side background; a subdued field framing the featured book imagery. |
| Antique Gold | `#bc9c5c` | `--color-antique-gold` | accent | Selective editorial emphasis in headings, links, and details, including titles on white. |
| Soft Black | `#0a0a0a` | `--color-soft-black` | semantic | Near-black card surface for the magazine feature; distinct from the site’s pure-black text. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f6f6f6` (Paper Gray) · `--color-surface-2` → `#b2b2b2` (Silver Field) · `--color-surface-3` → `#000000` (Printer’s Ink) · `--color-surface-4` → `#0a0a0a` (Soft Black) · `--color-text` → `#000000` (Printer’s Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#000000` (Printer’s Ink) · `--color-accent` → `#bc9c5c` (Antique Gold)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f6f6f6` | 19.43:1 | AAA |
| `#000000` | `#b2b2b2` | 9.9:1 | AAA |
| `#ffffff` | `#f6f6f6` | 1.08:1 | fail |
| `#ffffff` | `#b2b2b2` | 2.12:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#bc9c5c` | `#ffffff` | 2.61:1 | fail |
| `#bc9c5c` | `#f6f6f6` | 2.41:1 | fail |
| `#bc9c5c` | `#b2b2b2` | 1.23:1 | fail |
| `#bc9c5c` | `#000000` | 8.05:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| BodoniSvntytwoITCStd-Book | `--font-body` | webfont | 400 | Primary editorial face for headings, body copy, captions, navigation, and button labels. | Bodoni Moda |
| Arial | `--font-arial` | system | 400, 700 | Bold uppercase action and discovery links. | Arial |
| BodoniSvntytwoITCStd-BookIt | `--font-bodonisvntytwoitcstd-bookit` | webfont | 400 | Small italic editorial accents and supporting text. | Bodoni Moda |

- **BodoniSvntytwoITCStd-Book:** Regular weight, untracked and sentence case; lends literary contrast without relying on bold.
- **Arial:** Bold, uppercase links provide a compact, functional contrast to the serif editorial voice.
- **BodoniSvntytwoITCStd-BookIt:** Use the italic style sparingly for refined emphasis; measured as regular weight.

### Type scale — Perfect Fifth (ratio ≈ 1.528, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 42px | 400 | 1.25 | 0 | — | BodoniSvntytwoITCStd-Book | Large serif title for the featured book or primary editorial story. |
| h2 | 22px | 400 | 1.25 | 0 | — | BodoniSvntytwoITCStd-Book | Serif titles for section introductions and editorial panels. |
| body | 18px | 400 | 1.25 | 0 | — | BodoniSvntytwoITCStd-Book | Serif descriptions accompanying books and brand stories. |
| caption | 16px | 400 | 1.25 | 0 | — | BodoniSvntytwoITCStd-Book | Small serif supporting copy and product details. |
| button | 14px | 400 | 1.25 | 0 | — | BodoniSvntytwoITCStd-Book | Serif labels on understated text-only controls. |
| nav | 14px | 400 | 1.25 | 0 | — | BodoniSvntytwoITCStd-Book | Serif navigation and utility labels. |
| link | 14px | 700 | 1.25 | 0 | uppercase | Arial | Bold uppercase Arial for order and discovery actions. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 8, 16, 20, 32, 40, 48, 64, 80 px.
- Section rhythm 40px · element gap 8px · card padding 200px · max content width 1360px.

The page uses full-width horizontal bands, with a generous measured maximum content width of 1360px. The hero pairs a left text panel with a dominant book image; later sections alternate full-bleed visual stories, centered headings, and three-column product displays. Selection grids use evenly divided cells with fine black rules. Editorial split panels keep text and imagery balanced rather than crowded. The overall density is compact in product areas but spacious within story panels, with section gaps and element spacing drawn from the measured 8px-based scale.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat, with no measured shadows or decorative gradients. Thin black rules separate product-grid cells, and changes in background tone define section boundaries. Layering comes from the imagery itself: the featured book appears against its illustrated scene, while cover photography supplies depth without adding card-like UI effects.

## Imagery

Large, carefully composed photographs and illustrations show book covers, artwork, archival collections, and the publisher’s history. The hero pairs a prominent physical book cover with a blue-toned illustrated scene; these hues are part of the featured artwork, not a general brand palette. Product covers are centered against quiet light backgrounds, while editorial stories use paired image-and-text panels. A monochrome archival portrait and a dark rare-editions image add tonal variety.

## Components

### Featured book hero

Split composition with a text panel, serif title and copy, bold uppercase order link, and a large illustrated book-cover scene.

### Release selector

Centered release-category labels sit above a pale-gray product band, introducing a small selection of featured titles.

### Product grid

Three-column book-cover gallery on #f6f6f6, separated by fine black hairlines and framed with minimal extra UI.

### Magazine feature

Book imagery pairs with a near-black text panel, white serif copy, and a compact uppercase discovery link.

### Editorial story split

A white text panel with centered serif copy and a single strong image presents the literature series or publisher history.

### Newsletter and footer

A spacious white footer combines publisher identity, compact link columns, language controls, and a simple email field.

### Measured component styles

- **Primary button** (“Apri carrello”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px BodoniSvntytwoITCStd-Book
- **Link** (“{ ORDER NOW }”): transparent background · text #000000 · radius 0px · padding 0px · 700 14px Arial · uppercase
- **Input**: transparent background · text #000000 · radius 0px · padding 8px 0px · 400 14px BodoniSvntytwoITCStd-Book
- **Card** (“"The most beautiful magazine in the worl”): background #0a0a0a · text #000000 · radius 0px · padding 80px 0px 720px 0px · 400 16px BodoniSvntytwoITCStd-Book
- **Navigation item** (“Resellers”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px BodoniSvntytwoITCStd-Book

## Do

- Use Bodoni-style serif typography as the dominant voice.
- Reserve bold uppercase Arial for short action links.
- Keep product covers centered in quiet, divided grids.
- Alternate white and pale-gray bands to organize collections.
- Let featured artwork supply image-specific color.
- Use Antique Gold sparingly for editorial emphasis.

## Don't

- Do not add rounded cards or pill-shaped controls.
- Do not apply the hero artwork’s blue tones across the whole interface.
- Do not add drop shadows or gradients to flat sections.
- Do not replace thin grid rules with heavy borders.
- Do not make every heading bold or uppercase.
- Do not crowd book imagery with extra interface decoration.

## Agent prompt

Build a new art-book publisher page with the restrained editorial character of Franco Maria Ricci. Use Printer’s Ink (#000000) for primary text and hairlines, Gallery White (#ffffff) for the main canvas, and Paper Gray (#f6f6f6) for collection bands. Reserve Antique Gold (#bc9c5c) for sparse editorial emphasis; treat Silver Field (#b2b2b2) as a contextual feature surface, not a universal brand color. Set most copy in a Bodoni-style serif, with bold uppercase sans-serif only for short action links. Arrange content as full-width image-led stories, calm split panels, and centered product grids with thin dividers. Keep surfaces flat and square, omit shadows, and let the book covers and artwork provide richness. Preserve generous breathing room around editorial text and products.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Split hero with left text panel and right full-height illustrated book feature. | carousel pagination, order link | serif title, muted gray panel, large cover image |
| 2 | product-grid | Pale-gray section with centered category labels and a row of three product covers. | category switching, browse titles | centered labels, three product cells, hairline dividers |
| 3 | feature-split | Book image and dark copy panel arranged side by side. | magazine discovery link | near-black panel, white serif text, large cover image |
| 4 | product-grid | Centered section heading above a three-column, two-row product gallery. | browse selected titles | pale-gray band, centered covers, thin black grid rules |
| 5 | feature-split | White text panel paired with a full-height image of collected books. | series discovery link | serif heading, centered copy, collection imagery |
| 6 | feature-split | Archival portrait and white biography panel in a balanced split. | publisher story link | monochrome portrait, gold-accent heading, serif biography |
| 7 | gallery | Wide dark photographic banner with text and collection link over the image. | collection discovery link | full-width image, dark overlay character, small light text |
| 8 | footer | White footer with centered publisher identity and three-column information area. | newsletter signup, language selection, utility navigation | publisher mark, compact link columns, simple email input |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

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