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

# SSENSE · Design System

> Independent fashion, presented as editorial culture

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

SSENSE combines luxury fashion shopping with a magazine-like stream of culture and designer stories. A restrained monochrome interface gives oversized typography and photography the attention.

## North star

Keep the interface monochrome and spacious, letting fashion photography and the contrast between oversized sans-serif and literary serif typography lead.

## Overview

The page uses a white canvas and a quiet grayscale palette so its fashion imagery and editorial headlines carry the visual weight. A compact, uppercase navigation sits above a wide promotional banner, followed by unusually large menswear and womenswear entry links. Editorial content alternates oversized sans-serif headlines with literary serif descriptions, creating a distinctive shift between commerce and magazine storytelling. The layout is spacious but varied: split feature stories, image-card rows, product features, and broad campaign imagery break up long content feeds. Photography is presented prominently with little decorative framing; card surfaces are pale gray where present, while fine gray borders define select buttons and links. Typography relies on Favorit SSENSE variants for navigation and display text and JHA Times Now for expressive editorial copy. The overall impression is editorial, high-contrast, image-led, and deliberately flat rather than app-like.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Editorial Charcoal | `#333333` | `--color-editorial-charcoal` | brand | Primary editorial text, feature headlines, story links, and outlined editorial CTA labels. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the open background around navigation, stories, and image grids. |
| Soft Fog | `#f4f4f4` | `--color-soft-fog` | surface | Pale card and section surfaces, including neutral image-placeholder areas. |
| Quiet Silver | `#979797` | `--color-quiet-silver` | semantic | Thin borders and hairlines around selected editorial buttons, links, and cards. |
| Navigation Ink | `#000000` | `--color-navigation-ink` | neutral | Compact uppercase primary navigation and the strongest interface text. |
| Footer Ash | `#888888` | `--color-footer-ash` | neutral | Muted footer text; a secondary tone rather than a prominent page-wide color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f4f4f4` (Soft Fog) · `--color-text` → `#000000` (Navigation Ink) · `--color-text-muted` → `#333333` (Editorial Charcoal) · `--color-text-subtle` → `#888888` (Footer Ash) · `--color-border` → `#979797` (Quiet Silver)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f4f4f4` | 19.09:1 | AAA |
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#f4f4f4` | 11.49:1 | AAA |
| `#888888` | `#ffffff` | 3.54:1 | AA-large |
| `#888888` | `#f4f4f4` | 3.22:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Favorit SSENSE Inter1 | `--font-body` | webfont | 400, 100 | Oversized display and uppercase sans-serif headings, including major shopping links. | Inter |
| JHA Times Now | `--font-display` | webfont | 100, 400 | Editorial serif headlines, descriptions, and select outlined CTA text. | Cormorant Garamond |
| Favorit SSENSE Inter | `--font-favorit-ssense-inter` | webfont | 400 | Compact uppercase navigation and small captions or metadata. | Inter |

- **Favorit SSENSE Inter1:** Regular display weight; large headings use tight negative tracking and uppercase styling.
- **JHA Times Now:** Light, literary serif contrast; use natural casing for story copy and uppercase where the control requires it.
- **Favorit SSENSE Inter:** Regular weight, uppercase, and restrained tracking for concise interface labels.

### Type scale — Augmented Fourth (ratio ≈ 1.456, base 14.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 95px | 400 | 0.99 | -0.047em | uppercase | Favorit SSENSE Inter1 | Oversized uppercase shopping and campaign display headlines. |
| h1 | 66.5px | 400 | 1.08 | -0.03em | uppercase | Favorit SSENSE Inter1 | Large uppercase editorial story titles. |
| h2 | 56px | 400 | 1.07 | -0.04em | — | JHA Times Now | Serif-led editorial headline or story introduction. |
| h3 | 38px | 400 | 1.16 | -0.033em | uppercase | Favorit SSENSE Inter1 | Uppercase secondary feature and section headings. |
| h4 | 28.5px | 100 | 1.19 | -0.018em | uppercase | Favorit SSENSE Inter1 | Light uppercase subheadings and supporting labels. |
| body | 14.5px | 100 | 1.26 | -0.004em | uppercase | Favorit SSENSE Inter1 | Small uppercase supporting editorial or commerce copy. |
| caption | 11px | 400 | 1.36 | 0 | uppercase | Favorit SSENSE Inter | Compact uppercase image-card metadata and captions. |
| nav | 11px | 400 | 1.36 | 0 | uppercase | Favorit SSENSE Inter | Small uppercase primary navigation and utility links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 6, 10, 15, 20, 30, 40, 55, 64, 80, 107, 120, 121 px.
- Section rhythm 227px · element gap 20px · card padding 8px · max content width 1360px.

