Kaze Design System

数字と日本語を、一日中読み続ける画面のために。白と温かみのあるグレーでまとめた、React のデザインシステムです。

コンポーネント
78

9カテゴリのコンポーネントで
あらゆるUIを構築できます。

フォーム 14(19%)、データ表示 9(12%)、チャート 8(11%)、フィードバック 6(8%)、ナビゲーション 7(10%)、オーバーレイ 7(10%)、レイアウト 8(11%)、リスト 3(4%)、マーケティング 11(15%)
サンプルページ
21

ダッシュボードからLP、メールまで
実践的なサンプルを収録。

SaaSLPAppMail他
カラーシステム
12×10

12色相 × 10階調のカラーパレットに、温かみのあるニュートラルグレーの 11段階。テーマを切り替えると配色が自動で変わります。

12色相 × 10階調
ニュートラル 11段階

Kaze の特徴

開発のしやすさと使い心地の両方にこだわった、モダンなデザインシステム。

23KB

軽量設計

スタイリングは純粋な CSS で、CSS-in-JS のランタイムが不要。gzip 約 23KB の軽量パッケージです。

import "kaze-design-system/css/all";

ダークモード対応

ライト・ダークの切り替えは属性ひとつ。すべてのコンポーネントが自動で配色を合わせます。

日本語に最適化

日本語の文章に合わせた行間・文字間・フォント設定。読みやすく美しい画面を手軽に作れます。

78のコンポーネント

Foundation の上に、Application UI と Marketing の2つのカタログを揃えています。

Application UI62 コンポーネント
フォーム
14 コンポーネント
データ表示
9 コンポーネント
チャート
8 コンポーネント
フィードバック
6 コンポーネント
ナビゲーション
7 コンポーネント
オーバーレイ
7 コンポーネント
レイアウト
8 コンポーネント
リスト
3 コンポーネント
Marketing11 コンポーネント
マーケティング
11 コンポーネント

さっそく使ってみる

npm からインストールして、いまのプロジェクトで試せます。MIT ライセンスのオープンソースです。