01
设计气质 DNA
旅行步行社区探索
一本友好的邻里指南手册
02
色彩
#2979FFAccent#1A1A1AInk#E3F0FFBG#666666Mutedrgba(0, 0, 0, 0.1)Line一种平静、通透的配色，如同开阔的天空，激发探索欲望。
03
字体
- display
56px · 600 - heading
32px · 500 - body
18px · 400
标题字体大、加粗，字间距紧凑。 · 正文字号充足，确保舒适阅读。
04
间距
4px8px16px24px32px48px64px96px128px充裕的垂直间距营造出开放、通透的感觉。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(0,0,0,0.1)
0 4px 24px rgba(0,0,0,0.08)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的单栏布局，具有强烈的视觉层次感。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
背景中微妙的漂浮云朵
交互元素上有微妙的抬升或颜色变化效果。 · 即时的视觉反馈。
08
组件
- button 黑色胶囊形主按钮，对比度高。
- card 简洁的卡片，带有图片、圆角和微妙的阴影。
- chip 小巧、圆润的筛选标签，用于分类。
- input 简洁、干净的输入框，带有搜索图标。
- hero 大号、居中的文字，置于风格化的天空背景之上。
09
文案语气与禁用清单
- 语气 友好、富有邀请感，以社区为中心。
- 标题风格 直接、引人入胜，略带激励性。
- 按钮文案 清晰、以行动为导向（例如：下载）。
- 不要使用深色背景——截图展示的是一个明亮、通透的天空主题。
- 不要使用复杂、密集的布局——设计是宽敞且聚焦的。
- 不要使用衬线字体——排版是干净的无衬线字体。
- 不要使用刺眼、高对比度的颜色——配色方案柔和且具有亲和力。
- 不要使用小而拥挤的文字——字体大而清晰易读。
- 不要使用激进或紧迫的语言——语调平静而友好。
- 避免: 技术术语
- 避免: 正式或企业化的语言
- 避免: 激进的销售话术
11
System Prompt
Gridtravel 是一款面向旅行者的社区驱动步行路线应用，定位为友好易用的指南。其视觉身份由平静、通透的配色定义：浅蓝色（#E3F0FF）的天空背景、深墨色（#1A1A1A）以及明亮的蓝色点缀（#2979FF）。字体方面，标题使用简洁、几何感的 grotesque-sans，正文使用 humanist-sans，强调可读性和现代感。关键的设计禁忌包括避免深色模式、密集布局、衬线字体、刺眼颜色、小字体和激进语言。设计优先考虑留白、清晰度以及友好、以社区为导向的基调。