Background
The Material Design team recently released an updated version of their design system called Material 3 | Material 3, which includes significant changes to the "bottom navigation" component. The component has been renamed to "navigation bar," and the specifications for type, spacing, and color recommendations have also been updated.
Goals
- We want to update our current design to conform with Material 3
- Applying new color specs, see T330645
- Apply new type styles, see T330753
Updates (Figma)
| Explore | Saved | Search | Edits | |
| Light |  |  |  |  |
| Sepia |  |  |  |  |
| Dark |  |  |  |  |
| Black |  |  |  |  |
- Updated sizes and spacing; check out Figma for details
- New type style defined: toolbar see T330753
- Updated active states
- Filled/bold state of Explore, Saved, Search, and Edits icon
- New pill shape in the background
- Inactive state:
- New color group for both icon and label: placeholder see T330645
- Icon updates
- Bold state for Explore icon, see [1] attachment
- Bold state for Search icon, see [2] attachment
- Outlined bookmark icon for Saved
- Outlined pencil icon for Edits
- Remove elevation (shadow), add a top border (0.5dp, color-group: border)
- This is how truncation is handled (Figma) 👇
Attachments
[1]
[2]
