厳選・オープン・無料

n8n

ハイコントラストのオレンジアクセントとクリーンなsans-serifタイポグラフィを用いた、AIワークフローを提示するダークテーマの開発者ツールランディングページ。

01

デザイン DNA

APIとAIを接続するためのIDE。ハイエンドな開発者ツールのようにスタイル化されています。

02

カラー

鮮やかなオレンジを焦点としたハイコントラストダークUIと、厳しく抑制されたセカンダリカラー。

03

タイポグラフィ

geometric-sans · monospace

• display56px · 600
• h240px · 600
• body-lg20px · 400
• body16px · 400
• caption12px · 600

すべてのタイポグラフィには、幾何学的sans-serifファミリ（Geomanist）を使用。 · 見出しにはタイトなカーニング（-1px）とセミボールドウェイトを採用。 · 本文は可読性のために400ウェイトを維持。

04

余白

標準4pxベースグリッドと、主要セクション用の広めのpadding（48px）。

05

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

1px solid rgba(111,111,111,0.3)

0px 1px 0px 0px inset rgba(255,142,93,0.3) · 0px 0px 0px 1px inset rgba(255,255,255,0.1) · 1px 2px 8px 0px rgba(0,0,0,0.35)

06

レイアウト

コンテンツを中央揃えにした標準の最大幅コンテナ。ヒーローではテキストを左揃え。

07

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

hover時のスムーズなcolorおよびbackground-colorトランジション（0.2秒）。 · インタラクティブ状態変化のためのtransformおよびopacityトランジション（0.3秒）。 · すべてのUI要素の状態変化にかかる微妙なイージング。

スムーズなcolorおよびbackgroundトランジション、ボタンに対する微妙なscaleまたはtranslate。 · background color変化または不透明度による視覚的フィードバック。

08

コンポーネント

• button プライマリアクションには塗りつぶしオレンジ（#ee4f27）、セカンダリにはダークなアウトライン、ピルボーダーラディウス。
• card 奥行きを出すために、微妙なボーダーとボックスシャドウを持つダーク背景。
• chip 明確に目立つものではないが、チェックマークインジケーターはクリーンでミニマルなスタイルを使用。
• input 微妙なボーダーを持つダーク背景。
• hero 大きな中央揃えの見出し、2つのCTAボタン、そして目立つ3Dグラフィック。

09

文体と禁止事項

• トーン 率直で、プロフェッショナル、開発者向け。
• 見出し 簡潔で、行動を促すフレーズ（例：「素早く動け。何も壊すな。」）。
• CTA 明確で直接的な行動喚起（「無料で始める」「営業に相談」）。

• 遊び心のある、または丸みのあるフォントを使用しない — スクリーンショットはクリーンな幾何学的sans-serifを示している。
• 明るい背景を使用しない — スクリーンショットは深いダークネイビー（#0e0918）の背景を示している。
• 複数の高彩度カラーを使用しない — スクリーンショットはオレンジを唯一の支配的なアクセントとして使用している。
• 複雑で忙しない背景パターンを使用しない — スクリーンショットはクリーンなダークグラデーションと微妙なレディアルグローを使用している。
• 見出しに広く余裕のある文字間隔を使用しない — スクリーンショットはタイトでコンパクトなカーニングを示している。
• 重いドロップシャドウを使用しない — スクリーンショットは奥行きのための微妙なインセットグローと細いボーダーを使用している。
• 避ける: 過度にカジュアルまたは遊び心のある言葉遣い。
• 避ける: ワークフロー自動化に関連しない過度な専門用語。
• 避ける: ごちゃごちゃした、または混沌としたレイアウト。
• 避ける: 明るく、多色のカラーパレット。
• 避ける: 重厚で装飾的なセリフフォント。

10

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

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

11

System Prompt

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