Usage
Depth is a way Houzz uses to set distinction to interactive components from the background, which will enhance the affordance when products are being used by our users. Shadow is the visual way to communicate the elevation and hierarchy of components.
Types
Three levels are defined for different use cases.
Level 1 (small)
Lvl 1 shadow can be used to add affordance and distinction from the background to components like cards, headers and footers etc. It should only be used on the lowest level of elevation.
Level 2 (medium)
A more pronounced shadow for a hover style on Lvl 1 components.
Level 3 (large)
- Hover style for Lvl 2
- It can be used as a strong shadow to give perspective to dropdowns/popovers/tooltips/menus/modals and other similar components that have higher elevation than cards etc.
Sizes
In order to construct a clear hierarchy across all platforms, we defined three hierarchies in the typography system: headers, body text and notation. For each hierarchy, there will be levels of different font sizes with specific line heights for various use cases. Page and section headers will use semibold only, while body and notation text can use either regular or semibold font weight
The line-height of each font size is multiple of 4px, so when putting components together, it will perfectly follow our rule of 4px.
Best Practices
- Don’t use shadows on line-based components. like text (except for text over images), line break, etc.
- Don’t overuse shadows when the hierarchy is complicated.