カラー

CodeConnect Design Systemのカラーシステムは、style-dictionaryで管理されたデザイントークンに基づいています。一貫性のあるカラーパレットにより、ブランドアイデンティティを保ちながら、アクセシブルなUIを実現します。

ブランドカラー

プライマリーアクションや強調表示に使用するブランドカラー。

Brand Base

#1c71b9

var(--color-brand-base)

メインブランドカラー

Brand Hover

#155a96

var(--color-brand-hover)

ホバー時のブランドカラー

Brand Active

#0f3a5e

var(--color-brand-active)

アクティブ時のブランドカラー

テキストカラー

テキストの階層構造を表現するためのカラー。

Text Primary

#111827

var(--color-text-primary)

メインテキスト（見出し、重要なコンテンツ）

Text Secondary

#6b7280

var(--color-text-secondary)

セカンダリテキスト（本文、説明文）

Text Tertiary

#9ca3af

var(--color-text-tertiary)

三次テキスト（補足情報、キャプション）

背景カラー

レイアウトの階層を表現するための背景カラー。

Background Primary

#ffffff

var(--color-bg-primary)

メイン背景

Background Secondary

#f3f4f6

var(--color-bg-secondary)

セカンダリ背景（カード、パネル）

Background Tertiary

#e5e7eb

var(--color-bg-tertiary)

三次背景（ホバー状態）

ボーダーカラー

要素の境界を明確にするためのボーダーカラー。

Border Primary

#e5e7eb

var(--color-border-primary)

メインボーダー

Border Secondary

#d1d5db

var(--color-border-secondary)

セカンダリボーダー（強調時）

セマンティックカラー

状態やアクションの意味を視覚的に伝えるカラー。

Success

#10b981

var(--color-success)

成功状態、ポジティブなアクション

Warning

#f59e0b

var(--color-warning)

警告、注意が必要な状態

Error

#ef4444

var(--color-error)

エラー、失敗状態

Info

#1c71b9

var(--color-info)

情報、中立的なメッセージ

Grayスケール

UI要素の構築に使用する汎用的なGrayスケール。

Gray 50

#f9fafb

var(--color-gray-50)

Gray 100

#f3f4f6

var(--color-gray-100)

Gray 200

#e5e7eb

var(--color-gray-200)

Gray 300

#d1d5db

var(--color-gray-300)

Gray 400

#9ca3af

var(--color-gray-400)

Gray 500

#6b7280

var(--color-gray-500)

Gray 600

#4b5563

var(--color-gray-600)

Gray 700

#374151

var(--color-gray-700)

Gray 800

#1f2937

var(--color-gray-800)

Gray 900

#111827

var(--color-gray-900)

使用方法

CSS変数として使用

/* カスタムコンポーネントのスタイリング */
.my-component {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
}

.my-component:hover {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-brand-base);
}

Tailwind CSSクラスとして使用

<div className="bg-bg-primary border border-border text-text-primary">
  <h2 className="text-text-primary">見出し</h2>
  <p className="text-text-secondary">本文テキスト</p>
</div>

コンポーネントのバリアント

import { Button } from '@codeconnect-llc/design-system'

<Button variant="primary">  {/* ブランドカラー */}
  Primary Action
</Button>

<Button variant="secondary"> {/* グレースケール */}
  Secondary Action
</Button>

アクセシビリティガイドライン

WCAG 2.1 AA準拠

通常テキスト: コントラスト比 4.5:1 以上
大きなテキスト (18pt以上): コントラスト比 3:1 以上
UIコンポーネント: コントラスト比 3:1 以上

カラートークン管理

style-dictionaryによる一元管理

{
"color": {
  "brand": {
    "base": {
      "value": "#1c71b9",
      "comment": "メインブランドカラー"
    }
  }
}
}

変更を加える際は、JSONファイルを編集後 pnpm build:tokens を実行してください。

次のステップ