# SSENSE · Design system migration spec

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

> This site is an excellent study in how to build a high-end luxury e-commerce experience by treating a digital interface exactly like a premium print editorial.

## 1. Identity DNA

SSENSE operates as a high-fashion publication that happens to sell clothing, where photography drives the narrative and typography serves as quiet infrastructure. The design system treats the digital interface like a premium print editorial—stark, curated, and deliberately restrained.

**One-liner:** A premium fashion e-commerce platform that fuses editorial storytelling with a stark, type-driven minimal aesthetic.
**Keywords:** fashion · editorial · minimal · luxury · curated
**Analogy:** A high-fashion magazine that also sells clothes, where photography drives the narrative and typography serves as quiet infrastructure.

## 2. Color

The color system is deliberately austere: a strict monochrome palette of off-white backgrounds and deep gray text that eliminates chromatic distraction entirely. Every color decision defers to the photography, which carries the full visual weight of each page.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F4F4F4` | main background |
| `--bg-quiet` | `#FFFFFF` | quiet area |
| `--ink` | `#333333` | body text |
| `--ink-soft` | `#888888` | secondary text |
| `--muted` | `#979797` | placeholder |
| `--line` | `rgba(51, 51, 51, 0.2)` | divider |

**Color principle:** Strict monochrome palette using varying weights of black and gray to maintain a clean, gallery-like focus on photography.

The principle is simple: color exists only to recede, never to compete with the image.

## 3. Typography

Typography operates in two distinct registers—a geometric sans-serif for navigation and utility, and JHA Times Now, a transitional serif, for all editorial content. The pairing establishes a clear hierarchy where functional text is neutral and editorial text carries quiet authority.

- **Display:** transitional-serif
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 66px | 1.0 | 400 | -3.75px | Primary display type for hero banners |
| heading | 20px | 1.3 | 400 | -0.25px | Article titles and section headers |
| body | 15px | 1.73 | 400 | -0.25px | Body copy for editorial content |
| caption | 11px | 1.36 | 400 | 0px | Navigation and metadata labels |

**Type rules:**
- Use a geometric sans-serif for navigation and utility links, uppercase with tracking.
- Use JHA Times Now (transitional-serif) for all editorial headings and body text.
- Maintain extremely tight leading on large display text.
- Utilize subtle negative letter-spacing for display and heading typography.

## 4. Spacing

Spacing follows an editorial rhythm of generous padding and 80px vertical margins, creating the breathing room of a magazine spread.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 30 / 48 / 80 px
- **Rhythm:** Generous padding surrounds content blocks to maintain a spacious, breathable editorial feel, often utilizing 80px vertical margins.

## 5. Surfaces

Depth is achieved through absence rather than addition—there are no drop shadows, no gradients, no layered surfaces. The single structural element is a subtle 1px horizontal line used to separate sections and define card boundaries.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Subtle 1px horizontal lines used to separate sections and define article card boundaries.

## 6. Layout

The layout skeleton is an asymmetric editorial grid that opens with large hero imagery before cascading into mixed arrangements of wide photographs, stacked text blocks, and horizontal lists. White space is structural, not decorative—it defines the reading path as clearly as any border would.

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

**Skeleton:** Asymmetric editorial grid with large hero imagery followed by mixed layouts combining wide images, stacked text blocks, and horizontal lists.

## 7. Motion & Interaction

Motion is understated and functional, favoring smooth transforms and opacity changes over spectacle. Hover states produce subtle underlines or slight image scaling; page transitions are seamless; the cursor never announces itself with unnecessary flourish.

- **Durations:** micro 220ms · small 350ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth hover transitions on interactive elements
  - Subtle scaling or panning on image hover
  - Seamless page transitions

- **Hover:** Subtle underline appearance or color inversion for text links
- **Click:** Immediate navigation without heavy animation
- **Transition:** Smooth transform and opacity changes on hover states
- **Keyboard:** Standard browser focus rings for accessibility

## 8. Voice & Don'ts

The editorial voice is objective, cool, and deliberately detached—headlines are all-caps and tight-tracked, CTAs are understated uppercase text links with generous spacing. Enthusiasm is conspicuously absent from the interface.

- **Tone:** Objective, cool, and editorially detached.
- **Headline style:** All-caps, tight-tracked, sans-serif or strong transitional serif for impact.
- **CTA style:** Understated uppercase text links with generous spacing.
- **Avoid:** Overly enthusiastic marketing language / Bright, high-chroma colors / Rounded UI elements or soft shadows

### Don'ts
- ❌ Don't use drop shadows — the site relies on flat imagery and subtle borders for depth.
- ❌ Don't introduce bright accent colors — the site enforces a strict monochrome palette of black, white, and gray.
- ❌ Don't use heavily rounded corners — the site maintains sharp, square edges on all layout elements and images.
- ❌ Don't use overly thick or bold typography — the site utilizes delicate font weights (100-400) for a refined aesthetic.
- ❌ Don't clutter the interface — the site uses vast amounts of white space to create a premium, gallery-like experience.
- ❌ Don't use decorative or playful icons — the interface relies purely on clean typography and high-quality photography.

What SSENSE deliberately omits is the point: no bright accents, no rounded corners, no decorative icons, no heavy typography—only photography and type doing the work.

## System Prompt (paste into AI tool)

```
This is a premium fashion e-commerce platform that blends a stark, monochrome digital experience with rich editorial photography. The aesthetic is minimalist and gallery-like, using a primary palette of off-white (#F4F4F4) and deep gray (#333333) with no high-chroma accents. Typography relies heavily on a delicate transitional serif (JHA Times Now) for editorial content, paired with a geometric sans-serif for UI, using tight negative letter-spacing on massive, uppercase display text. Key critical don'ts: do not introduce drop shadows or decorative UI elements; never use brightly colored accents; avoid rounded corners or soft UI patterns; maintain delicate font weights rather than heavy boldestyles; use generous whitespace to preserve the editorial breathing room; rely purely on typography and photography rather than UI ornamentation.
```
