厳選・オープン・無料
WorkOS
WorkOSは、開発者がSSOやディレクトリ同期などのエンタープライズ機能を、数ヶ月ではなく数分で出荷できるように支援します。
saasdev
01
デザイン DNA
EnterpriseDeveloperAPIIntegrationInfrastructure
スタートアップをエンタープライズ対応プラットフォームに変える不可視の足場
02
カラー
#6363F1Accent
#29363DInk
#65678AInk soft
#FFFFFFBG
#F9F9FBBG soft
#F2F2F8BG quiet
#AEB2CCMuted
rgba(41, 56, 78, 0.08)Line
クリーンなホワイト/ライトグレーのサーフェスに高コントラストのテキスト、プライマリアクション用の1つの特徴的なブルーパープルアクセント。
03
タイポグラフィ
geometric-sans · humanist-sans · monospace
- display
72px · 500 - h2
40px · 500 - body
20px · 400 - small
16px · 400 - caption
14px · 400 - overline
12px · 500
見出しはtight negative letter-spacing（-1pxから-2px）を使用 · 本文は読みやすさのため標準的なletter-spacing（0）を使用 · モノフォントはコードスニペットと技術値に厳密に使用 · フォントウェイトはクリーンなヒエラルキーのために400と500に限定 · 大文字変換はオーバーラインに限定して使用
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
縦間隔は厳密な4pxグリッドに従い、セクションパディングは一貫して64pxで、リズミカルで呼吸できるレイアウトを生み出します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
rgba(41, 56, 78, 0.08)またはソリッドホワイトを使用した微妙な1pxボーダーでインセット効果を実現。
0px 1px 0px 0px inset：微妙なインセットボーダー用 · 0px 2px 5px 0px rgba(0, 0, 0, 0.17)：浮き上がったカード用 · 0px 5px 10px -4px rgba(0, 0, 0, 0.17)：モーダル/ポップオーバー用
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
標準的な12カラムグリッドにセンタリングされたコンテンツコンテナ、セクション間の適切なホワイトスペース。
07
モーションとインタラクション
150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover状態で背景色が変化 · インタラクティブ要素のトランスフォーム（0.4s） · scroll時の微妙なフェードイン
ボタンの背景色シフト、テキストリンクの微妙なカラートランジション。 · 即座の視覚フィードバック、しばしば軽微なトランスフォームスケールやシャドウの変化。
08
コンポーネント
- button ピル型（border-radius: 100px）のプライマリボタンはソリッドアクセントカラーとホワイトテキスト、セカンダリボタンは透過でダークテキスト。
- card ソフトに角丸のカード（border-radius: 12px）、微妙なインセットシャドウとライトボーダー、機能リストやインテグレーションタイルに使用。
- chip 「Enabled」や「Ready」などのステータスインジケーター用の小さなピルバッジ（border-radius: 4px）。
- input 微妙なインセットシャドウと1pxボーダーを持つ標準フォームフィールド。
- hero 大型の太字見出しにグラデーションテキスト効果（'Enterprise Ready'）、右側にスタイリッシュなUIモックアップを配置。
09
文体と禁止事項
- トーン プロフェッショナルで、直接的、開発者中心。
- 見出し 太字で簡潔、利益指向（例：'Your app, Enterprise Ready'）。
- CTA アクション指向で明確（'Get started'、'Talk to an expert'）。
- ダークモードやダーク背景を使用しない — スクリーンショットではホワイトとソフトグレーのサーフェスを主体とした明るいテーマが示されています。
- 多様で明るく競合するカラーを使用しない — スクリーンショットではホワイト、グレー、1つの支配的なブルーパープルアクセントの抑制されたパレットが示されています。
- 装飾的または手書きフォントを使用しない — スクリーンショットでは見出し用のクリーンな幾何学サンセリフ、本文用のヒューマニストサンセリフが示されています。
- プライマリボタンに鋭い角を使用しない — スクリーンショットでは完全な100pxのborder-radiusを持つピル型ボタンが示されています。
- レイアウト区切りに重いソリッドボーダーを使用しない — スクリーンショットでは微妙なインセットシャドウと非常に軽い1pxボーダーが示されています。
- 本文をセンタリングしない — スクリーンショットでは長文の読みやすさのために左寄せテキストが示されています。
- 避ける: 過度にカジュアルまたはスラングの多い言葉を避ける
- 避ける: 業界標準ではない複雑なジargonを避ける
- 避ける: ヒーローセクションで長く密度の高い段落を避ける
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（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
これはWorkOSのSaaSおよび開発者ツールウェブサイトです。デザインはクリーンでプロフェッショナル、かつ非常に構造化されており、明確さとエンタープライズ対応に焦点を当てています。主要カラーはホワイト（#FFFFFF）とソフトグレー（#F9F9FB）背景、ダークインクテキスト（#29363D）、1つの支配的なブルーパープルアクセント（#6363F1）です。タイポグラフィはtight negative letter-spacingの太字表示見出し用の幾何学サンセリフと、読みやすい本文用のヒューマニストサンセリフを特徴としています。重要な注意点：ダークモードを避ける、複数の競合するアクセントカラーを避ける、装飾フォントの使用を避けること。レイアウトは12カラムグリッドを使用し、適切なホワイトスペースとカードの微妙なインセットシャドウで、重さなしにディープスを生み出しています。
en · zh-CN · zh-TW · ja · ko