SSENSE — Product listing

CommerceSee it livessense.com

There is no card, no border, no shadow, no hover state anywhere on this grid — the only thing separating one product from the next is whitespace and an 11px caption. The left rail's designer list runs alphabetically past the fold on purpose: this isn't trying to look approachable, it's trying to look like an object catalogue.

SSENSE — Product listing — captured interface — Page excerpt · scroll inside to explore

Source capture · 2026-08-01Open full image ↗

Search & discovery Commerce

Why this pattern works

Steal the chromeless product grid — kill the card entirely, let the photo run to the edge of its column with only a tiny text caption below it — and the split filter architecture: taxonomy (categories, designers) on the left, transient state (sort, active colour) on the right, with the grid sandwiched between. The exhaustive A-to-Z designer list is also worth taking as a filter mechanism once a catalog is big enough to need it.

Design notes

Surface: Men's ready-to-wear listing grid, no header in frame
Navigation: No app chrome visible — the left rail IS the navigation: a SALE checkbox, four flat CATEGORIES links, then DESIGNERS, which opens into a ten-name curated list, a live designer search box, and a full A-to-Z list of every designer in the catalog running hundreds of rows past the fold.
Layout: Three fixed-ish regions with no visible scaffolding between them: a ~190px filter rail left, a fluid 4-column product grid centre, and a ~150px sort/colour rail right. The designer list is the only thing on the page long enough to matter for scroll length; everything else fits in one viewport of height per row.
Density: Extremely tight for text — 11-12px captions, single-line list rows with no extra padding — but loose for imagery, with wide gutters between product photos. Built for someone scanning names and prices, not being sold to.
Color: Pure white canvas, pure white product backdrop, black text. No brand colour anywhere on screen — the only colour in frame is whatever the garment is wearing. Even the active states (an underlined sort option, underlined 'ALL COLORS') are black-on-white, marked by an underline, never a hue.
Type: One small grotesque sans throughout: all caps for taxonomy labels (CATEGORIES, DESIGNERS, SORT, COLORS) and brand names, sentence case for product names. Nothing on screen exceeds ~12px — hierarchy comes from case and position, never from size.
Pattern: The chromeless product tile: photo, brand name, product name, price, stacked with zero border, zero background fill, zero shadow, and no visible hover affordance. It works only because the photography carries all the visual weight and the type is small enough to disappear into caption.
States: Static, logged-out browse — no cart badge, no personalization banner, no promo toast. The only 'active' states rendered are text-based: an underline on the selected sort option and on 'ALL COLORS.'
Don't: Don't add a card background, a border, or a hover shadow 'to polish it up' — that's exactly the chrome this layout exists to eliminate, and it'll make the tiny type read as unfinished instead of intentional.

Make it your own

Turn this reference into a useful brief for your project. Copy it into the AI tool you already use.

Your project

Use withI want to

Tech stack

Add constraints

What should the tool respect?

Preview & edit prompt

Prompt text

# My project
[Describe the product, audience, and screen you want to improve]

Stack: Use the existing project stack
Task: Implement the interface and verify the result in the existing project.

## Tool guidance (Any AI tool)
Use available project tools to inspect, implement, and test. State any unavailable capabilities.

# Design reference: SSENSE — Product listing
Source: https://www.ssense.com/en-us/men
Swipefile reference: https://swipefile.design/ref/ssense-shop/
Captured: 2026-08-01. This is a dated reference, not a claim about the current live product.
Capture scope: a page excerpt. Do not infer unseen sections or interactions.

## Objective
Adapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- surface: Men's ready-to-wear listing grid, no header in frame
- nav: No app chrome visible — the left rail IS the navigation: a SALE checkbox, four flat CATEGORIES links, then DESIGNERS, which opens into a ten-name curated list, a live designer search box, and a full A-to-Z list of every designer in the catalog running hundreds of rows past the fold.
- layout: Three fixed-ish regions with no visible scaffolding between them: a ~190px filter rail left, a fluid 4-column product grid centre, and a ~150px sort/colour rail right. The designer list is the only thing on the page long enough to matter for scroll length; everything else fits in one viewport of height per row.
- density: Extremely tight for text — 11-12px captions, single-line list rows with no extra padding — but loose for imagery, with wide gutters between product photos. Built for someone scanning names and prices, not being sold to.
- color: Pure white canvas, pure white product backdrop, black text. No brand colour anywhere on screen — the only colour in frame is whatever the garment is wearing. Even the active states (an underlined sort option, underlined 'ALL COLORS') are black-on-white, marked by an underline, never a hue.
- typography: One small grotesque sans throughout: all caps for taxonomy labels (CATEGORIES, DESIGNERS, SORT, COLORS) and brand names, sentence case for product names. Nothing on screen exceeds ~12px — hierarchy comes from case and position, never from size.
- pattern: The chromeless product tile: photo, brand name, product name, price, stacked with zero border, zero background fill, zero shadow, and no visible hover affordance. It works only because the photography carries all the visual weight and the type is small enough to disappear into caption.
- states: Static, logged-out browse — no cart badge, no personalization banner, no promo toast. The only 'active' states rendered are text-based: an underline on the selected sort option and on 'ALL COLORS.'
- dont: Don't add a card background, a border, or a hover shadow 'to polish it up' — that's exactly the chrome this layout exists to eliminate, and it'll make the tiny type read as unfinished instead of intentional.

Useful for: Steal the chromeless product grid — kill the card entirely, let the photo run to the edge of its column with only a tiny text caption below it — and the split filter architecture: taxonomy (categories, designers) on the left, transient state (sort, active colour) on the right, with the grid sandwiched between. The exhaustive A-to-Z designer list is also worth taking as a filter mechanism once a catalog is big enough to need it.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.

Assembled in your browser. No API key or AI request needed. Changing the fields refreshes the preview.

## Objective
Adapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

SSENSE — Product listing

Make it your own

Keep exploring