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:

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

Package name		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

📋 Table of content

📚 Documentation

Documentation currently resides in a few different locations:

🏦 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

seb-oss/green