厳選・オープン・無料

Intercom

明瞭さ、抑制、エレガントな機能性を優先する、プレミアムAIネイティブのヘルプデスクです。

SaaSCleanProductivityCalmRefined
Intercom のスクリーンショット
↓ デザインシステムをダウンロード (25 MB)OpenDesign で開く

オリジナル: https://www.intercom.com

📦 パックの中身を見る →

01

デザイン DNA

helpdeskAIcustomer supportautomationenterprise

洗練されたモダンなエンタープライズダッシュボード。ハイエディトリアルな写真とクリーンなソフトウェアUIを融合させたデザインです。

02

カラー

#0007cbAccent
#111111Ink
rgba(17,17,17,0.7)Ink soft
#ffffffBG
#f1eee9BG soft
#d3cec6BG quiet
rgba(17,17,17,0.4)Muted

高コントラストのモノクロームを基盤とし、暖色系ベージュのニュートラルと、インタラクティブなハイライトのための単一の深い青のアクセントカラーを採用しています。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

04

余白

4px
8px
12px
16px
24px
32px
48px
64px
96px

可読性のため、4pxをベース単位とした広めの縦方向のスペーシング。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

1px solid rgba(17,17,17,0.4)

0 0 18px rgba(0,0,0,0.2)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

コンテンツカラムの最大幅を制限した、フル幅のレスポンシブレイアウト。

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

color、background-color、border-colorプロパティの滑らかなトランジション。 · hover状態のための微細なbackground-sizeアニメーション。

滑らかなcolorとbackground-colorのトランジション。 · 微細なスケール変化やカラーチェンジによる即座のレスポンス。

08

コンポーネント

09

文体と禁止事項

10

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

Intercom — 桌面首屏（hero）
桌面首屏（hero）
Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Intercom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Intercom — 移动首屏
移动首屏

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

11

System Prompt

Intercomのホームページは、モダンなSaaSデザインの達人です。ハイエディトリアルな美学とクリーンで機能的なUIを融合させています。中核のアイデンティティはプロフェッショナルでAIに焦点を当てており、ホワイト(#ffffff)、暖色系ベージュ(#d3cec6)、およびほぼブラック(#111111)のテキストを基盤とする抑制されたカラーパレットを使用しています。タイポグラフィは主にクリーンなジオメトリックおよびヒューマニストサンセリフで、ヒーローヘッドラインには54pxのディスプレイサイズで Tightな文字間隔を使用しています。重要なインタラクションには滑らかな0.4sトランジションが特徴です。重要なデザインルール：広めのホワイトスペースを優先し、過度に装飾的な要素を避け、モノクロームをベースに暖色系ニュートラルを微妙に加えることで、製品イメージと深い青(#0007cb)のアクセントが際立つようにしてください。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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