SSENSE — dual-sidebar designer index to sticky wing product detail and ledger bag
Browsing starts in a 4-column uncropped lookbook flanked by sticky left/right 11px uppercase filter trees, transitions to a product detail page where construction specs and size selection pin at 35vh beside scrolling photography, and concludes in an accounting-ledger bag.
Step 1 of 3
SSENSE — Left/Right Monospace Category Tree & Uncropped Lookbook Grid- grid/layoutFlank a 4-column central product grid with two sticky 160px sidebars: left for alphabetical designer index (`A–Z` in 11px uppercase sans) and right for sort/color/size filters, eliminating top dropdown menus entirely.
- typographyEvery product card uses strictly 11px `line-height: 1.35` uppercase Helvetica for brand, garment title, and tabular price (`$640 USD`) with zero badges, star ratings, or rounded corners.
Step 2 of 3
SSENSE Product Detail — Sticky Dual-Wing Spec Rail & Center-Scroll Gallery- grid/layoutPin garment construction details and fabric composition at `position: sticky; top: 35vh` in the left 25% wing, pin the size selector and 'Add to Bag' CTA at `top: 35vh` in the right 25% wing, and scroll full-height vertical photography down the center 50%.
- component patternModel height and garment size worn (`Model is 6ft 1in and wears size 48`) sit directly below the fabric bullet list so fit context is visible without opening a modal.
Step 3 of 3
SSENSE Bag & Checkout — Brutalist 11px Uppercase Ledger & Instant Size Swap- component patternFormat the shopping bag as an accounting ledger with `1px solid #000000` horizontal dividers, allowing inline size changes and one-click move-to-wishlist without page reloads.
- typographyTotal order price and duties calculation align flush-right in `font-variant-numeric: tabular-nums` beside a full-width rectangular `#000000` checkout button.
Agents get the same order from get_reference: any screen's reply names the flow and every step in it.