# Ganni · Design system migration spec

> Source: https://www.ganni.com  ·  Curated by OpenDesign  ·  en

> A highly effective example of how a minimalist UI framework can successfully support and elevate a vibrant, fashion-forward brand identity.

## 1. Identity DNA

The design system operates as a bold, minimalist fashion editorial: the interface provides a stark, neutral framework that allows the photography to command attention. This is a system of deliberate restraint, where every element is chosen to support, not compete with, the visual energy of the brand's content.

**One-liner:** A premium fashion e-commerce platform featuring bold typography and high-impact photography.
**Keywords:** Scandinavian · Bold · Trend-driven · Confident
**Analogy:** A bold, minimalist fashion editorial

## 2. Color

The palette is a strict monochrome of black, white, and a single muted gray, creating a neutral canvas. This deliberate absence of a dominant accent color ensures the vibrant photography remains the primary source of visual energy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F1F1F1` | main background |
| `--bg-soft` | `#F8F8F5` | card background |
| `--bg-quiet` | `#F0F0F0` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#686A6A` | secondary text |
| `--muted` | `#686A6A` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Neutral canvas letting vibrant photography drive the visual energy.

The core principle is non-interference; the color system exists to recede and provide structure.

## 3. Typography

The typographic voice is exclusively a bold, grotesque sans-serif, used with confidence in uppercase for navigation and mixed-case for impact in headlines. This choice creates a strong, clean contrast against the photographic content, with no decorative or script faces allowed.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 26px | 1.0 | 500 | 0 | Main headlines and modal titles |
| body | 16px | 1.0 | 400 | 0 | Body text and standard UI copy |
| small | 14px | 1.0 | 400 | 0 | Secondary text and navigation items |
| micro | 12px | 0.75 | 400 | 0 | Legal disclaimers and fine print |

**Type rules:**
- Navigation and category labels are typically uppercase.
- Headlines use mixed-case or uppercase with tight spacing.
- Body copy uses standard sentence case.

## 4. Spacing

The system is built on a flexible 4px base grid, establishing a consistent internal rhythm for component padding and layout gaps.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 50 px
- **Rhythm:** A flexible 4px base grid driving consistent internal component padding and layout gaps.

## 5. Surfaces

Depth is communicated sparingly through a single, subtle drop shadow on key elements. Borders are functional and minimal, using solid 1px lines to define interactive components without cluttering the visual field.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.4) 0px 4px 8px 0px
- **Borders:** Solid 1px black borders for standard interactive elements.

## 6. Layout

The structural skeleton is a fluid grid that adapts from full-bleed photographic heroes to multi-column product displays. It prioritizes ample negative space and a clean, open structure over dense information packing.

- **Container max:** 1280px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A fluid grid system that adapts from full-bleed photography to multi-column product layouts.

## 7. Motion & Interaction

Motion is purposeful and restrained, limited to smooth state transitions. The philosophy prioritizes responsive feedback over decorative animation, using quick 0.15s ease-ins for standard interactions and longer durations for larger element movements.

- **Durations:** micro 100ms · small 150ms · medium 400ms
- **Easing:** `cubic-bezier(0, 1, 0.5, 1)`
- **Patterns:**
  - Smooth 0.15s ease-in transitions for standard UI state changes.
  - 0.8s cubic-bezier transitions for larger element movements.

- **Hover:** State changes are indicated through subtle background or text color transitions.
- **Click:** Standard pointer interactions for interactive elements.
- **Transition:** A consistent 0.15s ease-in transition applied across interactive components.
- **Keyboard:** Standard browser focus and navigation behavior.

## 8. Voice & Don'ts

The editorial voice is direct, concise, and confident, matching the boldness of the visual design. Headlines are short and punchy, CTAs are clear and urgent, and the language avoids any flourish that might soften the brand's assured tone.

- **Tone:** Direct, concise, and confident.
- **Headline style:** Short, punchy, and often stylized with specific capitalization.
- **CTA style:** Clear and urgent, frequently utilizing all-caps text.
- **Avoid:** Overly decorative fonts / Excessive use of secondary colors / Complicated UI patterns

### Don'ts
- ❌ Don't use soft, rounded corners on buttons — screenshot shows sharp, rectangular UI elements.
- ❌ Don't rely on a single strong accent color — screenshot shows a predominantly monochrome palette driven by photography.
- ❌ Don't use thin or script typography — screenshot shows bold, solid sans-serif typefaces.
- ❌ Don't clutter the layout with excessive borders — screenshot shows clean, open space defining elements.
- ❌ Don't use low-contrast text for navigation — screenshot shows stark black text on light backgrounds.
- ❌ Don't use decorative drop shadows on standard UI elements — screenshot shows a flat, clean aesthetic.

The system deliberately avoids decorative fonts, complicated UI patterns, and any single strong accent color that would disrupt its neutral, photography-driven framework.

## System Prompt (paste into AI tool)

```
GANNI is a premium Scandinavian fashion e-commerce platform with a bold, minimalist aesthetic. The design relies heavily on high-quality, full-bleed photography set against a stark, neutral canvas of black (#000000) and off-white (#F1F1F1), with a muted gray (#686A6A) used for secondary text. The typography is exclusively a bold grotesque sans-serif, frequently using all-caps for navigation and calls-to-action. Critical constraints for replicating this design include avoiding rounded corners on buttons and inputs, ensuring sharp rectangular shapes are used throughout, and steering clear of any single dominant accent color that competes with the imagery. Always maintain a strict, clean grid with ample negative space.
```
