デフォルトでアクセシブル
キーボード優先のコントロール、視認性の高いフォーカス、ARIA ステート、ライブリージョン、モーション削減サポート、高コントラストモード。
エンタープライズ向け UI プラットフォーム
TCM デザインシステム
エンタープライズ製品、複雑なフォーム、リッチメディアのワークフロー、データ量の多いアプリケーション向けの、包括的でアクセシブルなトークンドリブン・デザインシステム。
15仕様領域
120+コンポーネントとパターン
AAWCAG 目標
コンポーザブルなアーキテクチャ
トークン、コンポーネント、フォーム状態、振る舞いを分離しているため、React、Vue、Angular、Web Components などと統合可能。
エンタープライズ規模
パターンは高密度なデータグリッド、アダプティブフォーム、ファイルマネージャー、メディアプレビュー、開発者向けツールをカバー。
カバレッジマップ
仕様実装マトリクス
基盤
デザイントークンとテーマ設定
すべてのビジュアルに関する決定は、ページを再読み込みすることなく実行時に切り替え可能な CSS 変数によって制御されます。
実行時テーマスイッチャー
システム、ライト、ダーク、カスタムブランド、またはハイコントラストを選択できます。環境によっては、設定は Miniapps Storage API によって永続化されます。
トークンのライブプレビュー
Healthy
Warning
:root {
--tcm-color-primary: ...;
--tcm-radius-md: ...;
}
トークンのカテゴリ
色、タイポグラフィ、余白、エレベーション、不透明度、グラデーション、z-index、モーション、ブレークポイント。
コントロール
コア入力コントロール
エンタープライズ向けフォームビルダーのための、バリデーション付き、マスク処理、メディア対応、エディタスタイルの入力コンポーネント。
リッチテキスト、Markdown、コードエディタ
<tcm-input required validation="email" />ファイルと画像のアップロード
ここにファイルをドロップ画像、PDF、音声、動画を最大 50MB まで
カラーピッカー
署名パッド
日付、時刻、ローカライズ
レンジ、不透明度、スライダー
タグ、チップ、マルチセレクト
選択パターン
選択コントロール
単一、複数、階層、地理、ビジュアル、ウィザード形式の選択コントロール。
Checkbox, radio, toggles
Selectors
Icon, font, shape, pattern
Tree view
- Colors
- Typography
- Motion
- Inputs
- Data Grid
- Overlays
Stepper
- Account
- Permissions
- Review
Tabs and accordion
Advanced options
Expandable panels support keyboard access and nested content.
アーキテクチャ
フォームアーキテクチャ
グループ、配列、入れ子コントロール、依存関係、非同期バリデーション、アダプティブレイアウトを備えたリアクティブかつ動的なフォーム。
Dynamic form builder
Smart wizard
- Profile
- Rules
- Review
Validation and state model
インタラクション
ボタンとアクション
標準アクション、送信／リセット、アイコンボタン、ハイパーリンク、ローディング、無効状態、押下状態、アクショングループ、そして FAB スピードダイヤル。
ステータス
フィードバックとインジケーター
プログレス、スピナー、スケルトン、トースト、スナックバー、アラート、通知、バッジ、モーダル、ポップオーバー、ツールチップ。
Alerts and notifications
Scheduled maintenance Sunday 02:00 UTC.
Storage quota is above 95%.
Database connection failed. Retrying.
Progress and loading
エンタープライズデータ
表示とデータコントロール
テーブル、グリッド、インライン編集、ソート、フィルタリング、遅延読み込み、カード、リスト、ページネーション、カルーセル、ギャラリー、メディアプレーヤー。
| Service | Status | Region | Latency | Actions |
|---|
Cards and lists
- BillingUpdated 2m ago
- IdentityHealthy
- SearchIndexing
Carousel
Analytics dashboard
Media player
アセット
高度なメディア／ファイル機能
ファイルマネージャー、フォルダーナビゲーション、ドラッグ＆ドロップでの並び替え、画像/音声/動画/PDFプレビュー、圧縮および変換ワークフロー。
File manager tree
Media previewer
Select an asset
Conversion pipeline
- Validate
- Compress
- Convert
- Publish
構成
レイアウトとコンテナ
Flex、グリッド、折りたたみパネル、カルーセル、レスポンシブカラム、オートレイアウト、固定要素、オーバーフロー制御。
Responsive auto-layout playground
Collapsible panel
Panels use semantic disclosure patterns and retain keyboard accessibility.
Overflow controls
Wide content inside a contained scroll region with clear affordances.
設定
ユーティリティと設定
位置情報、地図、QR／バーコードスキャナー、天気ウィジェット、テーマスイッチャー、フォント／背景／ボーダー／シャドウのコントロール、およびアダプティブカラーモード。
Geolocation and weather
Location output appears here.
QR and barcode
Scanner-ready surface for camera integrations.
Visual settings
ランタイムモデル
フォーム — イベントと状態管理
ライフサイクルフック、バリデーションイベント、依存関係、非同期データバインディング、元に戻す／やり直し、自動保存、リカバリー、状態トラッキング、アニメーション。
Event timeline
Undo, redo, auto-save
Idle
A11Y
アクセシビリティとユーザビリティ
キーボード操作、スクリーンリーダー、コントラスト、フォーカスインジケーター、動きの軽減、デバイス間のユーザビリティに関する WCAG 2.1 AA 実践ガイド。
Checklist
Live region
Contrast AA7.8:1
アダプティブ
レスポンシブ & アダプティブデザイン
モバイルファーストのレイアウト、アダプティブなブレークポイント、タッチターゲット、スワイプ可能なタブ、キーボードフレンドリーなオーバーレイ、レスポンシブな密度。
Breakpoint tokens
Touch-friendly components
DX
開発者エクスペリエンス
TypeScript 対応、フレームワーク連携、Storybook プレイグラウンド、トークンエクスポート、テーマ API、モジュラーインポート、CLI スキャフォールディング、命名規則。
TypeScript component API
import { Button, ThemeProvider } from '@tcm/design-system';
<ThemeProvider mode="system" tokens={customTokens}>
<Button variant="primary" loading={saving}>Save</Button>
</ThemeProvider>CLI and token export
npx tcm-ui generate component data-grid
npx tcm-ui tokens export --format figma
npx tcm-ui storybook startAccessible enterprise modal
Focus is managed, Escape closes the dialog, and actions are keyboard reachable.
This action cannot be undone.
Enterprise bottom sheet
Mobile-friendly surfaces can be dismissed with a button or backdrop tap.