# Gentle Monster · Design system migration spec

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

> Worth including as a prime example of minimalist luxury e-commerce design, demonstrating how extreme restraint in UI can elevate product presentation.

## 1. Identity DNA

Gentle Monster's design system operates like a high-fashion gallery, where the interface is the architecture and the product is the sculpture. Every decision—from color restraint to typographic contrast—exists to frame the eyewear without competing with it. The result is a stark, gallery-inspired luxury e-commerce platform that prioritizes oversized editorial photography and generous whitespace.

**One-liner:** A stark, gallery-inspired luxury e-commerce platform that prioritizes oversized editorial photography and generous whitespace.
**Keywords:** luxury · avant-garde · minimalist · high-fashion · eyewear
**Analogy:** A high-fashion gallery where the product is the sculpture.

## 2. Color

The palette is a strict monochrome, relying entirely on large-scale photography for visual interest and emotion. Deep black, pure white, and neutral grays form the entire chromatic vocabulary, with no accent colors permitted.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F3F4F6` | card background |
| `--ink` | `#111111` | body text |
| `--ink-soft` | `#343434` | secondary text |
| `--muted` | `#858585` | placeholder |
| `--line` | `rgba(229,231,235,1.0)` | divider |

**Color principle:** Strict monochrome palette relying entirely on large-scale photography for visual interest and emotion.

This radical restraint ensures the product imagery is the sole source of color and narrative weight.

## 3. Typography

Typography is defined by a bold transitional serif logotype set against a clean humanist sans-serif for UI elements. The contrast between these categories creates a clear, editorial hierarchy without decorative flourish.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1px | Brand logotype and primary editorial headlines |
| heading | 28px | 1.2 | 400 | 0 | Section titles and category headers |
| body | 16px | 1.5 | 400 | 0 | Standard paragraph and UI text |
| caption | 12px | 1.3 | 400 | 0 | Secondary metadata and helper text |

**Type rules:**
- Maintain strict hierarchy between the bold serif logotype and the clean sans-serif UI elements.
- Keep line heights tight for large display text to maintain a compact, editorial feel.
- Use generous tracking and uppercase styling sparingly for utility labels like 'TOP 20 BESTSELLER'.

## 4. Spacing

Spacing follows a flexible, breathing rhythm, where generous whitespace is a structural element used to elevate product photography.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Flexible and breathing; generous whitespace is used to elevate the product photography and maintain a premium, uncluttered feel.

## 5. Surfaces

Surfaces are predominantly flat, using only very subtle, soft shadows to imply light and depth. Borders are minimal, existing as fine, 1-pixel lines to separate elements with surgical precision.

- **Radius:** sm 2px · md 8px · lg 25px · pill 9999px
- **Shadows:**
  - 0px 0px 8px 0px rgba(0, 0, 0, 0.1)
  - 0px 0px 18px 0px rgba(0, 0, 0, 0.2)
  - 0px 1px 2px 0px rgba(0, 0, 0, 0.08)
- **Borders:** 1px solid rgb(229, 231, 235)

## 6. Layout

The layout skeleton is top-heavy, starting with a full-width editorial hero that makes an immediate visual statement. This is followed by clean, left-aligned product grids and generous vertical padding, creating a linear, gallery-like viewing path.

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

**Skeleton:** A top-heavy visual layout starting with a full-width editorial hero, followed by clean, left-aligned product grids and generous vertical padding.

## 7. Motion & Interaction

Motion philosophy is one of subtlety and speed, using fast, elegant transitions for essential state changes. Animations are functional—smooth height changes for menus, scale effects on hover—never decorative.

- **Durations:** micro 150ms · small 220ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle opacity and background-color transitions for interactive elements.
  - Smooth height and transform transitions for expanding menus and modals.
  - Subtle scale effects on hover for product cards.

- **Hover:** Subtle background-color or opacity shifts on primary buttons and links.
- **Click:** Immediate feedback via state changes, maintaining a responsive feel.
- **Transition:** Consistent 0.15s cubic-bezier easing for most color and property changes.
- **Keyboard:** Standard tab navigation supported, with clear focus states implied by the cursor: pointer styling.

## 8. Voice & Don'ts

The editorial voice is sophisticated, silent, and purely visual; the design speaks through photography rather than copy. Headlines are bold and often serif-based, while calls to action are direct, high-contrast, and minimalist.

- **Tone:** Sophisticated, silent, and purely visual; the design speaks through photography rather than copy.
- **Headline style:** Bold, often serif-based, maintaining a strong editorial presence.
- **CTA style:** Direct, high-contrast, and minimalist, often using all-caps or clean sans-serif.
- **Avoid:** Bright neon colors / Cluttered layouts / Excessive decorative borders

### Don'ts
- ❌ don't use bright neon colors — the palette is strictly monochrome (#111111, #FFFFFF, #858585).
- ❌ don't clutter the UI with dense text blocks — the layout prioritizes breathing room and white space.
- ❌ don't use playful or rounded sans-serif fonts — the typography is a refined transitional serif paired with a clean humanist sans.
- ❌ don't add heavy drop shadows or 3D effects — surfaces are mostly flat with very subtle, soft shadows.
- ❌ don't use a vibrant or high-chroma accent color — the site relies entirely on black, white, and photography for color.
- ❌ don't use complex grid layouts with many columns — the structure is clean, mostly single-column or simple 12-column grids.

The system deliberately avoids bright colors, cluttered layouts, playful typography, and any decorative elements that would distract from the product's sculptural form.

## System Prompt (paste into AI tool)

```
Gentle Monster is a luxury eyewear e-commerce site with a stark, editorial design. The palette is strictly monochrome, using deep black (#111111) for text, white (#FFFFFF) for backgrounds, and light gray (#F3F4F6) for subtle surfaces. Typography pairs a bold transitional serif for the logotype with a clean humanist sans-serif for the UI. The layout is spacious, prioritizing large-scale photography and generous whitespace over dense information. Critical donts: never use bright or saturated accent colors; avoid cluttered, dense text layouts; do not use heavy or complex drop shadows. The site feels like a curated digital gallery, using restraint and negative space to elevate the product imagery.
```