Use a wide desktop canvas capped at the measured 1360px page width, with full-bleed or near-full-width media within that frame. The opening sequence pairs a slim navigation row and broad banner with oversized shopping links, then shifts into asymmetrical editorial splits and multi-column image feeds. Keep generous section intervals and breathing room, while grouping related cards tightly. Align headlines to the left; let content grids and image proportions vary instead of forcing every block into one repeated template.

## Shape & elevation

- Radius: button `10px` · xs `10px`
- No box shadows measured: the page is flat.

The interface is predominantly flat, with no measured shadows or gradients. Separate content through white space, image placement, and pale gray surfaces rather than layered panels. Where an editorial button or card needs definition, use the measured #979797 hairline; keep card corners square and reserve the measured rounded treatment for buttons.

## Imagery

Photography is the dominant visual material: live performance, designer objects, fashion portraits, products, and cultural scenes. Images appear in large editorial splits, cropped card grids, and broad campaign banners. Keep their color and tonal character intact; the measured screenshot colors inside photographs and promotional artwork are not additional interface palette colors. Avoid decorative filters or heavy framing.

## Components

### Compact global navigation

A narrow uppercase text row on white, with category and search links on the left and language, account, wishlist, and bag utilities on the right.

### Promotional banner

A wide rectangular campaign area with centered uppercase messaging; let its campaign artwork supply its own tones rather than expanding the interface palette.

### Shopping category links

Two oversized uppercase links for menswear and womenswear, placed side by side with ample whitespace.

### Editorial feature split

Large uppercase sans-serif story title and serif dek on one side, paired with a prominent photograph on the other.

### Story card feed

Image-led cards with concise uppercase metadata and serif or sans-serif story titles; organize into varied multi-column rows.

### Outlined editorial button

Text-only uppercase editorial action with #333333 text, a 1px #979797 border, and a 10px radius.

### Measured component styles

- **Primary button** (“VIEW EDITORIAL”): transparent background · text #333333 · border 1px solid #979797 · radius 10px · padding 0px 20px · 100 0px JHA Times Now · uppercase
- **Link** (“INSIDE SSENSE’S STEAMY SALON DE REFUSÉS ”): transparent background · text #333333 · radius 0px · padding 0px · 100 20px JHA Times Now
- **Card** (“LISA BARLOW GETS HER BAGS Fashion”): transparent background · text #333333 · border 1px solid #979797 · radius 0px · padding 15px 0px · 100 20px JHA Times Now
- **Navigation item** (“MENSWEAR WOMENSWEAR EVERYTHING ELSE SALE”): transparent background · text #000000 · radius 0px · padding 0px · 400 11px Favorit SSENSE Inter · uppercase

## Do

- Keep the main interface palette strictly grayscale.
- Use oversized uppercase sans-serif for high-priority shopping and editorial headlines.
- Contrast sans-serif display text with literary serif story copy.
- Give photography prominent space and preserve its original treatment.
- Build editorial rows with varied splits and image-led card grids.
- Use fine gray hairlines only where a control needs definition.

## Don't

- Do not add bright interface accent colors.
- Do not turn the page into a uniform, tightly packed product grid.
- Do not add shadows, gradients, or elevated card stacks.
- Do not replace editorial hierarchy with generic marketing copy blocks.
- Do not use rounded corners on standard image cards.
- Do not make the navigation visually compete with the feature content.

## Agent prompt

Build a new luxury fashion editorial-commerce page in the SSENSE visual style. Use Gallery White (#ffffff) as the canvas, Editorial Charcoal (#333333) for story text, Navigation Ink (#000000) for compact navigation, Soft Fog (#f4f4f4) for occasional quiet surfaces, Quiet Silver (#979797) for fine control borders, and Footer Ash (#888888) for subdued footer text. Set a restrained uppercase navigation above a broad campaign banner and oversized category links. Alternate asymmetric editorial features with image-rich grids; let photography dominate without interface filters. Use a Favorit/Inter-like sans-serif for navigation and large uppercase headings, contrasted with a Times Now-like serif for editorial descriptions. Preserve generous whitespace and a flat presentation; use hairlines instead of shadows, and reserve rounded corners for outlined buttons.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | Compact navigation, wide campaign banner, oversized category links, then asymmetric editorial features and multi-column image feeds. | Category navigation, Editorial story discovery, Shop category shortcuts | Uppercase compact navigation, Split image-and-copy feature, Editorial card grid, Outlined CTA |

## Source CSS custom properties (selected)

```css
--button-font: sans-serif;
--button-letter-spacing: 0.18333299458460886px;
```

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