---
name: SSENSE
description: "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."
version: alpha

colors:
  background: "#F4F4F4"
  primary: "#333333"
  secondary: "#888888"
  neutral: "#979797"
  bg-quiet: "#FFFFFF"
  line: "rgba(51, 51, 51, 0.2)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 66px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-3.75px"
  heading:
    fontFamily: transitional-serif
    fontSize: 20px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "-0.25px"
  body:
    fontFamily: transitional-serif
    fontSize: 15px
    lineHeight: 1.73
    fontWeight: 400
    letterSpacing: "-0.25px"
  caption:
    fontFamily: transitional-serif
    fontSize: 11px
    lineHeight: 1.36
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 30px
  2xl: 48px
  3xl: 80px

---

## Overview

A premium fashion e-commerce platform that fuses editorial storytelling with a stark, type-driven minimal aesthetic.

*A high-fashion magazine that also sells clothes, where photography drives the narrative and typography serves as quiet infrastructure.*

## Colors

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

- **Background (`#F4F4F4`)** — uses `bg` token
- **Primary text (`#333333`)** — uses `ink` token
- **Secondary text (`#888888`)** — uses `ink-soft` token
- **Muted (`#979797`)** — uses `muted` token
- **Borders (`rgba(51, 51, 51, 0.2)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Generous padding surrounds content blocks to maintain a spacious, breathable editorial feel, often utilizing 80px vertical margins.

## Elevation & Depth

- Borders: Subtle 1px horizontal lines used to separate sections and define article card boundaries.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Text-based links, often uppercase sans-serif for utility navigation, relying on hover states rather than filled backgrounds.
- **card:** Borderless photographic cards with typography positioned below, or split cards with a 1px border on the top or bottom.
- **chip:** None
- **input:** None visible
- **hero:** Full-width photographic layout anchored by massive, custom typography with tight tracking.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```