equinor/design-system-roadmap

Public roadmap for the Equinor Design System

design-system-roadmap

Public roadmap for the Equinor Design System

design-system-roadmap's Issues

Mobile components group 4 of 4

Typography tokens 1.0

This marks the full release of typography tokens in Figma, transitioning them from beta to full release status. Building upon the foundation laid during the beta phase, we now introduce typography tokens as a key foundation in our design system. These tokens serve as standardised units for typography, enhancing consistency and efficiency in our design processes. Product designers are empowered to create interfaces with thorough designed typography.

Mobile components group 1 of 4

• #25
• #26
• #27
• #28
• #29

CSS library

Building on our spike exploring a new styling strategy, we aim to develop and implement a CSS library. This library will align seamlessly with various front-end technologies, providing a smoother experience for developers across different frameworks. By adopting this new styling strategy, we aim to streamline the styling process, enhance code maintainability, and ultimately improve developer productivity.

Core components in Figma

Spacing tokens

New strategy for styling

In response to feedback from our front end developers regarding styling challenges and preferences for a more intuitive approach to CSS, we are initiating a spike to explore a new strategy for styling. This spike aims to introduce a CSS library that aligns well with various frontend technologies, offering a smoother and more developer-friendly experience across different frameworks.

Core components in code

Core component will be implementing in code, aligning with our new strategy for code components. Our aim is to provide developers with enhanced flexibility and choice in their development process. Through the implementation of core components in code, we empower developers to seamlessly integrate design elements into their projects while maintaining a 1:1 correspondence with Figma components. This approach ensures that our design system remains scalable and future-proof, facilitating smoother development workflows.

Colour tokens in code

This spike focuses on investigating the implementation of colour tokens in code, aligning with the colour tokens in Figma. As these colour tokens serve as the foundation for our design system and will be utilised in our EDS component library in Figma, it's important to explore how we can best integrate them into our codebase.

The goal of this exploration is to identify the most effective and efficient way to implement colour tokens in code, ensuring consistency and scalability across our design system and development processes.

In order to manage design by scale and align our end users experience on apps, I need to build a proposal for tabs components

Spacing tokens

This marks the full release 1.0 of spacing tokens within our Figma library, transitioning them from beta to full release status.
With this full release, we establish a fundamental element of our design system, providing designers with access to standardised spacing units that promote visual coherence and streamline the design workflow. By integrating spacing tokens into our Figma library, designers can efficiently manage spacing across all design elements, ensuring consistency and alignment with our design principles.

Typography component in Figma

To provide our product designers with well-crafted typography options, we are initiating the development of typography components while awaiting the release of typography variables in Figma. These components will lay the foundation for typography tokens. By ensuring consistency and efficiency in our design processes, we empower product designers to create interfaces with carefully curated typography components, including font, size, weight, line height, padding and more.

In order to manage design by scale and align our end users experience on apps, I need to build a proposal for table items components

Spacing tokens

In order to maintain consistency and efficiency in our design process, we need to create spacing tokens within our Figma library.
The beta release of spacing tokens represents a significant step towards streamlining our design workflow and maintaining consistency in our user interfaces. Designers will get access to standardised spacing units, facilitating a more efficient design process and promoting visual coherence.
As part of the beta release, we will invite designers to explore and provide feedback on the usage of spacing tokens in Figma.

• Analyse and define spacing design standards
  Assess design needs and establish clear standards for spacing design tokens across all elements.
• Implement spacing design tokens
• Document spacing design decisions
  Capture the reasoning behind spacing design decisions and provide documentation for designers.
• Test spacing design token implementation
  Conduct user testing to ensure accuracy and effectiveness of the implemented spacing design tokens.

Colour tokens in code beta

Core components in Figma

This task mark the full release 1.0 of the new core components in Figma, transitioning them from beta to full release status. These components are carefully designed to provide designers with updated elements built on our new design tokens.
As part of the full release, we will prioritise the development of components based on their importance and frequency of use. This phased approach ensures that we deliver value to our design community, gathering feedback and iterating as we progress through the release cycle.

Colour tokens in Figma

This task marks the official launch of the EDS 2.0 Colour Tokens in Figma 1.0 from beta to full release. These colour tokens serve as the foundation for our design system and will be utilised in our EDS component library in Figma.
The beta release has undergone testing and feedback collection, resulting in the development of the new variable libraries for colours. These libraries offer support for both light and dark modes.

With this release, the colour tokens are ready for production use, marking a significant milestone in our design system's evolution.

Colour tokens

EDC App

Typography tokens

We will implement typography tokens in Figma, building upon the foundation laid by the development of typography components. With Figma's launch and support of typography tokens, we're positioned to create a variable library that streamlines typography management within our design system. These tokens will enhance consistency and efficiency, empowering product designers to create interfaces with thoroughly designed typography.
We will prioritise collaboration with our design users to gather feedback and refine the typography tokens to meet their needs and preferences.

In order to manage design by scale and align our end users experience on apps, I need to build a proposal for menu items components

In order to manage design by scale and align our end users experience on apps, I need to build a proposal for chips components

Colour tokens in code 1.0

We will be implementing colour tokens in our codebase, building upon the findings and recommendations from the spike exploration. With the foundation laid by the launch of colour tokens in Figma, it's important to integrate them into our codebase to ensure consistency and scalability across our design system and development processes.

EDS 2.0 tokens in EDS 1.0 code components

We need a strategy that encourages early adaptation of EDS 2.0. In order to do that we need EDS 1.0 components to use the EDS 2.0 tokens when they’re present. One way to do that is to insert CSS hooks in the token files with a fallback to the 1.0 tokens, so that if the application does not use the EDS 2.0 themes nothing happens, but if it does then the EDS 2.0 themes take precedence. I suggest focusing on colours and typography first and foremost. For the density modes we can consider saving that purely for EDS 2.0 apps.

Core components in Figma

To provide designers with updated components built on our new design tokens, we are rebuilding and building the core components in Figma for a new upgraded version of our library, termed EDS 2.0. This initiative is rooted in our updated design foundations, leveraging the latest possibilities within Figma to create a more robust and efficient design ecosystem. By utilising the new capabilities within Figma, such as auto layer and properties, we aim to enhance the usability and flexibility of our component library, empowering designers to create cohesive and visually compelling interfaces with ease.
Throughout this process, we prioritize the development of components based on their importance and frequency of use. This phased approach ensures that we deliver value to our design community in a step-by-step manner, gathering feedback and iterating as we progress through the beta release.

Designers will be encouraged to explore the beta release of EDS 2.0 core components in Figma, providing valuable feedback to further refine and improve our design system. This marks a crucial step towards achieving consistency and functionality in our user interfaces, aligned with the new look and feel of EDS.

In order to manage design by scale and align our end users experience on apps, I need to build a proposal for button components

General objective:
Alignment to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different user experiences.

Specific objectives:

• To ensure a UX with common visual patterns.
• To ensure better safety standards when it comes for UI.
• To design interfaces with familiarity and consistency so users understand and navigate it easily.

To consider:

• Make definitions about how to apply EDS 2.0 foundations on mobile buttons.
• Make definitions about a logical structure for mobile buttons.
• Make definitions about the spacing and typography variations for mobile buttons.
• Make definitions about how color will be implemented depending on the IA for mobiles.

Owner: @marinalinn

Colour tokens in code

New strategy for code components

In order to give developers more flexibility and choice in their development process, we're exploring web components as a new strategy for code components. This initiative aims to increase flexibility and compatibility of our design system across different programming languages and frameworks.

Mobile components group 2 of 4

Mobile components group 3 of 4