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

# Dolce Vita · Design System

> Fashion imagery framed by understated editorial elegance

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

Dolce Vita pairs immersive fashion photography with restrained typography and a quiet neutral palette. The homepage uses full-width campaign imagery to lead shoppers into footwear, accessories, seasonal edits, and email signup.

## North star

Let expressive, full-bleed fashion photography lead, and keep the interface quiet with warm neutrals, black text, and editorial Baskerville accents.

## Overview

The page is built around fashion photography rather than decorative interface colour: the measured canvas is white, while warm beige bands and pale cards appear in the promotional and lower-page areas. Black anchors most text, links, and the compact subscribe button; lighter gray tones are reserved for secondary copy and fine dividers. Campaign photos supply most of the visible colour, so their browns, stone neutrals, and seasonal product tones should remain photographic rather than become interface swatches. Baskerville brings an editorial, feminine contrast to large italic campaign lines and category links, while Arimo keeps navigation, body copy, controls, and footer content crisp and practical. The layout moves from a thin announcement strip and overlaid navigation into broad, edge-to-edge image campaigns and a two-column category mosaic. Generous image areas do the visual work; simple square controls, restrained spacing, and almost no elevation keep the merchandise in focus.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, light campaign controls, navigation text over dark photography, and footer fields. |
| Velvet Ink | `#000000` | `--color-velvet-ink` | brand | Primary text and links, dark subscribe button, and thin outlined country selector. |
| Warm Sand | `#eee3db` | `--color-warm-sand` | surface | Warm neutral surface in lower-page promotional and footer areas. |
| Soft Divider | `#ebebeb` | `--color-soft-divider` | semantic | Subtle hairlines and interface borders between otherwise flat areas. |
| Smoked Taupe | `#484644` | `--color-smoked-taupe` | neutral | Muted footer copy and secondary information. |
| Linen Mist | `#f5f2ee` | `--color-linen-mist` | surface | Pale newsletter and VIP signup card background. |
| Slate Charcoal | `#4d4d4d` | `--color-slate-charcoal` | neutral | Occasional subdued footer or link text; not a dominant page colour. |
| Soft Black | `#212121` | `--color-soft-black` | neutral | Minor text colour variation in supporting copy. |
| Near Ink | `#121212` | `--color-near-ink` | neutral | Small heading and foreground details, close to the site's primary black. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#eee3db` (Warm Sand) · `--color-surface-2` → `#f5f2ee` (Linen Mist) · `--color-text` → `#000000` (Velvet Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#484644` (Smoked Taupe) · `--color-border` → `#ebebeb` (Soft Divider)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#eee3db` | 16.65:1 | AAA |
| `#000000` | `#f5f2ee` | 18.82:1 | AAA |
| `#ffffff` | `#eee3db` | 1.26:1 | fail |
| `#ffffff` | `#f5f2ee` | 1.12:1 | fail |
| `#484644` | `#ffffff` | 9.4:1 | AAA |
| `#484644` | `#eee3db` | 7.45:1 | AAA |
| `#484644` | `#f5f2ee` | 8.42:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| arimoregular | `--font-body` | webfont | 400 | Primary body, captions, navigation, and links | Arimo |
| Arimo | `--font-arimo` | webfont | 400 | Controls, buttons, and compact headings | Arimo |
| Baskerville italic | `--font-display` | webfont | 400 | Large campaign statements and editorial display text | Libre Baskerville |
| Baskerville | `--font-baskerville` | webfont | 400 | Large non-italic serif headings | Libre Baskerville |
| arimobold | `--font-arimobold` | webfont | 700 | Emphasis within sans-serif interface text | Arimo |

- **arimoregular:** Regular sans serif; measured body and link styles use airy tracking, while captions and navigation are lowercase.
- **Arimo:** Regular sans serif for practical interface text; button labels use noticeably open tracking.
- **Baskerville italic:** Use italic serif for expressive campaign lines; keep weight light and contrast with simple sans-serif controls.
- **Baskerville:** Regular serif for editorial headings, with broad letter spacing and generous line height.
- **arimobold:** Measured bold variant is sparsely used; reserve heavier sans-serif emphasis for brief utility labels.

### Type scale — Perfect Fourth (ratio ≈ 1.34, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 69px | 400 | 1.5 | 0.033em | — | Baskerville italic | Oversized italic serif campaign line over the hero photography. |
| h1 | 65px | 400 | 1.3 | 0.031em | — | Baskerville Italic | Primary editorial campaign headline, typically Baskerville italic. |
| h2 | 64.5px | 400 | 1.5 | 0.031em | — | Baskerville | Large serif statement within a seasonal feature or campaign. |
| h3 | 57.5px | 400 | 1.2 | 0.035em | — | Baskerville Italic | Secondary italic serif title for product and category storytelling. |
| h4 | 20px | 400 | 1.4 | 0.03em | — | Arimo | Compact Arimo heading for utility or supporting content. |
| body | 16px | 400 | 1.8 | 0.038em | — | arimoregular | Store information, descriptions, and general supporting text. |
| caption | 14px | 400 | 1.8 | 0.043em | lowercase | arimoregular | Small lowercase labels and short image or product annotations. |
| button | 14.5px | 400 | 1.5 | 0.069em | — | Arimo | Short CTA labels such as shop now and subscribe. |
| nav | 13px | 400 | 1 | 0.047em | lowercase | arimoregular | Lowercase primary store navigation and utility links. |
| link | 16px | 400 | 1.8 | 0.038em | — | arimoregular | Category links and supporting calls to action. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 20, 24, 30, 32 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 1100px.

