デザイントークン

デザイントークンは、Kaze デザインシステムのビジュアル言語を定義する基盤となる値です。 すべてのコンポーネントと画面で一貫性を保つために使用されます。

カラー: ニュートラルスケール（zinc-*）

zinc-50
#faf9f7
zinc-100
#f5f3f0
zinc-200
#e7e4df
zinc-300
#d6d2cc
zinc-400
#a8a29e
zinc-500
#78716c
zinc-600
#57534e
zinc-700
#44403c
zinc-800
#292524
zinc-900
#1c1917
zinc-950
#0c0a09

ステータスカラー

positive
#10b981
negative
#ef4444
warning
#f59e0b
info
#3b82f6

タイポグラフィ

フォントスタック

--font-sans
var(--font-sans)

風のように軽やかなデザインシステム Kaze

--font-display
var(--font-display)

見出しと大きな数値 1,234,567 Kaze

--font-sans と同じ書体です。以前のバージョンとの互換のために残しています。

--font-mono
var(--font-mono)

風のように軽やかなデザインシステム Kaze

フォントサイズ

2xs (11px)風のように軽やかな
xs (12px)風のように軽やかな
sm (13px)風のように軽やかな
base (14px)風のように軽やかな
md (16px)風のように軽やかな
lg (18px)風のように軽やかな
xl (20px)風のように軽やかな
2xl (24px)風のように軽やかな
3xl (28px)風のように軽やかな
4xl (34px)風のように軽やかな
5xl (40px)風のように軽やかな

スペーシング

--space-1 (4px)
--space-2 (8px)
--space-3 (12px)
--space-4 (16px)
--space-5 (20px)
--space-6 (24px)
--space-8 (32px)
--space-10 (40px)
--space-12 (48px)
--space-16 (64px)
--space-20 (80px)
--space-24 (96px)

角丸

radius-sm
6px
radius-md
8px
radius-lg
10px
radius-xl
12px
radius-2xl
16px
radius-full
9999px

シャドウ

shadow-xs
var(--shadow-xs)
shadow-sm
var(--shadow-sm)
shadow-md
var(--shadow-md)
shadow-lg
var(--shadow-lg)
shadow-xl
var(--shadow-xl)

トランジション

持続時間

--duration-fast 100ms
--duration-normal 150ms
--duration-slow 200ms
--duration-slower 300ms

イージング

--ease-default cubic-bezier(0.4, 0, 0.2, 1)
--ease-in cubic-bezier(0.4, 0, 1, 1)
--ease-out cubic-bezier(0, 0, 0.2, 1)
--ease-in-out cubic-bezier(0.4, 0, 0.2, 1)

密度（Density）

data-density="compact" をルート、または任意のコンテナに付与すると、コントロール高・行パディング・UI フォントサイズ・行間が一段階詰まります。カスタムプロパティは子孫要素に継承されるため、 どの階層に付けても効きます。data-theme （ライト / ダーク）とは独立した軸なので、自由に組み合わせられます。

通常密度（既定）
担当者ステータス金額
相楽 実咲完了¥12,000
堀内 昌平保留¥8,400
compact（data-density="compact"）
担当者ステータス金額
相楽 実咲完了¥12,000
堀内 昌平保留¥8,400

密度トークン

--density-control-height 2.25rem → 2rem
--density-row-py var(--space-3) / 12px → var(--space-2) / 8px
--density-row-px var(--space-4) / 16px → var(--space-3) / 12px
--density-font-size-ui var(--font-size-sm) / 14px → var(--font-size-xs) / 13px
--density-line-height-ui var(--line-height-normal) / 1.5 → var(--line-height-snug) / 1.375
--density-nav-py var(--space-2) / 8px → var(--space-1-5) / 6px
--density-nav-gap var(--space-2-5) / 10px → var(--space-2) / 8px
--density-dropdown-py var(--space-1-5) / 6px → var(--space-1) / 4px
--density-tab-py var(--space-2) / 8px → var(--space-1-5) / 6px