精选 · 开放 · 免费
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
使用柔和深灰（#333943）的微妙 1px 边框，定义元素而不显生硬。
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 过渡效果。
微妙的颜色变化和不透明度改变。 · 立即响应，带有轻微 transform。
08
组件
- button 药丸形（border-radius: 100px），带有纯色强调填充或微妙描边。
- card 深色面板（背景色：#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