01
设计气质 DNA
灵感策展视觉空间画廊
一本高端视觉杂志与个人数字剪贴簿的融合。
02
色彩
#BC361BAccent#000000Ink#282828Ink soft#F9F7F3BG#8C8C8CMutedrgba(0, 0, 0, 0.12)Line极简主义画布搭配高对比度排版，让策展的摄影内容成为主要的视觉焦点。
03
字体
- display
66px · 400 - h2
38px · 400 - body
16px · 400
标题使用过渡衬线字体 (cosmosOracle)，并采用紧凑的字间距。 · UI 元素使用人文主义无衬线字体。 · 在大尺寸展示文字与背景之间保持高对比度。
04
间距
4px8px16px24px32px48px64px96px基于一致的 4px 基础网格，并采用类似 Tailwind 的标准间距阶梯。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
采用低不透明度 (rgba(0,0,0,0.12)) 的细微 1px 实线边框。
0px 4px 8px 0px rgba(0, 0, 0, 0.03) · 0px 6px 44px 0px rgba(0, 0, 0, 0.15)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中主视觉区域，搭配浮动、圆角的图片卡片。
07
动效与交互
150msmicro
200mssmall
550msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
在 hover 和 focus 状态下使用平滑的颜色淡入淡出和过渡效果。 · 为图片添加细微的浮动或缩放效果。
平滑的颜色过渡和细微的背景变化。 · 立即响应，并显示焦点环。
08
组件
- button 胶囊形按钮，可以是黑底白字的实心样式，也可以是带黑色文字的描边样式。
- card 圆角图片卡片，带有细微的投影和不同的旋转角度。
- chip 用于设置（例如 AI 内容）的胶囊形开关标签。
- input 大型、圆角的胶囊形搜索栏，带有细微边框和图标。
- hero 全宽居中布局，包含一个大号衬线标题和浮动的图片元素。
09
文案语气与禁用清单
- 语气 精致、富有启发性且极简。
- 标题风格 简短、引人共鸣的衬线体陈述（例如，“你的灵感空间”）。
- 按钮文案 直接而清晰（例如，“注册”、“获取应用”）。
- 避免使用装饰性或过于华丽的字体——截图展示的是简洁的过渡衬线字体和人文主义无衬线字体。
- 避免使用明亮、饱和的霓虹色——截图展示的是柔和的米白色画布 (#F9F7F3) 和黑色文字。
- 避免使用尖锐的方形边角——截图显示卡片和按钮使用了大圆角 (16px)。
- 避免使用厚重、粗大的边框——截图显示的是非常细微的 1px 低不透明度边框。
- 避免使用密集、文字过多的布局——截图显示了大量的留白和对大尺寸图片的关注。
- 避免使用复杂、多层的渐变——截图显示的是简单、单色调的背景。
- 避免: 杂乱的布局
- 避免: 明亮的霓虹色
- 避免: 厚重、装饰性强的字体
10
包内真实截图
11
System Prompt
一个用于策展和分享美学灵感的高级视觉发现平台 (COSMOS)。设计采用极简的米白色画布 (#F9F7F3)，让高对比度的黑色文字 (#000000) 和摄影内容成为视觉中心。排版将简洁的过渡衬线字体用于标题，人文主义无衬线字体用于 UI 元素，使用大字号和紧凑的字间距。关键禁忌：不要使用霓虹色或过度饱和的颜色，不要使用尖锐的方形边角，不要创建密集文字过多的布局，不要使用厚重装饰性的字体，不要使用复杂、分散注意力的渐变。