New diagrams > the purple era

[nloureiro]

Based on the work done for the MEV diagrams and the colors, this issue aims to create a new language for the diagrams.

To be taken into account:

• they need to be vector-based on Figma
• text editable
• follow the color of the design system
• all the text needs to have proper contrast and readability
• as much as possible, the diagram should be readable on the page without the need to zoom in to read the text

Important update from the existing images. Up until now, we have used the same image on both themes (dark and light), but with this update, we will introduce the ability to export two versions of the diagram for the same "image," one optimized for the dark theme and another for the light theme. This is a prerequisite code update for using these images in production. Creating them on Figma should have this update as a new feature.

Base Figma file. https://www.figma.com/design/r8ZMhxQhoMdASMk2VKeimM/new-diagrams-system?node-id=1-5563&t=6ekoJWh3I67BmWYQ-1

[LauraSinisterra]

Great! Are there brand guidelines for the new theme?

[nloureiro]

Great! Are there brand guidelines for the new theme?

Not a strict one. The design system and the website are our guides.

On the design system Figma, I have a brand artboard that lays down the logo colors, but I don´t use them on the UI.

For typography, we are using the same design system.

Link to the design system: https://www.figma.com/design/NrNxGjBL0Yl1PrNrOT8G2B/ethereum.org-Design-System?node-id=16-58&t=3ReySEJl8Bx6CM9f-1

Previous diagram system for reference: https://www.figma.com/design/Hj8Hnc6TYBs8GDxfdcCtqW/Diagrams-and-schematics?node-id=122-27&t=5Itm5hAQYYVkxjXN-1