Green Design System

Green is an open-source design system built by SEB.

Getting started

If you are new to Green, checkout @sebgroup/green-core.

We also provide components for the following technologies:

• React
• Angular

If you're trying to find something specific, here's a full list of packages that we support!

Package name	Latest stable version		Description
@sebgroup/green-core		Changelog	Web Component library built with Lit
@sebgroup/green-react		Changelog	React component library
@sebgroup/green-angular		Changelog	Angular component library
@sebgroup/chlorophyll		Changelog	Styling framework
@sebgroup/green-tokens		Changelog	Design Tokens package
@sebgroup/green-charts		Changelog	An SEB wrapper of Billboard.js
@sebgroup/green-react-charts		Changelog	A React version of the charts wrapper
@sebgroup/green-angular-charts		Changelog	An Angular version of the charts wrapper
@sebgroup/fonts		Changelog	This package contains SEBs primary font SEB SansSerif

📋 Table of content

• Documentation
• Working from SEB
• Contribute
• Working locally with this repo

📚 Documentation

Documentation currently resides in a few different locations:

• User Interface Guidelines (Design Library)
• Storybook (@sebgroup/chlorophyll)
• Storybook (@sebgroup/green-core)
• Storybook (@sebgroup/green-react)
• Storybook (@sebgroup/green-angular)

🏦 Working from SEB

Working from SEB and on SEB machines you need to setup things in a specific way for everything to work smooth. Checkout our Developer Guidelines over at Developer Garden.

🎉 Contribute

We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide! 👀

🔨 Working locally with this repo

Start Storybook locally

To start Storybooks locally on your machine you run the following command:

npx nx run [PROJECT]:storybook

Where you replace [PROJECT] with a folder name from green\libs.

So to start Storybook for each component library run:

npx nx run chlorophyll:storybook
npx nx run core:storybook
npx nx run react:storybook
npx nx run angular:storybook

If you install nx globally you can omit the npx above.

# Install nx globally
npm install nx -g

# And start the storybooks
nx run chlorophyll:storybook
nx run core:storybook
nx run react:storybook
nx run angular:storybook