A design system is a set of standards to manage design at scale. In Green Design System this set of standards consists of a collection of reusable coded components, documented design patterns and user interface guidelines. At SEB, we streamline the development process by consolidating the essential building blocks (components) of digital applications into a single, shared system accessible by all product teams. Utilising pre-built components and assets from this design system not only reduces design and development time but also ensures adherence to SEB's latest digital design and accessibility standards.

Design, Code & Guidelines

Green consists of three core areas and eight areas of excellence. The three core areas are: Design, Code and Guidelines.  

Design

The design part resides in the design tool Figma where components are designed and constructed in such a way that they can be reused in Figma design files within the SEB organization. When components in Figma get an updated design, this will propagate to all Figma design files. This is done with Figma libraries. You can read more on how we work with Figma libraries here.

Code

The coded components are built in JavaScript frameworks for the web and governed, distributed and versioned by the Green Core Team. The components are tested with automated component tests as well as manually accessibility tested and reviewed with assistive technologies.

Guidelines

Our guidelines consist of user interface guidelines, component documentation and common design patterns. This information is documented in the Design Library and Storybook.  

Areas of excellence

In the process of developing reusable components, numerous considerations must be taken into account. To ensure no crucial aspect is overlooked during component creation, we have devised a comprehensive checklist encompassing eight distinct areas of excellence.

The eight areas of excellence are:

• Accessibility
• Writing
• UX
• Visual design
• Code
• Documentation
• Mobile
• Internationalization

A design system built with contributions  

Green is built by everyone at SEB and for everyone at SEB. Having a decentralized design system where components are contributed by teams avoids speedbumps when building products since you can create needed components within the team and then contribute them to the design system.   If all components were built by the design system team and every other team would have a dependency on this team, it would create a bottleneck slowing down the whole organization since the design system team would not be able to keep up with demand.   Read more about how the Contribution Process works here.

Knowing your customer and product

The development teams at SEB know its product better than anyone else. They also know their user/customer better than anyone else. All this knowledge is crucial to create the best solution and component for the job. A design system team is good at building reusable components but does not have all the insights to create the best solution. That is why components need to be contributed by the ones who have the knowledge and can create the solution.

Securing consistency and quality

As multiple teams contribute to a shared system, it is essential to uphold uniformity and quality in components, documentation. The Green Core Team's governance function addresses this need by fine-tuning contributions to ensure compatibility with the design system's architecture and facilitating component reusability for all teams within the bank.  The Green Core Team also maintains the processes around contributing to the design system, life cycle management as well as support functions like coaching meetings, co-pilot initiatives and our teams' channels.

Contact us

Do you have a question? Have you found a bug? Scroll further down for our contact information.

Contribution Process

A process for contributing features and components to Green Design System

To keep things structured and make it easy for contributors we have created a five-step process for contributing new features or components:

1. Need for feature
2. Green Co-pilot
3. Implementation
4. Review
5. Distribute

Contribution process

Step one: Need for a feature

The first step in the process starts with a need from an end-user or a team for a specific feature or component. This need should be defined by the contributor in a couple of sentences so it can be communicated to the Green core team for further discussion.  

Step two: Green Co-pilot

In this step we assign a Co-pilot from the Green core team to help the contributor through this whole process. Creating features in a design system is complex so having a co-pilot to guide you around and ask questions when needed helps a lot. In this step we also hand out a checklist that helps you during implementation.

Introduction to the Green Design System and to a Co-pilot is done during a Green coaching meeting. A slot based support meeting for users of the design system. You can book Green coaching in the Book a session channel in teams. Check the tabs at the top of this channel.  

Step three: Implementation

This is the big one. Creating a component is not for the faint-hearted and creating reusable ones in a design system even less so. In this step design, development and accessibility testing goes back and forth. The Co-pilot is here to help keeping things aligned with the design systems structure while the team is solving a problem for an end-user.

During this step you can get support from Green core team members through Green coaching or from CX coaching which another slot based meeting aimed to support teams with UX expertise.  

Step four: Review

To verify that the implementation meets the requirements of our areas of excellence the Green core team reviews the feature before it is merged into the design system. 

Step five: Distribute

If the component meet the requirements it's merged into the design system and communicated to everyone that it's available for designers and developers to use. 

Green coaching

To get started with contributing, define a need for a feature and book a Green coaching slot in Teams.

Have a question regarding our design system? The Green core team is here to help you. But before you send us a message, be sure to check out our resources and see if we've already covered your topic.

Provide a suggestion or contribution

The Green core team governs the design system and supports users of the design system. If you have an issue, suggestion or contribution find a link below that most closely matches your need for the quickest response.

Design issues

• Components (Requires SEB Figma)
• Green Design Teams channel

Code issues

• Github
• Green Code Teams channel

Teams channels

For internal SEB users only.

The Green core team maintains the following channels and will provide support there on as time permits. Please search Teams, Github or Figma to see if your questions have already been addressed before posting in the channel.

• For designers: Green Design
• For developers: Green Code