精选 · 开放 · 免费
Felt
一个云原生GIS平台，让地图、应用和仪表板的创建变得简单易行。
SaaSProductivityToolingClean
01
设计气质 DNA
GISMappingSpatialCollaborationPlatform
地图领域的Google Docs
02
色彩
#DC8C46Accent
#333333Ink
#FFFFFFInk soft
#3D521EBG
#64754BBG soft
#EEEBG quiet
rgba(51,51,51,1)Line
采用高对比度的大地色系，搭配温暖的强调色，在实用性与亲和力之间取得平衡。
03
字体
transitional-serif · grotesque-sans · monospace
- display
101px · 300 - body
16px · 400
标题采用轻字重的过渡衬线体，字间距紧凑 · 界面元素使用简洁的无衬线体 · 技术标签使用等宽字体
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边框或无边框布局。
- 避免使用紧凑、密集的布局——截图显示的是元素周围充裕的留白。
- 避免界面标签全部使用小写——截图显示导航和特定标签采用大写。
- 避免使用厚重的投影——截图显示大多数元素采用非常细微或没有投影。
- 避免标题使用活泼的无衬线体——截图显示使用过渡衬线体以增强冲击力。
- 避免: 技术术语
- 避免: 激进的销售语言
- 避免: 过于活泼的语气
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个现代SaaS落地页，服务于一个云原生GIS平台。它将自己定位为一个易于使用的协作式地图工具。主色调为深邃森林绿(#3D521E)与温暖的强调橙(#DC8C46)，搭配米白(#EEE)形成对比。排版上，展示部分使用过渡衬线体，正文使用无衬线体。关键禁忌：避免霓虹色、避免密集布局、避免装饰性边框、避免小写界面标签、避免厚重投影，以及避免使用无衬线体作为展示字体。
en · zh-CN · zh-TW · ja · ko