The baseline grid is set at 4px . For more information about the baseline, see how this influences typography.
Metrics and Keylines
Baseline Grid
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
