精选 · 开放 · 免费
Collins
一个高端设计代理网站，平衡了大胆的编辑排版与克制、精致的极简主义。
brandingstudio
01
设计气质 DNA
精致权威编辑高端
高端设计代理工作室
02
色彩
#140700Ink
#d0d0c8Ink soft
#f8f8f7BG
#ffffffBG soft
#efefefBG quiet
#514c49Muted
rgba(208, 208, 200, 0.5)Line
近乎单色，搭配微妙的暖灰色和高对比度的墨色，以获得最大的编辑冲击力。
03
字体
transitional-serif · humanist-sans
- display
72px · 400 - heading
36px · 400 - body
16px · 400 - caption
14px · 400
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
宽裕的留白搭配紧凑的字距，创造出有呼吸感的编辑节奏
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 16px
lg · 96px
pill · 999px
使用中性暖灰色的微妙 1px 边框
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中主视觉区，配有宽裕的垂直内边距，后接不对称的内容板块
07
动效与交互
250msmicro
400mssmall
800msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
裁剪路径显现 · 变换滑动 · 透明度渐变
微妙的颜色过渡，使用 0.7秒缓动 · 即时反馈，无弹跳效果
08
组件
- button 极简药丸形按钮，深色墨色填充搭配白色文字
- card 大型、以图片为主的卡片，圆角（16px），用于展示案例研究
- chip 月桂枝边框的奖项徽章，采用水平 flex 布局排列
- input 极简的行内文本框，带微妙边框
- hero 全视口居中标题，配有充足的垂直呼吸空间
09
文案语气与禁用清单
- 语气 权威而富有吸引力
- 标题风格 简短、有力的祈使句，带句号
- 按钮文案 简单的单词操作（探索）
- 不要使用鲜艳的强调色——网站依赖近乎单色的色板，无主导强调色
- 不要使用厚重的投影——界面设计是扁平且干净的
- 不要在标题上使用紧凑的行距——全文保持宽裕的垂直节奏
- 不要为展示文字使用无衬线体——主视觉标题仅使用衬线体
- 不要在布局中堆砌多个元素——每个板块保持最大留白和单一焦点
- 不要使用装饰性边框——唯一可见的边框是 1px 的微妙分隔线
- 避免: 技术术语
- 避免: 过于随意的语言
- 避免: 泛泛的营销说辞
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个为 Collins 设计的高端设计代理网站，具有编辑、克制的美学风格。色板近乎单色：米白色背景（#f8f8f7）、近黑墨色（#140700）和微妙的暖灰色（#d0d0c8, #514c49）。没有主导的强调色。排版在用于展示标题的过渡衬线体（紧凑负字距）和用于正文的人文主义无衬线体之间交替。宽裕的留白创造出有呼吸感的编辑节奏。关键约束：永不添加彩色强调色，永不为大号文字使用紧凑间距，永不使布局杂乱，永不用无衬线体作为主视觉展示字体，始终保持克制的高端基调，并始终优先呈现以图片为主的案例研究板块，而非文字密集的板块。
en · zh-CN · zh-TW · ja · ko