デザインシステム
UIコンポーネント、デザイントークン、タイポグラフィ、カラースキームを一元管理。
タイポグラフィ
Inter
欧文本文・UI要素400 Regular500 Medium600 SemiBold700 Bold
The quick brown fox jumps over the lazy dog
Noto Sans JP
日本語本文・見出し400 Regular500 Medium700 Bold
アルテレクトは、AGI研究のスタートアップです。
JetBrains Mono
コード・技術表記・数値400 Regular500 Medium700 Bold
const model = await loadLLM("claude-4")
タイプスケール
H1 / 3rem見出し1
H2 / 1.875rem見出し2
H3 / 1.25rem見出し3
Body / 1rem本文テキスト
Small / 0.875rem補足テキスト
Caption / 0.75remキャプション・ラベル
スペーシング・グリッド
スペーシングスケール
2xs4px / 0.25rem
xs8px / 0.5rem
sm12px / 0.75rem
md16px / 1rem
lg24px / 1.5rem
xl32px / 2rem
2xl48px / 3rem
3xl64px / 4rem
グリッドシステム
12カラムグリッド
1
2
3
4
5
6
7
8
9
10
11
12
ブレークポイント
sm640pxモバイル（横向き）
md768pxタブレット
lg1024pxデスクトップ
xl1280pxワイドデスクトップ
2xl1536px大型モニター
コンポーネント
ボタン
カード
01
デフォルトカード
標準的なカードコンポーネント
02
ミューテッドカード
背景色付きカード
03
アクティブカード
選択状態のカード
インプット
バッジ
DefaultSuccessWarningErrorInfo
デザイントークン
--background背景
#ffffff--foregroundテキスト
#1a1a1a--cardカード
#ffffff--card-borderカードボーダー
#e5e7eb--mutedミューテッド背景
#f5f5f5--muted-fgミューテッドテキスト
#6b7280--accentアクセント背景
#f3f4f6--destructiveエラー
#ef4444このデザインシステムは継続的に更新されています。最新の仕様については開発チームにお問い合わせください。