厳選・オープン・無料

Evm Elektramontreal Ca

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

SaaSDeveloper ToolsCleanReferenceRestraint
Evm Elektramontreal Ca のスクリーンショット
↓ デザインシステムをダウンロード (1 MB)OpenDesign で開く

オリジナル: https://evm.elektramontreal.ca/en

📦 パックの中身を見る →

01

デザイン DNA

エラー診断情報提供ユーティリティ明確性

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

02

カラー

#404040Ink
#FFFFFFBG
#999999Muted
rgba(64,64,64,0.1)Line

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

03

タイポグラフィ

system-sans · system-mono

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

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

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

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

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

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

07

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

150msmicro
0mssmall
0msmedium
cubic-bezier(0, 0, 0.2, 1)easing

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

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

08

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

これは、明確さと情報伝達に焦点を当てた実用的なエラーページデザインです。パレットは中立的で、背景に#FFFFFF、プライマリインクに#404040を使用し、ステータスには意味的なグーンと赤を採用しています。タイポグラフィはシステムsans-serifスタックで、メインの見出しには非常に軽量な60pxのディスプレイウェイトを使用します。レイアウトは中央揃えのコンテナで、3列のステータス図からモバイルでは縦のスタックに切り替わります。重要な禁止事項:装飾的なフォントを使わない、複雑な影を追加しない、具体的なエラーコードを隠さない。このデザインは、システム障害の即座の認識を優先し、明確で実行可能な指示を提供します。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック(エージェント用) ↗

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