基礎

CodeConnect Design Systemの基盤となるデザイン原則、カラーシステム、タイポグラフィ、スペーシングルールを学びます。これらの基礎要素は、すべてのコンポーネントとレイアウトに適用されています。

デザインシステムの核となる4つの原則

ブランドカラーとセマンティックカラーパレット

フォントスケールと階層システム

一貫した余白とレイアウトシステム

Lucideアイコンの使用ガイドライン

WCAG 2.1準拠のアクセシビリティ基準

デザイントークン

すべての基礎要素はデザイントークンとして定義されており、一貫性のあるデザインを実現しています。トークンはstyle-dictionaryで管理され、CSS変数、TypeScript、React Native向けに自動生成されます。

--color-brand-base: #1c71b9;
--spacing-md: 1rem;
--font-size-lg: 1.125rem;

<div className="text-brand">
<div className="p-4">
<div className="text-lg">

デザインシステムは以下の3層構造で構成されています：

カラー、タイポグラフィ、スペーシングなどの基本的なデザイントークン

基礎要素を組み合わせた再利用可能なUIコンポーネント

コンポーネントを組み合わせた一般的なUIパターンとレイアウト

まずはデザイン原則から始めて、システムの哲学を理解しましょう。