厳選・オープン・無料

Evm Elektramontreal Ca

ビジュアルアイコンと簡潔なテキストを通じて、明確な診断情報を提供する実用的なエラーページ。

01

デザイン DNA

ネットワークエラーのための、明確で実用的なシステムステータスダッシュボード。

02

カラー

ステータスのための意味的なカラーアクセントを備えた、高コントラストの中立パレット。

03

タイポグラフィ

system-sans · system-mono

• display60px · 300
• heading30px · 300
• body16px · 400

04

余白

標準の4pxベースグリッドを採用し、明確性のための十分な垂直方向のスペーシングを確保。

05

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

ステータス図セクション用の、微細なライトグレーのグラデーション背景。

06

レイアウト

3列の水平ステータス図。モバイルでは1列の縦のスタックに折りたたまれる。

07

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

リンクhover状態のための標準CSS transition。

リンク上の微細な色の変化。 · 標準的なリンクナビゲーション。

08

コンポーネント

• button ボタンは表示されず、リンクのみ。
• card アイコンとラベルを持つ3列のステータス図。
• chip ライトグレーの背景を持つ、小さなピル-shapedエラーコードバッジ。
• input フォーム入力は表示されない。
• hero サブテキストリンクとタイムスタンプを持つ、大きなライトウェイトの見出し。

09

文体と禁止事項

• トーン 直接的、情報提供型、かつ技術的に正確。
• 見出し 大きく、ライトウェイトで、宣言的。
• CTA コール・トゥ・アクションボタンではなく、情報リンク。

• 装飾的なフォントを使用しない — スクリーンショットは、非常に読みやすいシステムsans-serifスタックを示している。
• 複雑な影や奥行きを追加しない — スクリーンショットは、微細なグラデーション背景のみのフラットデザインを示している。
• ダークカラースキームを使用しない — スクリーンショットは、ダークグレーテキストの明るい白背景を示している。
• エラーコードを隠さない — スクリーンショットは、見出しの隣に小さな、目立つバッジとしてエラーコードを表示している。
• 複数のアクセントカラーを使用しない — スクリーンショットは、赤とグーンがステータスアイコンにのみ使われる限定パレットを使用している。
• 雑然としたレイアウトを作成しない — スクリーンショットは、豊富な余白と大きなタイトルによる明確なビジュアル階層を示している。
• 避ける: 説明のない専門用語
• 避ける: 遊び心のある、あるいは非公式な言語
• 避ける: 詰め込まれた、段落分けされていないテキスト
• 避ける: 曖昧な指示
• 避ける: 太字や強調の過剰な使用

10

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

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

11

System Prompt

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