Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/serendie/serendie

Adaptive UI component library and design tokens as part of Serendie Design System by Mitsubishi Electric
https://github.com/serendie/serendie

ark-ui design-system design-systems design-tokens panda-css style-dictionary ui-components

Last synced: 3 days ago
JSON representation

Adaptive UI component library and design tokens as part of Serendie Design System by Mitsubishi Electric

Host: GitHub
URL: https://github.com/serendie/serendie
Owner: serendie
License: mit
Created: 2025-01-16T09:54:02.000Z (25 days ago)
Default Branch: main
Last Pushed: 2025-02-06T03:47:20.000Z (4 days ago)
Last Synced: 2025-02-06T04:21:52.771Z (4 days ago)
Topics: ark-ui, design-system, design-systems, design-tokens, panda-css, style-dictionary, ui-components
Language: TypeScript
Homepage: https://serendie.design
Size: 24.9 MB
Stars: 14
Watchers: 1
Forks: 0
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        


  

    

    

  





[![GitHub](https://img.shields.io/github/license/serendie/serendie?style=flat)](https://github.com/serendie/serendie/blob/main/LICENSE)

[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](https://storybook.serendie.design/)

[![X](https://img.shields.io/twitter/follow/SerendieDesign)](https://x.com/SerendieDesign/)



[Serendie Design System](https://serendie.design/)は、多様な事業と人々をつなぎ、新たな価値を生み出すための三菱電機によるオープンなデザインシステムです。デザインと開発の共通言語となるデザイントークン、それをベースにしたUIコンポーネント集「Serendie UI」、アイコン集「Serendie Symbols」などを提供しています。

## About

このリポジトリは次の3つから構成されるモノレポです。それぞれのパッケージは独立して使用可能です。詳細は各READMEを参照してください。

| Package name  | Location | Description |

| --- | --- | --- |

| `@serendie/ui` | [/ui](/ui/) | [Serendie UI Kit (Figma)](https://www.figma.com/community/file/1433690846108785966)と対となるReactベースのUIコンポーネント集(Figma Code Connectに対応) |

| `@serendie/design-tokens` | [/design-tokens](/design-tokens/) | [W3C Design Token Format Module](https://serendie.design/foundations/design-tokens/#section-6)の仕様で定義されたSerendie UIのベースとなるデザイントークン |

| `@serendie/style-dictonary-formatter` | [/style-dictonary-formatter](/style-dictionary-formatter) | デザイントークンを各プラットフォームに展開するための[amzn/style-dictonary](https://github.com/amzn/style-dictionary)のフォーマッタ |

また以下の関連リポジトリがあります。

| Package name  | Location | Description |

| --- | --- | --- |

| `@serendie/symbols` | [serendie/symbols](https://github.com/serendie/serendie-symbols) | Serendieらしい300種類以上のSVGアイコン集 |

| `@serendie/figma-utils` | [serendie/figma-utils](https://github.com/serendie/figma-utils) | Figma REST APIを用いて、`@serendie/design-tokens`とFigma Variablesの同期を行うためのユーティリティー集 |

## Examples

主要パッケージの導入サンプルとして、[serendie/bootcamp](https://github.com/serendie/bootcamp)を用意しています。また三菱電機内ではハンズオン形式で使い方を紹介するブートキャンプを開催しています。

## Adapting to sub-brands

Serendie Design Systemは[三菱電機の有する多様な事業に適応](https://serendie.design/about/#section-3)することがコンセプトの一つです。

`@serendie/desigon-tokens`および`@serendie/ui`は、デフォルトでSerendieのVisual Identity (VI)を継承しますが、各事業ブランドのVIに合わせてテーミングできるよう社内向けに[serendie/subbrands-template](https://github.com/serendie/subbrands-template)を整備しています。

詳しくはSerendie Design Systemチームまでお問い合わせください。

## License

各パッケージはMITライセンスの下で配布されています。 詳しくは[LICENSE](/LICENSE)を参照してください。