Tabs

Tabs are a of temporary navigation that relate to each other. Tab position and content are dependent on what the user chooses.

Tabs on the Modeling Canvas

It should be clear which tab is active, and which are not. The active tab should be brigher in colors and have more contrast from the tabs behind it. This can be enhanced by adding an additional visual flourish, such as the teal colored accent shown below.


Styling and Colors

Spacing Within a Tab

Alignment and top corner radius

Spacing between multiple tabs

Use consistent spacing between tabs.


Tabs in Tools Panels

It should be clear which tab is active, and which are not. The active tab should be brigher in colors and have more contrast from the tabs behind it.


Spacing

Active Vs Inactive

Tabs in Validation Panel

The validation panel at the bottom of the canvas doesn't have a default tab selected. There should be a visual indicator on hover that highlights the tab that will be selected. Upon selection, that highlight color should extend to the rest of the selected panel.


Default

Active Tab