厳選・オープン・無料
Clerk
開発者がセキュアでスケーラブルなアプリケーションを構築するための完全なユーザーマネジメントプラットフォーム
devtoolsauth
01
デザイン DNA
認証ユーザー管理開発者体験スケーラブル
セキュアな建物の堅固な基盤
02
カラー
#6248F6Accent
#131316Ink
#5E5F6EInk soft
#FFFFFFBG
#F7F7F8BG soft
#747686Muted
rgba(217, 217, 222, 1)Line
シャープな黒のテキストと、鮮やかなアクセントパレットを添えたクリーンな余白
03
タイポグラフィ
grotesque-sans · humanist-sans · monospace
- display
56px · 700 - body
16px · 400
見出しはインパクトのために tight tracking と heavy weights を使用 · 本文はゆとりのある行間で快適なリズムを維持 · モノスペース要素は技術的な強調のために控えめに使用
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
一貫した 4px ベース。ヒーローセクションにはゆとりのある余白
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(217, 217, 222, 1)
rgba(0, 0, 0, 0.08) 0px 5px 15px 0px · rgba(25, 28, 33, 0.2) 0px 15px 35px -5px · rgba(0, 0, 0, 0.1) 0px 1px 3px 0px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
ゆとりのある余白を持つ中央配置のヒーロー、その後にマルチカラムの機能グリッド
07
モーションとインタラクション
150msmicro
300mssmall
450msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover時の滑らかな色の遷移 · インタラクティブ状態のための繊細な不透明度の変化 · 展開効果のための段階的なトランスフォームアニメーション
繊細な色の暗化と背景の変化 · 遅延なしの即座の視覚フィードバック
08
コンポーネント
- button 明確な階層を持つ丸みのあるピルボタン（プライマリは塗りつぶし、セカンダリはアウトライン）
- card 繊細なボーダーとゆとりのあるパディングを持つライトグレーのカード
- chip カテゴリと役割のための小さな丸みのあるラベル
- input 繊細なボーダーと丸みのある角を持つクリーンなインプットフィールド
- hero 大きなタイポグラフィと繊細な背景パターンを持つ、フル幅の中央配置レイアウト
09
文体と禁止事項
- トーン プロフェッショナルで自信に満ち、開発者向け
- 見出し 直接的で、強力な動詞を使った便益駆動型
- CTA 明確なバリュープロポジションを持つアクション指向
- 装飾的なフォントを使用しない — スクリーンショットはクリーンで機能的な grotesque-sans タイポグラフィを示している
- 不必要なシャドウを追加しない — スクリーンショットは、主要な要素にのみ最小限で意図的なlevationを示している
- 複数のアクセントカラーを使用しない — スクリーンショットは全体を通して単一の紫色アクセント (#6248F6) を示している
- 窮屈なレイアウトを作成しない — スクリーンショットはゆとりのある余白と呼吸スペースを示している
- 複雑なグラデーションを使用しない — スクリーンショットは繊細なリニアグラデーションとラジアル背景を示している
- 不必要なボーダーを追加しない — スクリーンショットは機能的な区切りが必要な場所にのみボーダーを示している
- 避ける: 過度にカジュアルな言葉遣い
- 避ける: 過度の感嘆符
- 避ける: 実質のないマーケティング用語
- 避ける: 技術的な詳細のない曖昧な約束
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Clerkは認証とユーザー管理に焦点を当てた、プレミアムな開発者ツールプラットフォームです。デザインは、白の背景 (#FFFFFF) とライトグレーのサーフェス (#F7F7F8) を使用した、クリーンでプロフェッショナルな美的感覚を採用しています。タイポグラフィは、ディスプレイ用に grotesque-sans、本文用に humanist-sans を使用し、見出しには tight tracking を適用しています。単一の鮮やかな紫色アクセント (#6248F6) が明確なCTA階層を生み出しています。レイアウトは、ゆとりのある余白でコンテンツを中央に配置し、深みのために繊細なシャドウを使用しています。重要な禁忌：装飾的なフォント、過度のシャドウ、複数のアクセントカラー、窮屈なレイアウト、複雑なグラデーション、不必要なボーダーを避けてください。システムは、信頼性と技術的洗練さを伝える明確な情報階層と意図的な視覚要素を通じて、開発者体験を優先しています。
en · zh-CN · zh-TW · ja · ko