A narrow announcement strip sits above navigation layered over the opening campaign. Below it, full-width image sections establish a long editorial scroll, followed by a two-column category mosaic and additional seasonal campaigns. The measured content area reaches a 1100px maximum width for constrained elements, while campaign media reads edge to edge. Alignment shifts with each photograph rather than relying on a rigid text grid. Comfortable spacing and large image-led sections create a relaxed rhythm, with denser four-column utility content at the bottom.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is predominantly flat. No measured shadow system or rounded-corner scale is present; controls and cards remain square-edged. Use fine gray hairlines to separate content where needed, and rely on photographic layering and image contrast—not drop shadows—to establish hierarchy.

## Imagery

Use polished, lifestyle-led fashion photography as the main visual material: models wearing seasonal looks, close product arrangements, and footwear or handbag details. Images are broad, edge-to-edge panels or paired category tiles, with campaign text placed directly over quieter parts of the photograph. Keep natural tones and photographic texture; avoid illustration, 3D objects, graphic overlays, or heavy colour treatments.

## Components

### Announcement strip

A slim warm-neutral strip above the hero with centered shipping or app messaging and compact directional controls.

### Overlay navigation

Lowercase Arimo links and utility controls sit over hero photography in white, with the Dolce Vita wordmark centered.

### Campaign hero

Full-bleed seasonal photography carries a large Baskerville italic message and a simple white rectangular shop CTA.

### Category tiles

Paired image tiles lead to flats, boots, heels, and handbags; use understated italic serif link labels over photography.

### Seasonal campaign

Wide product or lifestyle image with a brief editorial headline and a small shop CTA placed within the image.

### Editorial link strip

A pale warm lower-page band presents short seasonal edit links as simple white rectangular controls.

### Newsletter signup

Light neutral signup area with email input and a black subscribe button using white text.

### Measured component styles

- **Primary button** (“the suede shop”): background #ffffff · text #000000 · radius 0px · padding 10px · 400 14.4px Arimo
- **Secondary button** (“United States”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 6px 36px 6px 12px · 400 16px arimoregular · capitalize
- **Link** (“shop flats + loafers”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px arimoregular
- **Input**: background #ffffff · text #000000 · radius 0px · padding 8px 16px · 400 12px arimoregular
- **Card** (“join [ THE LIST ] for VIP access”): background #f5f2ee · text #000000 · radius 0px · padding 0px · 400 16px arimoregular
- **Navigation item** (“shoes handbags accessories bridal trendi”): transparent background · text #ffffff · radius 0px · padding 0px · 400 12.848px arimoregular

## Do

- Use campaign photography as the dominant visual surface.
- Set hero statements in Baskerville italic.
- Keep navigation and utility copy in Arimo.
- Use black text on white or pale neutral surfaces.
- Keep CTA shapes square and visually simple.
- Let image composition guide campaign text placement.

## Don't

- Do not add gradients or decorative shadows.
- Do not turn photo colours into interface accents.
- Do not use rounded cards or pill-shaped buttons.
- Do not crowd the campaign imagery with controls.
- Do not use heavy sans-serif headings for editorial messages.
- Do not impose a dense, dashboard-like grid.

## Agent prompt

Build a new Dolce Vita-style fashion storefront page with the photography doing most of the visual work. Use Gallery White (#ffffff) as the base, Velvet Ink (#000000) for copy and primary controls, Warm Sand (#eee3db) for warm lower-page surfaces, and Linen Mist (#f5f2ee) for a pale signup card. Set campaign headlines and image links in editorial Baskerville, often italic; use Arimo for navigation, body copy, and controls. Organize the page as a slim announcement, image-led hero, category photography grid, seasonal campaign blocks, and a restrained newsletter/footer. Keep images broad and immersive, overlay only concise text and simple square CTAs, and separate areas with subtle hairlines rather than shadows. Preserve a relaxed editorial rhythm and avoid decorative UI that competes with merchandise.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width campaign image with overlaid navigation, headline, and centered CTA. | primary shop CTA, overlay navigation | full-bleed photography, white serif headline, square white button |
| 2 | category-nav | Promotional image band followed by a two-column, two-row category image mosaic. | shop by category, promotional CTA | image-led tiles, serif overlay links, paired columns |
| 3 | feature-split | Wide lifestyle image with editorial copy and CTA overlaid to one side. | seasonal product discovery, shop CTA | full-width photo, serif headline, compact button |
| 4 | product-showcase | Wide product arrangement with centered campaign headline and CTA. | seasonal edit discovery, shop CTA | close-up product photography, centered serif copy, white button |
| 5 | category-nav | Compact warm-toned band with four editorial links and a split utility promotion beneath. | browse curated edits, app promotion | pale neutral surface, simple rectangular links, thin divider |
| 6 | footer | Four-column footer with brand and service links, newsletter form, and bottom selectors. | email signup, service navigation, country and language selection | light neutral background, black subscribe button, outlined selectors |

## Source CSS custom properties (selected)

```css
--alpha-button-background: 1;
--alpha-button-border: 1;
--alpha-badge-border: .1;
--duration-short: .1s;
--duration-default: .2s;
--duration-announcement-bar: .25s;
--duration-medium: .3s;
--duration-long: .5s;
--duration-extra-long: .6s;
--duration-extended: 3s;
--ease-out-slow: cubic-bezier(0, 0, .3, 1);
--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-primary: 'arimoregular', sans-serif;
--font-secondary: 'baskerville', sans-serif;
--font-tertiary: 'arimoregular', sans-serif;
--color-primary: #000000;
--color-secondary: #595959;
--color-tertiary: #b20000;
--bg-1: #F5F2EE;
--bg-2: #EEE3DB;
--bg-3: #BEA993;
--bg-4: #A99580;
--bg-5: #FFFFFF;
--font-body-family: 'arimoregular', sans-serif;
--font-body-weight-bold: 300;
--font-heading-family: ,;
--font-body-scale: 1.0;
```

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