メインコンテンツへスキップ

デザインシステム

Scoutelloは、温かみがあり、有能で、製品中心の印象を与えるべきです。推奨されるスタイルは、ライト、ゆったり、丸みを帯びた、エディトリアルなものです。まず明確なコンテンツがあり、次にさりげないブランドカラー、ソフトなサーフェス、そして装飾的なノイズになることなく製品を応答性良く感じさせる穏やかなモーションが続きます。

マーケティングランディングページは、現在のビジュアルの方向性を最も明確に示す参照元です。製品サーフェスは、共有デザイントークンを可能な限り再利用し、サーフェスが明示的にブランドまたはマーケティング指向の場合にのみ、より表現豊かになります。

ロゴとブランドアセット​

エージェント、インテグレーション、または生成されたページで再利用可能なブランドマークが必要な場合は、公開ドキュメントのアセットURLからScoutelloロゴを使用してください。

シャープなレンダリングを画面サイズ全体で実現するにはSVGバージョンを優先します。SVGを扱えないツールやデスティネーションではPNGバージョンを使用してください。マークの周りには十分なクリアスペースを確保し、引き伸ばしたり色を変更したりしないでください。また、コントラストを維持するために、白、温かいクリーム色、またはその他の穏やかなサーフェスに配置してください。

ブランドカラー​

プライマリカラー: #ff8d49

Scoutelloのアクセントカラーとしてプライマリオレンジを使用します。プライマリコールトゥアクション、フォーカス状態、アクティブなナビゲーション、小さなアイコンの背景、テキストのハイライト、ソフトなグロー、温かいグラデーションに使用します。製品コードでは、--primary: 24 100% 64% および bg-primary、text-primary、border-primary/15、shadow-primary/10 のようなTailwindクラスにマッピングされます。

セカンダリカラー: #145466

セカンダリディープティールは、基盤となるカラーとして使用します。プライマリオレンジとのグラデーション、ダークなコールトゥアクションパネル、視覚的な深み、そして時折のハイエンゲージメントなブランドモーメントに最適です。デフォルトのアクションカラーとしてプライマリオレンジを置き換えるべきではありません。

サポートカラー:

  • 温かいクリーム色の背景: #fff8f1、#fff4ea、#fcf6f1、およびソフトな orange-50 / amber-50 サーフェス。
  • 製品ニュートラル: 白いカード、暗い前景テキスト、約70〜75%の不透明度のミュートされたテキスト、および明るい境界線。
  • ターシャリブルー: hsl(205 100% 51%) がサポートトークンとして利用可能ですが、オレンジとティールがブランドペアとして認識され続けるように、控えめに使用する必要があります。

ビジュアルスタイル​

クリーンでプレミアムなSaaSルックを優先し、ありきたりに感じられない程度の温かみを加えます。ランディングページは、クリーム色のメッシュ背景、白いカード、大きな製品スクリーンショット、丸みを帯びた角、そして控えめなグラデーションを組み合わせています。

使用するもの:

  • 丸みを帯びたカードとパネル。多くの場合、rounded-2xl から rounded-[2rem] を使用します。
  • ソフトな境界線。例: border-primary/10、border-primary/15、ring-black/5、および明るいニュートラルな境界線。
  • 重い色のブロックの代わりに、重ねられた白またはクリーム色のサーフェス。
  • 微妙な影。例: shadow-sm、shadow-lg、shadow-2xl shadow-primary/10、またはカスタムの低不透明度シャドウ。
  • 特にマーケティングや機能ストーリーテリングのために、大きな製品スクリーンショットまたはUIモックアップを証拠として使用します。
  • 小さなブランドモーメント。例: オレンジ色のハイライトテキスト、アイコンチップ、リング、グロー、グラデーションCTA。

避けるべきもの:

  • 派手な全画面オレンジ色の背景。
  • 通常のコントロールにティールを使いすぎる。
  • 密集した、窮屈なレイアウト。
  • きつい影、シャープな長方形、または冷たいモノクロダッシュボード。
  • 読書やタスク完了を妨げる装飾的なモーション。

タイポグラフィ​

マーケティングサイトでは以下を使用します。

  • ディスプレイの見出しには Space Grotesk を landing-display クラスで使用します。
  • マーケティング本文には Manrope を使用します。

共有アプリおよびドキュメントサーフェスでは、システムに合わせたUIタイポグラフィを使用しており、現在はInterに近いものです。スタイル目標は、サーフェス全体で一貫しています。自信に満ちた見出し、タイトな見出しトラッキング、読みやすい本文、そしてゆったりとした行間です。

見出しのガイドライン:

  • マーケティングページでは、大きくてバランスの取れた見出しを使用します。
  • プライマリオレンジで重要なフレーズのみをハイライトします。
  • max-w-* および利用可能な場合は text-balance を使用して、行長を管理します。

