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

# GANNI · Design System

> Clean commerce, bold fashion imagery

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

A restrained, white-led storefront lets expressive campaign photography and product images carry the visual identity. Compact navigation and repeated product carousels balance the editorial hero with direct shopping paths.

## North star

Keep the interface visually quiet and let oversized, authentic fashion photography provide the page’s strongest expression.

## Overview

GANNI’s homepage pairs a nearly all-white commerce canvas with high-impact fashion photography. The opening hero is a full-bleed campaign image in warm, earthy tones, with oversized white branding and a small, centered discovery prompt layered over the photograph. The palette stays restrained in interface areas: black anchors the wordmark, navigation, product names and primary quick-buy actions; muted gray is reserved for secondary copy and search treatment. A pale warm off-white marks the footer, while the measured light gray appears as a subtle interface or gradient detail rather than a defining brand color. Helvetica Neue For Ganni is used throughout, with compact navigation and product text, understated headings, and uppercase button labels. Below the hero, the page alternates multi-column product carousels, category-link grids, and larger editorial campaign panels. Broad white intervals keep these dense shopping modules from feeling crowded. The result is a flat, image-led storefront with minimal framing and little decorative chrome.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas, header background, and reversed type over campaign photography. |
| Ink | `#000000` | `--color-ink` | brand | Wordmark, navigation, product text, links, footer text, and black quick-buy buttons. |
| Soft Mist | `#f0f0f0` | `--color-soft-mist` | semantic | Subtle light-gray gradient or interface detail; not a defining campaign or brand color. |
| Warm Porcelain | `#f8f8f5` | `--color-warm-porcelain` | surface | Measured warm off-white surface used for the footer. |
| Quiet Slate | `#686a6a` | `--color-quiet-slate` | neutral | Muted supporting text and search-field copy. |
| Graphite Line | `#555555` | `--color-graphite-line` | neutral | Sparse border and link-detail treatment; avoid using it as a major surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f8f5` (Warm Porcelain) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#686a6a` (Quiet Slate) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#555555` (Graphite Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f8f8f5` | 19.74:1 | AAA |
| `#686a6a` | `#ffffff` | 5.44:1 | AA |
| `#686a6a` | `#f8f8f5` | 5.12:1 | AA |
| `#ffffff` | `#f8f8f5` | 1.06:1 | fail |

### Gradients

