This epic is part of our Q2 roadmap #6161, Q3 roadmap #7166, Q4 2022 roadmap: #8399 & Q1 2023 #9090

Description

The idea is to create a framework to open the design process to the community. Alongside the fact that ethreum.org is an open-source project, we think the design should be too.
This is a "new concept" for the design field. There is room to be continuous improvement.

**Proposal on how it will work **

Based on the same workflow for the code, PRs and issues, we will try to build a similar system, but with Figma in the mix.

Github will be the center and the base for all proposals and discussions. It can probably be used to create new PRs code in the sense that it will be implemented.

Goals

• Improve the overall site design
• Better consistency across the pages
• Improve the user experience
• Bring the community closer to the project
• Design in the open for full transparency of the process

Checklist

• Have a community call to discuss this framework and get feedback.
• Create the de base design system.

Q2 update
We have been working on the Design System on Q2 2022, and we achieved the goals:

• Create the base Figma file (https://www.figma.com/file/NrNxGjBL0Yl1PrNrOT8G2B/ethereum.org-Design-System?node-id=0%3A1)
• Create the Foundations for Color, Typography, Spacing, Illustrations, Brand, and Layout base.

With this base file, we can start creating the components, all based on these core foundations.
Remember that some decisions were made with future migration to Chakra UI. These impact the spacing, media queries, and design token rules. This migration is not scheduled yet but probably will happen during Q3 and Q4.
The Design system should be ahead of that migration to take advantage of the rework of some components and push minor design improvements that will make ethereum.org more cohesive and appealing and improve the overall user experience.

Q3 Main goals
The team will continue to work on this EPIC this quarter, with the main tasks already planned:

• Create the header Component.
• Create the Footer Component.
• Create the Hero Component.
• Improve the gradients in the color library.
• Publish the file on the Figma community.

We will have more tasks that can have an awesome contribution to the community. We will prepare an easy-to-use and track way of contributing to the ethereum.org design system.

Q4 Main goals
The team will continue to work on this EPIC this quarter, with the main tasks already planned:

• Create the template for an MD-based page.
• Add Accordion components
• Add left navigation component
• Add the modal component
• Add the full-width section component, like the one used on the homepage
• Update the file on the Figma community
• Community call on Design focus on the DS system to plan future contributions
• Plan and prepare the Figma to code EPIC to start in Q1 2024

Q1 2023 Update

This Epic is close to the end of the V1.
We made some changes to the planning of the design system to have smaller epics and more collaborations from the community.

To achieve a tangible and usable V1, we are closing the documentation and then calling as a closed version and publishing.

Here are some details from the overall planning and achievements for the Design System V1 here using some simplified slides: (full version here)

The overview of the Design System V1

High-level uses for different personas to start to use the Design system V1

Zoom out approach to V1, V2 and V3

The overall comparison and evolution of the three versions before having a finished version of the Design System.

The next steps are:

• Improve overall documentation
• Change the readme.md to add this to the “ways to contribute”
• create a new issue for V2