New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
Design Language System
Product Discovery Module · 2026
Token-synced (2026-03-05) · Heading + filter buttons (left) · 3-card paginated carousel (right) · 3 filter categories · Responsive: Desktop / Tablet / Mobile
Token Sync
Token Changes
Values corrected from updated Primitives.json + Semantic.json. 3 primitive values updated.
| Token | Old | New | Note |
|---|---|---|---|
--color-blue-700 | #245090 | #255090 | Hover state (Blue-Brand 1/Blue-700) |
--color-neutral-300 | #C4C4C4 | #C5C5C5 | Disabled bg / arrow border |
--color-success | #248832 | #24882D | Feedback/success (Green-900) |
--btn-solid-hover | #245090 | #255090 | Button hover (inherits Blue-700) |
Design Tokens
Token Reference
All values sourced from Primitives.json + Semantic.json. Component uses 3-layer token architecture: Primitives → Semantic → Component (--pd-*).
| Property | CSS Token | Value | Notes |
|---|---|---|---|
| Section heading | --pd-heading-* → Typography/H2_600 | 20px / 26px / 600 / #142D51 | Uses H2 size + semibold + blue-900 |
| Body text | --pd-subtext-* → Typography/Body_S_400 | 14px / 20px / 400 / #4A4A4A | Body small, secondary color |
| Filter button height | --pd-filter-height → Buttons/Height/Medium | 48px | Same as DLS button md height |
| Filter active bg | --pd-filter-bg-active → Buttons/Solid/Default | #142D51 | Blue-900 (navy) |
| Filter idle border | --pd-filter-border-idle → Buttons/Outline/Default | #142D51 | Blue-900 |
| Filter hover bg | --pd-filter-bg-hover → Color/Blue-100 | #E4EAF4 | Light blue fill on hover |
| Filter button font | --pd-filter-font-* → Buttons/Font | 16px / 500 / 0.02em | Medium weight, capitalize |
| Grid layout | --pd-grid-* (grid-cols-3) | 1fr 2fr | Two-column: text left, carousel right |
| Grid gap (tablet) | --pd-grid-gap-tablet → Scale/600 | 24px | Column gap at tablet |
| Grid gap (desktop) | --pd-grid-gap-desktop → Scale/900 | 40px | Column gap at desktop |
| Card grid cols | 3 columns (fixed) | repeat(3, 1fr) | Always 3 cards per page |
| Card grid gap (mobile) | --pd-card-gap-mobile → Scale/200 | 8px | Tight gap on mobile |
| Card grid gap (tablet) | --pd-card-gap-tablet → Scale/400 | 16px | Medium gap on tablet |
| Card grid gap (desktop) | --pd-card-gap-desktop → Scale/500 | 20px | Wider gap on desktop |
| Carousel slide | --pd-transition-slide | 300ms ease-in-out | translateX pagination |
| Filter fade | --pd-transition-fade | 250ms | Cards fade out → swap → fade in |
| Arrow button size | --pd-arrow-size → Scale/900 | 40px | Circular navigation button |
| Arrow bg/border | --pd-arrow-bg / --pd-arrow-border | #FFF / #C5C5C5 | White bg, neutral-300 border |
| Accent: New Arrivals | --pd-accent-new-arrivals → Blue-900 | #142D51 | Navy bar on placeholder |
| Accent: Wrinkle-Free | --pd-accent-wrinkle-free | #2C1810 | Dark brown bar on placeholder |
| Accent: Performance | --pd-accent-performance → Brand/Logo | #8E2231 | Maroon bar on placeholder |
Responsive Behaviour
Mobile < 640 px
- · Single column layout
- · Heading + buttons stacked above carousel
- · 3-card grid per page,
--pd-card-gap-mobile: 8px - · Arrows inset at
--pd-arrow-offset-mobile - · Filter buttons: full-width
Tablet 640–1023 px
- · Two-column grid (1fr 2fr)
- · Left: heading + filters
- · Right: 3-card paginated carousel
- · Card gap:
--pd-card-gap-tablet: 16px - · Column gap:
--pd-grid-gap-tablet: 24px
Desktop ≥ 1024 px
- · Same two-column grid, wider gaps
- · Card gap:
--pd-card-gap-desktop: 20px - · Column gap:
--pd-grid-gap-desktop: 40px - · Arrows at
-pd-arrow-offset-desktop - · ProductCard Quick Shop visible on hover
Filter Categories
--pd-accent-new-arrivalsNew Arrivals#142D51--pd-accent-wrinkle-freeWrinkle-Free Collection#2C1810--pd-accent-performancePerformance Collection#8E2231Carousel behaviour
Cards per page
3Total products
6 per filter (2 pages)Slide animation
300ms ease-in-out translateXFilter transition
250ms fade out → swap → fade inLeft arrow
Visible when page > 0Right arrow
Visible when page < lastInteraction States
Filter defaultborder-blue-900, text-blue-900, transparent bg
Filter hoverbg-blue-100 (idle only)
Filter activebg-blue-900, text-white, border-blue-900
Arrow hovershadow-md (elevated)
Arrow disabledopacity-50, cursor-not-allowed
Breakpoint Preview
Desktop
≥ 1024 px · Two-Column GridTwo-column layout (1fr 2fr) with wider gap-10. Carousel arrows positioned at -left-5 / -right-5. Click filter buttons to see fade transition. Click arrows to paginate.
Interactive — click filters to switch categories · click arrows to paginate
Discover New Favorites
Try our bestselling shirts, new arrivals, and more to find your new look.
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
Tablet
640–1023 px · Two-Column GridSame two-column layout with tighter gap-6. Card grid uses gap-4.
Interactive — 720 px container
Discover New Favorites
Try our bestselling shirts, new arrivals, and more to find your new look.
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
Mobile
< 640 px · Single ColumnSingle-column stacked layout. Heading and filter buttons above, carousel below. Card grid uses gap-2.
Interactive — 375 px container
Discover New Favorites
Try our bestselling shirts, new arrivals, and more to find your new look.
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
Comparison
All 3 Breakpoints — Side by Side
Each instance is fully interactive. Click filters and arrows independently.
Desktop · 1024 px
Discover New Favorites
Try our bestselling shirts, new arrivals, and more to find your new look.
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
Tablet · 720 px
Discover New Favorites
Try our bestselling shirts, new arrivals, and more to find your new look.
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
Mobile · 375 px
Discover New Favorites
Try our bestselling shirts, new arrivals, and more to find your new look.
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00
New
Wrinkle-Free Domaschino Long-Sleeve Polo
$110.00