- `linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(240, 240, 240), rgb(240, 240, 240))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica Neue For Ganni | `--font-body` | webfont | 400, 500 | Site-wide interface type for navigation, headings, body copy, product details, captions, and buttons. | Inter |

- **Helvetica Neue For Ganni:** Measured weights 400 and 500; compact, mostly sentence-case interface text, with uppercase button labels and modest positive button tracking.

### Type scale — Major Third (ratio ≈ 1.286, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 18px | 500 | normal | 0 | — | Helvetica Neue For Ganni | Hero and section headings, restrained in size and medium weight. |
| body | 14px | 500 | normal | 0 | — | Helvetica Neue For Ganni | Product descriptions and primary supporting copy. |
| caption | 12px | 400 | 1.4 | 0 | — | Helvetica Neue For Ganni | Small supporting labels and secondary product details. |
| button | 11px | 400 | normal | 0.02em | uppercase | Helvetica Neue For Ganni | Compact uppercase action labels, including quick-buy controls. |
| nav | 14px | 400 | 1 | 0 | — | Helvetica Neue For Ganni | Header navigation and promotional shipping message. |
| link | 14px | 400 | normal | 0 | — | Helvetica Neue For Ganni | Product names, color selectors, and category links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 5, 10, 14, 15, 20, 24 px.
- Section rhythm 50px · element gap 20px · card padding — · max content width 1400px.

A full-width canvas with a measured page maximum width of 1400px supports the broad campaign imagery and shopping modules. The header is a compact horizontal band, with wordmark and category navigation aligned left and search and utility icons aligned right. A single-column full-bleed hero leads into repeated four- and five-column product carousels, category-link blocks, and two-column editorial features. Sections retain a comfortable rhythm with generous white separation; product areas remain orderly and information-dense without strong card frames.

## Shape & elevation

- No box shadows measured: the page is flat.

The measured system is predominantly flat: white sections sit directly on the canvas, with no detected shadow system or meaningful radius scale. Separate content through whitespace and image placement rather than raised cards. Keep borders and hairlines sparse and understated; the black quick-buy button is a clear functional contrast, not a floating element.

## Imagery

Use full-bleed, high-resolution fashion campaign photography for hero and collaboration moments, cropped close enough to emphasize garments, accessories, and styling. Product carousels use consistent catalog imagery with color choices and concise names nearby. Warm browns and neutrals in the photography are image content, not interface palette tokens. Favor real editorial photography over illustration, 3D, or decorative graphics.

## Components

### Store header

White horizontal header with black GANNI wordmark, compact category links, search field, and outline utility icons.

### Shipping announcement

Short centered shipping message in a narrow strip above the main navigation.

### Campaign hero

Full-bleed lifestyle image with oversized white brand lettering and a small discovery link overlaid near the bottom.

### Product carousel

Four- or five-column product presentation with concise names, prices, color choices, and black quick-buy actions.

### Category links

Simple multi-column category destinations with headings and dot-separated links, presented on white.

### Editorial feature

Large fashion image with a short campaign title and restrained Discover action.

### Footer and signup

Warm off-white footer area with newsletter inputs and dense multi-column informational links.

### Measured component styles

- **Primary button** (“Quick buy”): background #000000 · text #ffffff · border 1px solid · radius 0px · padding 0px 10px · 400 14px Helvetica Neue For Ganni
- **Secondary button** (“Suchen”): background #f1f1f1 · text #686a6a · radius 0px · padding 14px 10px 14px 15px · 400 14px Helvetica Neue For Ganni
- **Link** (“Select color: Demitasse”): transparent background · text #000000 · radius 0px · padding 0px 0px 4px 0px · 400 14px Helvetica Neue For Ganni
- **Input** (“DE”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Helvetica Neue For Ganni
- **Navigation item** (“Free standard shipping on orders over €3”): transparent background · text #000000 · radius 0px · padding 0px · 500 16px Helvetica Neue For Ganni

## Do

- Use #ffffff as the dominant interface canvas.
- Let full-bleed fashion photography lead the hero and editorial sections.
- Use #000000 for primary text and prominent quick-buy actions.
- Keep navigation and product labels compact and easy to scan.
- Repeat consistent multi-column product modules.
- Use whitespace instead of shadows to separate sections.

## Don't

- Do not turn warm campaign-image colors into interface accents.
- Do not add decorative gradients as a dominant visual treatment.
- Do not use heavy card borders or drop shadows.
- Do not let navigation compete with the hero imagery.
- Do not substitute generic illustrations for fashion photography.
- Do not invent additional typefaces, colors, or radius styles.

## Agent prompt

Build a new GANNI-style fashion storefront page with a quiet #ffffff Gallery White canvas and restrained #000000 Ink typography. Use Helvetica Neue For Ganni or a close sans-serif substitute such as Inter, keeping navigation, product information, and controls compact. Start with a narrow shipping announcement and a clean header, then give authentic fashion photography a full-bleed editorial hero with a minimal overlaid discovery action. Organize shopping content into repeated multi-column product carousels and simple category links, separated by generous white space. Use #686a6a Quiet Slate only for secondary interface copy and reserve #f8f8f5 Warm Porcelain for a soft footer surface. Keep components flat, corners square, borders sparse, and product actions high contrast. Treat warm colors within photographs as imagery rather than UI tokens.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single-column, full-bleed campaign image with overlaid brand mark and discovery link. | Discover link | Full-bleed photography, White overlay type |
| 2 | product-grid | Four-column product carousel on a white canvas. | Carousel navigation, Quick buy, Color selection | Product photography, Black action buttons |
| 3 | category-nav | Four-column category-link block with left-aligned headings. | Category links | Plain text links, White background |
| 4 | product-grid | Four-column product carousel on white. | Carousel navigation, Quick buy, Color selection | Product photography, Compact product details |
| 5 | category-nav | Four-column category-link block, left aligned. | Category links | Text-led navigation, White background |
| 6 | feature-grid | Two-column editorial feature layout with large imagery. | Discover links | Campaign photography, Minimal text overlay or caption |
| 7 | product-grid | Five-column product carousel. | Carousel navigation, Quick buy, Color selection | Product photography, Compact labels |
| 8 | product-grid | Four-column product carousel on a white canvas. | Carousel navigation, Quick buy, Color selection | Product photography, Compact labels |
| 9 | feature-split | Single-column full-bleed collaboration feature. | Discover link | Full-bleed image, Editorial title |
| 10 | newsletter | Single-column signup section with a small form. | Email signup, Form submission | Multiple inputs, Simple text hierarchy |
| 11 | footer | Five-column footer with informational links and form controls. | Footer navigation, Newsletter controls | Warm off-white surface, Dense link lists |

## Source CSS custom properties (selected)

```css
--font-primary: Helvetica Neue For Ganni,Arial,sans-serif;
--font-weight-medium: 500;
--main-color: #dddddd;
--link-color: #234923;
--text-color: #222;
--hover-color: #8a8d8d;
--decline-color: #dddddd;
--decline-text: #000;
--footer-background: #f6f6f6;
```

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