Chlorophyll
- Role
- Developer・Designer
- Stack
- React · TypeScript · Panda CSS · Ark UI
- Year
- 2025 — Present
- Status
- Active (WIP)
- Document
- Chlorophyll Docs（Theme）
- Source
- morinoparty/Chlorophyll
概要
Chlorophyllは、もりのパーティ向けに開発しているトークンベースのデザインシステムです。 Panda CSS と Ark UI を土台に、Webプロダクトやドキュメントサイト全体で配色・タイポグラフィ・コンポーネントの見た目を揃えることを目的としています。
制作背景
コミュニティ運営では、公式サイト・社内ツール・ドキュメントなど複数の画面が増えていく一方で、それぞれ別々のスタイルが混在しやすくなります。私が所属するもりのパーティでも、Webサイトやリニューアル中の公式Wiki、Moripathと呼ばれるアプリケーションなどで、ブランドイメージを統一するために共通のトークンとコンポーネントを用意したいと考えていました。
そこで、Panda CSS でテーマとプリセットをまとめ、Ark UI をヘッドレス層として React コンポーネントを組み立てる Chlorophyll を進めています。単なる UI キットではなく、セマンティックトークン（System Tokens）が参照トークン（Reference Tokens）にマッピングされる構造で、配色や余白・タイポグラフィの決め方をドキュメント化し、実装とデザインの共通言語にしたいと考えています。これにより、AIなどを利用したデザイン支援や、デザイナーとエンジニアのコラボレーションを促進していけると考えました。
デザイントークンとドキュメント
トークン設計の考え方は、Chlorophyll の Theme ドキュメントにまとめています。System Tokens（用途ベースのセマンティック値）と Reference Tokens（パレットやタイポの土台）に分け、コンポーネントからはまずセマンティック側を参照するイメージです。カラー・ボーダー・タイポグラフィ・z-index・シャドウ・角丸・スペーシング・アニメーションなど、カテゴリごとの説明もそこから辿れるようにしています。
チームで Panda のプリセットを配布し、各アプリの styled-system に取り込む、またはChlorophyll側で用意する予定のコンポーネントを活用した運用を想定しています。追加するコンポーネントについては、一般的なWebアプリケーションで使用されるボタンなど以外にも、Minecraftサーバー特有のコンポーネント(具体的にはプレイヤーのスキンの表示など)を考えています。
UI品質検証とCI
コンポーネントの作成および評価のためにStorybookを使用しています。Storybookでは、アクセシビリティテストのためのアドオンがあり、axe-coreライブラリをベースに構築されています。Chlorophyllでは、axe-coreのcolor contrast checkを従来のWCAG 2.xベースの判定からAPCA（Accessible Perceptual Contrast Algorithm）へoverrideし、より知覚に近いコントラスト評価を行えるようにしています。
この検証はローカルのStorybook上での確認だけでなく、GitHub Actions上でも実行しています。CIではA11yテストに加えてVRT（Visual Regression Testing）も回し、コンポーネントやトークンを変更した際に、アクセシビリティと見た目の差分を継続的に評価できるようにしています。デザインシステムとして提供するUIの品質を保ちながら、変更の影響を確認しつつ改善できる体制を整えています。