Product grid

A 257 px filter sidebar beside the grid, with the product tablist above both. The grid column count is driven by the filter component’s own Layout property.

The sidebar holds 257 px at both 1400 and 1200 — so the grid absorbs the entire difference, and cards drop from 258 px to 211 px while staying four across.

Below 992 px the sidebar leaves the layout entirely.

Alongside Rest, Hover and Pressed, the filter panel and pagination use Selected:

• Global/background/1/Selected — #ebebeb
• Global/Stroke/1/Global/Selected — #cccccc

Selected is distinct from Hover. Hover is transient and follows the pointer; Selected persists and describes what the user has chosen. Use the Selected tokens for a chosen filter, never the Hover tokens.

Brand tints

Brand/background/2 (#fff5f5) and Brand/Stroke/2 (#ffcccc) are the light end of the brand ramp. They carry the “Clear All” control.

Eight variants: Layout of 5, 4, 3 or 1 column crossed with Type of Extra or Default.

The Layout property does not describe the filter — it describes the grid beside it. A 5-column grid leaves a 257 px sidebar; a 3-column grid leaves 434 px. Filter and grid are sized as one decision.

The 1-column variant

At Layout=1 - Column the panel is 1320 px wide — the full container. It is not a sidebar at all but a full-width filter surface, which is what replaces the sidebar when it leaves the layout below 992 px.

Groups

• Filtered Option — applied chips plus Clear All
• Application — searchable checkbox list
• Voltage — value chips
• Highlights — In Stock, Hot sale, New, Discontinued
• Star rating — searchable checkbox list

Three of the five groups carry their own search field, which is the right call for lists that can run long.

Not a tablist at all — it is a breadcrumb of dropdowns on the left and a Sort by control on the right, in a 120 px block.

Each breadcrumb level is itself a dropdown, so a user can re-pick at any level without going back. That is a better pattern than a plain breadcrumb, and the name hides it.

Two variants, State=Extra and State=Default, both 1320×120 — identical in the render. At 358 it grows to 152 px as the controls wrap.

Previous, ten numbered pages, next — 520×52 at Large, 512×48 at 576 and 299×48 at 358.

The current page uses the Selected background with brand-red text — brand red as a foreground on a neutral surface rather than as a fill.

Ten page links fit 520 px comfortably. On narrower widths, or for catalogues running to many pages, truncate the middle — 1 … 5 6 7 … 40.

Below 992 px the sidebar leaves the layout. Filters are reached instead from a trigger in the tablist row, which opens the Layout = 1 - Column variant as a full-width surface.

That variant is the mobile filter surface: same groups, same controls, laid out across the full container width rather than down a sidebar.