厳選・オープン・無料

Reveal

接続タイムアウトを診断するための、機能的なエラー状態UI。

01

デザイン DNA

接続の健全性を表示するシステム診断ダッシュボード。

02

カラー

システム状態のための実用的なカラーコーディング（緑：成功、赤：エラー、青：リンク）。

03

タイポグラフィ

system-ui

• display60px · 300
• h130px · 400
• body16px · 400
• caption13px · 400

04

余白

垂直方向の間隔は、厳密なタイポグラフィカルリズムではなく、セクションのパディングによって制御されます。

05

サーフェス (角丸 / 影 / 罫線)

フッターの上の微妙な1px区切り線を除き、目立つ境界線はありません。

06

レイアウト

ステータスアイコン用の3カラムグリッド、説明テキスト用の2カラムグリッド。

07

モーションとインタラクション

ホバー可能な要素（リンク、アイコン）の遷移。

リンクがより暗い shades of blue に色を変化させます。 · インタラクティブ要素でカーソルがポインタに変わります。

08

コンポーネント

• button このエラー状態では見られません。
• card 見られません。
• chip ピルシェイプのエラーコードバッジ。
• input 見られません。
• hero 接続経路と状態を示す3つのアイコンを備えたステータス表示。

09

文体と禁止事項

• トーン 技術的、客観的、かつ有用的。
• 見出し 大きく、軽量のシステムフォント。
• CTA トラブルシューティング用の標準的な青のテキストリンク。

• 装飾的な境界線を使用しない — スクリーンショットはクリーンで境界線のないレイアウトを示しています
• 高コントラストのシャドウを使用しない — スクリーンショットはフラットでシャドウのないUIを示しています
• カスタムセリフフォントやディスプレイフォントを使用しない — スクリーンショットは全体的にsystem-uiを使用しています
• ダーク背景を使用しない — スクリーンショットは明るいハイキーデザインを示しています
• 複雑なアニメーションを使用しない — スクリーンショットは静的で機能的なページを示しています
• コンテナに角丸を使用しない — スクリーンショットはステータスセクションの直角のエッジを示しています
• 避ける: 感情的な言葉
• 避ける: 技術的必要性を超えた複雑な専門用語

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko