厳選・オープン・無料

Felt

マップ、アプリ、ダッシュボードを簡単に作成できるクラウドネイティブのGISプラットフォーム。

SaaSProductivityToolingClean

Felt のスクリーンショット

↓ デザインシステムをダウンロード (46 MB)OpenDesign で開く

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

📦 パックの中身を見る →

01

デザイン DNA

GISマッピング空間コラボレーションプラットフォーム

地図のためのGoogle Docs

02

カラー

#DC8C46Accent

#333333Ink

#FFFFFFInk soft

#3D521EBG

#64754BBG soft

#EEEBG quiet

rgba(51,51,51,1)Line

実用性と親しみやすさのバランスを取るため、高コントラストの自然なトーンと温かみのあるアクションカラーを組み合わせる。

03

タイポグラフィ

transitional-serif · grotesque-sans · monospace

display101px · 300
body16px · 400

見出しには、 Tight な字間の軽量なトランジショナルセリフ書体を使用 · UI要素には、クリーンなグロテスクサンセリフを使用 · 技術的なラベルには等幅フォントを使用

04

余白

4px

8px

16px

24px

32px

48px

64px

96px

8px ベースライングリッド

05

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

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid #333333

0px 2px 5px 0px rgba(0,0,0,0.2)

06

レイアウト

1280container

12columns

24pxgutter

768 / 1024breakpoints

余裕のある余白を設けた中央揃えコンテンツカラム

07

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

75msmicro

200mssmall

400msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

hover時の背景色トランジション · focus時の文字色トランジション

背景色の変更 · 微細な背景の暗転

08

コンポーネント

button アクセント背景色またはボーダースタイルを用いた角丸長方形
card インターフェーススクリーンショット用のクリーンなボーダーコンテナ
chip タグまたはステータスラベルとして使用
input 細いボーダーを備えた標準的なテキスト入力フィールド
hero 無地のカラーブロック上に、製品のショーケースと共に配置される大规模タイポグラフィ

09

文体と禁止事項

トーン プロフェッショナルでありながら、親しみやすくモダン
見出し インパクトのある大きなセリフ書体
CTA 直接的で行動を促すスタイル（例：「無料で始める」）

スクリーンショットは落ち着いた自然なパレットを示しています。ネオン色や高彩度の人工的な色を使わないでください。
スクリーンショットはクリーンな1pxボーダーやボーダーレスレイアウトを示しています。太い装飾的なボーダーを使わないでください。
スクリーンショットは要素の周囲に余裕のある余白を示しています。詰まった密集したレイアウトを使わないでください。
スクリーンショットでは、ナビゲーションや特定のラベルに大文字を使用しています。UIラベルにすべて小文字を使わないでください。
スクリーンショットでは、ほとんどの要素に非常に微細な、またはシャドウなしのデザインを示しています。重いドロップシャドウを使わないでください。
スクリーンショットでは、インパクトを与えるためのトランジショナルセリフ書体を使用しています。見出しにplayfulなサンセリフ書体を使わないでください。
避ける: 専門用語
避ける: 攻撃的なセールス言葉
避ける: 過度に playful なトーン

10

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

Felt — 桌面首屏（hero） — 桌面首屏（hero）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Felt — 移动首屏 — 移动首屏

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

11

System Prompt

これはクラウドネイティブのGISプラットフォームのモダンなSaaSランディングページです。使いやすく、コラボレーションできるマッピングツールとして位置づけられています。プライマリカラーは深い森の緑（#3D521E）と温かみのあるアクセントオレンジ（#DC8C46）、対比にはオフホワイト（#EEE）を使用。タイポグラフィは、ディスプレイ用のトランジショナルセリフ書体と本文用のグロテスクサンセリフをペアリングしています。重要な注意点：ネオンカラー、密集したレイアウト、装飾的なボーダー、小文字のUIラベル、重いシャドウ、ディスプレイ用のサンセリフ書体は避けてください。

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

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

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

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