精选 · 开放 · 免费
Flutterwave
为Flutterwave设计团队的故事、氛围和作品集打造的温暖编辑式展示。
StudioEditorialCleanCurationTypography
01
设计气质 DNA
设计团队创意编辑策展Flutterwave
一本精致的数字杂志，展示企业设计团队的创意成果。
02
色彩
#171717Ink
#FFFFFFBG
#FCD2BABG quiet
rgba(23,23,23,0.2)Line
以暖调中性色为基底，搭配深色文字，依赖丰富多彩的图像而非界面点缀色来营造视觉趣味。
03
字体
transitional-serif · geometric-sans
- display
64px · 700 - display-sm
32px · 700 - body
18px · 400 - caption
12px · 400
展示文本使用高对比度过渡衬线字体（Millik），以获得强烈的视觉冲击力。 · 正文和界面文本使用干净的几何无衬线字体（Moderat），确保出色的可读性。 · 大型展示文本应使用紧凑的负字距（-0.8px至-1px），营造紧凑的编辑感。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
宽松
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
最小化
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
文本采用居中单栏，视觉内容采用水平滚动轮播
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.16, 1, 0.3, 1)easing
水平滚动 · 平滑过渡
交互元素上显示指针光标 · 可拖动轮播显示抓取光标
08
组件
- button 带最小权重的圆角轮廓按钮
- card 以大图为主、带叠加文本的卡片
- hero 带副标题的大型居中标题
09
文案语气与禁用清单
- 语气 友好
- 标题风格 粗体、直接、略带俏皮
- 按钮文案 大写、极简、基于文本
- 不要使用冰冷、全灰色的企业调色板——截图显示有温暖的蜜桃色（#FCD2BA）和丰富的图像。
- 不要使用纤细、浅色的字体做标题——截图显示使用了粗体、高对比度的衬线展示字体。
- 不要使用紧凑的内边距和密集的布局——截图显示元素周围有充足的留白。
- 不要仅依赖界面色彩来传递情感——截图显示氛围由精选摄影和插画驱动。
- 不要为交互元素使用尖锐的方形角——截图显示使用了5px的圆角边框。
- 不要模糊视觉层次——截图清晰区分了大型展示文本和正文文本。
- 避免: 企业术语
- 避免: 僵化正式感
- 避免: 侵略性销售语言
- 避免: 复杂的视觉杂乱
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
为一个创意工作室或设计团队设计一个友好、编辑风格的网站。布局应像一本精心策划的数字杂志，使用纯白背景和辅助的暖蜜桃色（#FCD2BA）进行章节区分。展示标题使用粗体过渡衬线字体（如Millik），正文使用干净的几何无衬线字体（如Moderat），大型文本使用紧凑的负字距。核心交互模式应以水平滚动轮播来展示视觉作品，并使用'抓取'光标。严格避免：厚重的阴影、密集/拥挤的布局、冰冷的企业调色板，或使用单一点缀色驱动界面——视觉趣味必须来自作品集丰富、多彩的图像。
en · zh-CN · zh-TW · ja · ko