精選 · 開放 · 免費

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

標題使用輕量級的過渡襯線字體，字距緊湊 · UI 元素使用簡潔的 grotesque 無襯線字體 · 單色空間元素用於技術標籤

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

文案語氣與禁用清單

語氣專業但易於理解且現代
標題風格 大而具衝擊力的襯線字體排版
按鈕文案 直接且以行動為導向（例如：「免費開始使用」）

避免使用霓虹燈或高飽和的合成色彩——截圖顯示接地的大地色調。
避免使用粗厚的裝飾性邊框——截圖顯示簡潔的 1px 邊框或無邊框佈局。
避免使用緊湊密集的佈局——截圖顯示元素周圍有寬裕的留白。
避免 UI 標籤全部使用小寫——截圖顯示導航和特定標籤使用大寫。
避免使用厚重的陰影——截圖顯示大多數元素上有非常細微或無陰影。
避免標題使用俏皮的無襯線字體——截圖顯示使用過渡襯線字體以產生衝擊力。
避免: 技術術語
避免: 激進的銷售用語
避免: 過於俏皮的語氣

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) 以產生對比。字體搭配展示用的過渡襯線字體與內文用的 grotesque 無襯線字體。關鍵禁忌：避免霓虹色彩、避免密集佈局、避免裝飾性邊框、避免小寫 UI 標籤、避免厚重陰影，以及避免使用無襯線的展示字體。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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