厳選・オープン・無料

Chirpley

診断情報を提供する、標準的なCloudflareの接続タイムアウトエラーページ。

01

デザイン DNA

テクニカルサポートデスクのステータスページ。

02

カラー

ステータスのための機能的な色を持つ、実用的なパレット。

03

タイポグラフィ

system-sans

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

広範な互換性のためにシステムフォントスタックを使用。 · 明確な階層構造のために、標準的なフォントウェイト（400, 600）を使用。 · 可読性のために、一貫した行の高さを維持。

04

余白

ベース16pxサイズに基づく、標準の4pxグリッド。

05

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

1px solid #404040

なし

06

レイアウト

エラーステートのための、シンプルな単一カラムレイアウト。

07

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

インタラクティブ要素の標準的なhoverトランジション。

リンクでカーソルがポインタに変化。 · 標準的なブラウザ動作。

08

コンポーネント

• button 存在しない。
• card ラベルとステータスインジケーターを持つ、ステータスアイコンの行。
• chip エラーコードのバッジ。
• input 存在しない。
• hero タイムスタンプ付きの大きなエラータイトル。

09

文体と禁止事項

• トーン テクニカルで直接的。
• 見出し 明確なエラーメッセージ。
• CTA 情報提供リンク。

• カスタムフォントを使用しない — スクリーンショットにはシステムフォントスタックが表示されている。
• 複雑なグラデーションを使用しない — スクリーンショットにはフラットカラーが表示されている。
• 装飾的な影を使用しない — スクリーンショットにはミニマルなUIが表示されている。
• 広範なカラーパレットを使用しない — スクリーンショットには限定的な機能的カラーが表示されている。
• すべての角を丸めない — スクリーンショットには主にシャープなエッジが表示されている。
• 装飾的なアイコンを使用しない — スクリーンショットには標準的な機能的アイコンが表示されている。
• 避ける: マーケティング言語
• 避ける: 感情的なトーン
• 避ける: 不明確なエラーコード

10

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

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

11

System Prompt

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