本文のガイドライン:

  • 段落は穏やかで直接的に保ちます。
  • 説明にはミュートされた前景テキストを使用します。通常は text-foreground/70 または text-foreground/75 です。
  • スキャンしやすいセクション、短い段落、明確なラベルを優先します。

レイアウトとスペーシング​

レイアウトはゆったりとして安定感があるべきです。ランディングページは、max-w-7xl コンテナを使用し、レスポンシブな水平パディングと大きな垂直セクションを備えています。

一般的なパターン:

  • セクションパディングは py-16、py-20、または主要なマーケティングセクションではそれ以上を使用します。
  • 一貫したギャップを持つレスポンシブグリッドに配置されたカード。
  • 強力な左コンテンツカラムと右側の製品スクリーンショットまたはデバイス構成を持つヒーローセクション。
  • 広範な製品の約束のための中央揃えセクションヘッダー。ストーリーまたはワークフローセクションのための左揃えヘッダー。
  • モバイルファーストのレイアウトで、大きな画面でマルチカラムになる前にきれいにスタックされます。

ホワイトスペースをデザインの一部として使用します。セクションが不明瞭に感じられる場合は、装飾を追加する前にコンテンツを簡素化し、余白を増やしてください。

コンポーネントとサーフェス​

Scoutelloのサーフェスは、触覚的でありながら軽量に感じるべきです。

  • ボタン: 目立つマーケティングCTAには丸みを帯びたピル型。それ以外は標準的な製品ボタン。
  • カード: 白またはクリーム色、丸みを帯びた、境界線付き、わずかに浮き上がったもの。
  • アイコン: オレンジ色のチップに入った、小さくシンプルな線画アイコン。
  • 統計と信頼要素: オレンジ色の境界線またはグラデーションを持つ、控えめなカード。
  • フォーム: 明確なラベル、直接的なヘルプテキスト、モバイル使用のための十分なスペーシング。
  • スクリーンショット: 大きく、シャープで、わずかに浮き上がったもの。製品の具体的な証拠として使用します。

製品UIを構築する際は、カスタムのワンオフスタイリングではなく、既存の共有UIコンポーネントとトークンから開始します。マーケティングUIを構築する際は、適合する場合にランディングプリミティブとランディングクラスを使用します。

モーション​

モーションは、インターフェースを派手ではなく洗練されたものにするべきです。ランディングページでは、短いリビールアニメーション、デバイスのライズエフェクト、グローブルームエフェクト、および小さなホバーリフトを使用しています。

推奨されるモーション:

  • ソフトな不透明度で12〜24pxから上にリビール。
  • 数ピクセルだけ持ち上がるホバーカード。
  • 少し持ち上がり、影が深くなるCTAホバー状態。
  • ストーリーのスキャンをサポートする、ずらして表示されるセクションエントランス。

常にreduced-motionの優先順位を尊重してください。コンテンツを隠したり、インタラクションをブロックしたり、ページの理解に必要だと感じられたりするアニメーションは避けてください。

ボイスとコンテンツデザイン​

ビジュアルシステムは、直接的で具体的なコピーで最も効果的に機能します。組織がScoutelloで公開、管理、または自動化できることを説明する言語を優先します。

使用するもの:

  • 製品固有の名詞: ランディングページ、タイル、ツアー、イベント、組織、ダッシュボード、ゲスト、QRコード、翻訳。
  • ゲストエクスペリエンスをオペレーターワークフローに結びつける、結果指向の説明。
  • ドイツ語およびその他のローカライズされたコピーでのジェンダーニュートラルな言語。

避けるべきもの:

  • 例のない曖昧なプラットフォーム言語。
  • 過度にフォーマルなエンタープライズ用語。
  • スキャン可能なセクションでうまく機能する場所に長い段落。

実践的なルール​

  • #ff8d49 をメインのブランドアクセントカラー、#145466 をセカンダリの基盤カラーとして使用します。
  • 製品サーフェスでのハードコーディングされた色よりも、トークン化されたクラス（primary、secondary、foreground、muted、border）を優先します。
  • マーケティングページは、温かく、ゆったりと、丸みを帯び、スクリーンショット主導で、軽くアニメーションさせます。
  • ダッシュボードおよびオペレーショナルサーフェスは、より穏やかに、必要に応じてのみ密にし、タスク中心にします。
  • 製品がすでにブランディングコントロールを公開している場合、顧客所有のゲストエクスペリエンスで組織のブランディングをサポートしますが、Scoutello所有のサーフェスはこのシステムと一致させます。

関連コンセプト: ルートとサーフェス、ランディングページとタイル、ブラウザファーストのゲストエクスペリエンス。