About
Green Design System is the design system for Skandinaviska Enskilda Banken to make it easier and faster to build beautiful digital products and experiences under the SEB brand.
What is Green?
Green Design System is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.
In order to have velocity when building digital products and keep a cohesive user experience cross channels and platforms designers and developers should use the Green Design System.
By using pre-built components for design tools and front-end frameworks the time teams spend designing and building is minimized. Instead of spending time on building and re-building the same components in multiple teams, teams can spend that time on addressing specific user needs to improve user experience.
The design system is called Green as an homage to SEB being viewed as the green bank with green as a primary colour for the brand and the bank. The bank also plays a great role in the transition to a net zero society and has a focus on sustainability and helpingit's clients to become more sustainable. The design system initative was also seen as a Greenfieldproject.
How Green works
The Green Design System is a federated design system where the Green Design System Team is the central team who is dedicated to maintain the design system and other team at SEB or external contributors contribute to the design system with insights, design andcode.
Maintaining and educating
Navigating the world of Green Design System involves more than just design and code. Delve into our Figma libraries, explore diverse code implementations, and leverage our comprehensive documentation. We're committed to supporting your journey with coaching sessions tailored for both design intricacies and development challenges.
Figma is our go to design tool and we maintain multiple Figma libraries, components and variables.
Green supports both Angular and React but the core is built with Webcomponents using Lit.
We use this site to document how to use our design kits and coded components as well as our design patterns and general user interface guidelines.
We know that learing and using a new system can be hard and we are here to help and make your journey in the design system a more pleasant one.
Some problems that you run into can be too large to use your keyboard to explain so we have ongoing coaching sessions at your disposal. We have two different coaching session regarding design and development at SEB: Green Coaching and CX Coaching. Both of these meetings are slot based meeting where you bring your questions and problems and discuss them with members from the Green Design System team.
- – Book Green Coaching
- –Book CX Coaching
Built on contributions
Green Design System is built on contributions from everyone. Product teams at SEB have the best knowledge what their product's end user needs. That's why it's vital that everyone contributes with what's possible. That can be everything from insights regarding a specific component or pull requests with a complete feature or a design updates in a Figma branch.
Contact us
We want to hear from you so don't be a stranger. You can always reach out to us in the following ways:
- — Ask in our Teams channel
- — Post an issue on Github
- — Email us at greendesignsystem@seb.se