Cielo Design System - Patterns: Navigation Tabs

These side panel patterns were being used in a larger organism that is the Vertical navigation drawer. So in this way, every tab item would share the same colors and interactions and the content would be swapped out (like icon and text). This is much easier to code than it is to design in Figma :) but at least this gave a good idea to the developer what needed to happen in each state.

See more about the UniWhales to Cielo rebrand and Design system - https://www.behance.net/gallery/153895289/UIUX-Case-Study-Cielo-Onchain-Social-Feed-Analytics