Epic: Implementation of the Design System

[pettinarip]

This is an epic that makes up part of the ethereum.org Q1 roadmap

Description

Now that the first version of our Design System is complete and we have already migrated most of the UI components to Chakra, we can proceed with implementing the DS on ethereum.org. Our DS is a set of guidelines and reusable components that will help ensure a consistent and user-friendly experience across the website.

To implement the DS, we will follow the same structure we used in its development. We’ll break down the implementation process into three stages:

• [ ] #9548 - In the first stage, we will focus on integrating core components and the foundation styles.
• [ ] #11117 - The second stage will involve adding more complex or composed components, and adapting existing ones as needed.
• [ ] Implement DS v3 - Finally, in the third stage, we will focus on special pages that have custom designs. For instance, the Layer 2 and Find a Wallet pages.

For more information about our DS and the migration to Chakra, check out the links below:

• Design System: https://github.com/ethereum/ethereum-org-website/issues/6284
• Migration of UI components: https://github.com/ethereum/ethereum-org-website/issues/6374

New folder structure for new components

Since we've incorporated Storybook and Chromatic into our workflow, from now on we need to create stories for every component we create or modify based on the DS.

// at the end of the implementation, all components should have
// the following structure

components/
  NewComponent/
    index.tsx
    NewComponent.stories.tsx

Going forward, any changes made to the UI will require approval or denial on Chromatic, which will become an additional step in our review process.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity.