[Documentation website] Rename tabs on documentation detail pages

[DanielleRameau]

We’ve noticed that it can be challenging for developers to find technical information on our component detail pages. To make this easier, we’re proposing a reorganization of these pages.

Proposed Solutions:

Solution 1

• Usage Tab: This tab will stay the same, detailing when to use the component, when to avoid it, its anatomy, and behavior. We’ll remove all Figma-related info to keep it focused.
• Design Tab: This new tab will be dedicated to Figma properties and design-specific details.
• Development Tab: We’ll rename the current "Code" tab to “Development” and consolidate all relevant content here.
• Accessibility Tab: This tab will remain as is, ensuring we keep our accessibility standards front and center.

Solution 2
Let’s display the example at the top of the tabs while keeping the tabs themselves below the example for easy navigation.

Solution 3
We’re open to other solutions, so let’s discuss any additional ideas during our refinement session.

Tasks

Beta Give feedback

1. make a proposal for different solutions in figma
2. ideas: change tab names, show example on top of the tabs, full width divider of tabs, put all information above the tabs in the blue hero, add footer with (next > and < previous button)
3. development
4. refactor all component detail pages

[DanielleRameau]

Diana's mockup made with the inspect tool :)