Metrics and Keylines

Baseline Grid

The baseline grid is set at 4px . For more information about the baseline, see how this influences typography.

Image Ratios

Images will conform the following aspect ratios.

42:9
21:9
16:9
3:2
1:1

Ratio Keylines

Image type SM MD LG Beyond
Header banners across the site 16:9 21:9 21:9 Maintain max height @ large, width continues to expand, image fits to width (cropping top & bottom)
Primary collection banner 16:9 (not full width) 21:9 21:9 Maintain max height @ large, width continues to expand, image fits to width (cropping top & bottom)
Collection banner 42:9 ?? 42:9 42:9
Secondary & tertiary collection banners 16:9 16:9 3:2 Does not exceed container
Product page close up 1:1 1:1 1:1 Does not exceed container
Product thumbnail / box swatch 1:1 1:1 1:1 Does not exceed container
Featured product drop-down - - TBD? 3:2 Does not exceed container

Touch Target Size

  • Form fields & buttons
    • 48px min object size, 48px min touch target size
  • Nav icons
    • 24px min object size, 48px min touch target size
  • Dropdowns
    • LG: 36px min object size, 36px min touch target size
    • SM-MD: 48px min object size, 48px min touch target size
Some scenarios such as the account dropdown may not allow for the ideal 48px touch target size.