厳選・オープン・無料

Auth0

Auth0は、エンタープライズグレードのセキュリティと卓越したユーザーエクスペリエンスを融合した、開発者向けの包括的なアイデンティティプラットフォームです。

01

デザイン DNA

デジタル体験における、安全で不可視の基盤。

02

カラー

ダークを基調とした専門的パレット。深いニュートラル、高コントラストの白、特徴的なティールアクセントのバランスを実現。

03

タイポグラフィ

grotesque-sans · humanist-sans · monospace

• display56px · 500
• heading32px · 500
• body16px · 400

セクションラベルやバッジには大文字を使用 · 大きなディスプレイテキストには Tightな行間を維持 · コードブロックや技術的な参照には厳密にモノフォントを使用

04

余白

4pxを基本単位とし、一貫した倍数を使用して予測可能な垂直および水平リズムを構築。

05

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

ガラスモーフィズム効果のために、rgba(255, 254, 255, 0.12)を使用した微細な1px実線ボーダー

0px -4px 40px 0px rgba(0, 0, 0, 0.16) · 0px 16px 24px 0px rgba(0, 0, 0, 0.25) · inset 0px 1px 0px 0px rgba(255, 255, 255, 0.24)

06

レイアウト

中央配置のヒーローセクション。幅広のコンテンツエリアと、可読性を高めるテキスト幅の制限。

07

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

ホバーステートでの滑らかなカラー変化 · インタラクティブ要素の微細なスケールおよび透明度の変化 · コンテンツセクションの段階的なフェードイン

微細な背景カラーのシフトとわずかな高さの変化 · 状態変化による即時フィードバック

08

コンポーネント

• button 白背景にダークテキストのハイコントラストプライマリーボタン。透明背景に微細なボーダーのセカンダリーボタン。
• card 微細な内側グローと角丸を持つダークガラスモーフィズムカード。
• chip 薄いボーダーと半透明背景を持つ小文字大文字バッジ。
• input 微細なボーダーと角丸を持つクリーンなダーク入力フィールド。
• hero グラデーション背景、中央配置タイポグラフィ、目立つCTAボタンを持つ大型ドラマチックヒーロー。

09

文体と禁止事項

• トーン プロフェッショナルで自信に満ちた、開発者向けのトーン
• 見出し 統合の速さと容易さを強調する、簡潔でアクション指向のステートメント
• CTA 即時的な価値（「無料でビルドを開始」）に焦点を当てた、直接的で歓迎するような表現

• 明るく彩度の高いカラーを使用しない — スクリーンショットはダーク背景、微細なグラデーション、ティールアクセントを示しています
• 装飾的なセリフフォントを使用しない — スクリーンショットはクリーンで機能的なサンセリフタイポグラフィを示しています
• 重いドロップシャドウを使用しない — スクリーンショットは微細なグローとガラスモーフィズム効果を示しています
• すべてのテキストを中央揃えにしない — スクリーンショットは中央配置のヒーローテキストと左揃えの本文の混合を示しています
• 小さく窮屈なボタンを使用しない — スクリーンショットは十分なパディングを持つインタラクティブ要素を示しています
• 複雑な装飾的なボーダーを使用しない — スクリーンショットは低不透明度のシンプルな1px実線ボーダーを示しています
• 避ける: 文脈のない過度な技術用語
• 避ける: 受動的または不確かな言葉遣い
• 避ける: 過度な感嘆符や誇張表現
• 避ける: 明確な視覚的階層のない密集した段落

10

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

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

11

System Prompt

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