brex-ui-skills

Brex UI スキル

AI エージェントで Brex スタイルのインターフェースを構築するための、独自の制約です。

適用する場面

以下の場合に、このガイドラインを参照してください。

• ライトモードのインターフェースを構築する場合
• Brex に着想を得たデザインシステムを作成する場合
• Inter フォントと 4px グリッドを使って UI を実装する場合

色

• SHOULD 主要なサーフェスには明るい背景色を使用する
• MUST ページの背景（surface-base）に #D9D1CF を使用する
• MUST 主要なアクションとフォーカス状態（accent）に #00070D を使用する
• SHOULD カラーパレットを絞る（現在検出されている色は 13 色）
• MUST アクセシビリティのため、テキストのコントラスト比を少なくとも 4.5:1 に保つ

セマンティックトークン

トークン	HEX	RGB	用途
surface-base	#D9D1CF	rgb(217,209,207)	ページの背景
surface-raised	#FEFEFD	rgb(254,254,253)	カード、モーダル、浮き上がったサーフェス
surface-overlay	#FF4206	rgb(255,66,6)	オーバーレイ、ツールチップ、ドロップダウン
text-primary	#D98C71	rgb(217,140,113)	見出し、本文テキスト
text-secondary	#F3AB84	rgb(243,171,132)	セカンダリテキスト、控えめなテキスト
text-tertiary	#949397	rgb(148,147,151)	補足テキスト
border-default	#DFE0E1	rgb(223,224,225)	控えめな境界線、区切り線
destructive	#D98C71	rgb(217,140,113)	エラー状態、削除アクション
accent	#00070D	rgb(0,7,13)	主要なアクション、リンク、フォーカス
warning	#FEFEFD	rgb(254,254,253)	警告状態、注意喚起

タイポグラフィ

• MUST プライマリフォントファミリーとして Inter を使用する
• SHOULD 一貫性を保つため、フォントファミリーを 1 つにする
• MUST 主要な見出しに 68px / 700 を使用する
• MUST 本文テキストに 24px / 400 を使用する
• MUST フォントウェイトを medium、bold、regular に限定する
• MUST 見出しには text-balance、本文テキストには text-pretty を使用する
• SHOULD 数値データには tabular-nums を使用する
• NEVER 明示的に依頼された場合を除き、字間を変更しない

テキストスタイル

スタイル	フォント	サイズ	ウェイト	色	数
heading-1	Inter	68px	700	#242528	1
body	Inter	24px	400	#7D7E81	1
text-17px	Inter	17px	500	#3B3A3D	1
text-15px	Inter	15px	400	#5B5B5C	1
text-15px	Inter	15px	400	#545455	1
text-14px	Inter	14px	400	#D98C71	1
text-14px	Inter	14px	400	#949397	1
caption	Inter	13px	400	#F3AB84	1
label	Inter	13px	400	#F2A47B	1
label	Inter	12px	400	#565656	1

タイポグラフィの参照情報

フォントファミリー：

• Inter（15 回使用）

フォントサイズ： 11px、12px、13px、14px、15px、17px、24px、68px

余白

• MUST 余白には 4px グリッドを使用する
• SHOULD 5px、60px のスケールから余白を使用する
• SHOULD 要素間のデフォルトの間隔に 5px を使用する
• NEVER 任意の余白値を使用しない（デザインスケールを使用する）
• SHOULD コンテナ内のパディングを一貫させる

境界線

• MUST スケールから境界線の角丸半径を使用する：6px、7px、15px
• MUST 境界線の幅は一貫して 1px にする
• SHOULD デフォルトの境界線の角丸半径に 7px を使用する
• NEVER 任意の境界線の角丸半径を使用しない（デザインスケールを使用する）
• SHOULD 要素を区切るために控えめな境界線（1px）を使用する

角丸半径の参照情報

スケール： 6px、7px、15px

レイアウト

• MUST ベースのビューポート幅を 1920px として設計する
• SHOULD 要素の幅を一貫させる：10px、74px、48px
• SHOULD 階層が明確な、テキスト主体のレイアウトにする
• NEVER h-screen を使用しない。ビューポート全体の高さには h-dvh を使用する
• MUST 固定要素では safe-area-inset を考慮する
• SHOULD 正方形の要素には w-* と h-* の組み合わせではなく size-* を使用する

検出されたレイアウトパターン

• メインコンテンツ：幅：1920px、高さ：969px
• メインコンテンツ：幅：1920px、高さ：752px
• ヘッダー：高さ：61px
• ヘッダー：高さ：50px
• ヘッダー：高さ：49px

コンポーネント

ボタン

バリエーション	背景	テキスト	境界線	高さ	角丸半径
ゴースト	transparent	#F3AB84	なし	-	-

インタラクティブ状態

フォーカス

• アクセントカラー（#00070D）を使用した 2px のアウトラインを必ず使用します
• 2px のアウトラインオフセットを必ず使用します
• フォーカスインジケーターを決して削除しないでください

ホバー

• ボタン（プライマリ）：背景を 10% 明るくします
• ボタン（セカンダリ）：背景に #FEFEFD を使用します
• リスト項目：背景に #FEFEFD を使用します

無効状態

• opacity: 0.5 を必ず使用します
• cursor: not-allowed を必ず使用します

インタラクション

• 破壊的または取り消し不可能なアクションには、必ず AlertDialog を使用します
• ローディング状態には、構造を反映したスケルトンを使用することを推奨します
• アクションが発生する場所の近くに、必ずエラーを表示します
• input または textarea 要素での貼り付けを決してブロックしないでください
• アイコンのみのボタンには、必ず aria-label を追加します

アニメーション

• 明示的に要求されていない限り、アニメーションを追加しないでください
• コンポジターのプロパティ（transform、opacity）のみをアニメーションさせてください
• レイアウトプロパティ（width、height、top、left、margin、padding）をアニメーションさせないでください
• 登場時のアニメーションには ease-out を使用することを推奨します
• インタラクションのフィードバックは 200ms を超えないでください
• prefers-reduced-motion に対応することを推奨します

パフォーマンス

• 大きな blur() または backdrop-filter のサーフェスをアニメーションさせないでください
• アニメーションの実行中以外は、will-change を適用しないでください
• レンダーロジックで表現できる処理には、useEffect を使用しないでください