精選 · 開放 · 免費
Mapbox
開發者、汽車製造商與創新者的首選位置平台。
SaaSDeveloper ToolsBold TypographyCleanCalm
01
設計氣質 DNA
地理空間地圖繪製位置平台導航
為希望在實體世界上疊加智能的建造者提供的強大工具套件。
02
色彩
#007AFCAccent
#FFFFFFInk
#A0AABAInk soft
#0E1012BG
#15171BBG soft
#333943Muted
rgba(51, 57, 67, 1)Line
高對比深色模式，旨在讓多彩的地圖數據與藍色點綴突出。
03
字型
geometric-sans · humanist-sans · monospace
- display
64px · 500 - body
20px · 400
主要標題使用幾何無襯線字體。 · 內文依賴易讀的人文主義無襯線字體。 · UI 元素使用標準的無襯線字體作為後備。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
標準的 4px 格線基礎。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 24px
pill · 100px
微妙的 1px 邊框，使用柔和的深灰色 (#333943) 來定義元素，避免生硬感。
0px 0px 100px 50px rgb(14, 16, 18)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中、內容密集的佈局，典型於 SaaS 平台。
07
動效與互動
150msmicro
400mssmall
800msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
導航與按鈕上的流暢 hover 過渡。
微妙的色彩偏移與透明度變化。 · 立即回應，帶有輕微的變形效果。
08
組件
- button 膠囊形（border-radius: 100px），搭配實心的點綴色填充或微妙的輪廓。
- card 深色面板（bg: #15171B），帶有柔和陰影與寬鬆的圓角。
- chip 小型、帶輪廓的文字元素，具有高 border-radius。
- input 微妙的深色輸入框，搭配清晰的對比文字。
- hero 居中的巨型排版，搭配雙重操作按鈕。
09
文案語氣與禁用清單
- 語氣 專業、技術性且權威。
- 標題風格 簡潔、以行動為導向且大膽。
- 按鈕文案 清晰、以效益為導向且具吸引力。
- 不要使用淺色背景——截圖顯示的是深色主題的介面。
- 不要使用裝飾性襯線字體——截圖顯示的是簡潔的無襯線字體。
- 不要在按鈕上使用銳利、方形的角落——截圖顯示的是膠囊形按鈕。
- 不要使用霓虹色或過於飽和的顏色——截圖顯示的是集中的藍色點綴。
- 不要使用細薄、精緻的線條作為邊框——截圖顯示的是清晰的 1px 邊框。
- 不要讓主視覺區塊過於擁擠——截圖顯示的是寬敞的留白與大型字體。
- 避免: 缺乏脈絡的術語
- 避免: 過於隨意的語言
- 避免: 缺乏實質的誇張宣傳
- 避免: 主視覺區塊中密集的文字區塊
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Mapbox 是一個高端的 SaaS 開發者平台，用於地圖繪製與位置智能。它使用深色背景 (#0E1012)，搭配清晰的白色文字與鮮明的藍色點綴 (#007AFC)。排版主要使用幾何與人文主義無襯線字體，搭配大型、粗體的標題與清晰的內文。佈局寬敞且居中。關鍵的禁忌：避免淺色主題、襯線字體、方形按鈕、霓虹色、細邊框以及擁擠的主視覺區塊。
en · zh-CN · zh-TW · ja · ko