01
设计气质 DNA
创意机构高活力粗犷趣味性作品集
一个粗犷、充满活力的创意工作室,运用表现力字体与鲜明色彩来吸引注意力。
02
色彩
#FF5D60Accent#000000Ink#333333Ink soft#FFFFFFBG#555555Mutedrgba(0, 0, 0, 1)Line高对比度,搭配鲜明的珊瑚色点缀与摄影背景。
03
字体
- display
123px · 700 - heading
70px · 700 - body
18px · 700 - small
12px · 400
大多数文本元素使用粗体(700)。 · 标题类文本使用紧凑的行高。 · 导航与标签使用大写字母。
04
间距
4px8px16px24px32px48px64px75px96px大号字体周围使用充裕的内边距,UI元素之间使用紧凑的间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid #000000
0 0 10px 0 rgba(0, 0, 0, 0.12) · 0 0 20px 0 rgba(0, 0, 0, 0.1)
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
全宽图片主视觉后接大号字体章节。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.77, 0, 0.175, 1)easing
悬停状态与菜单交互的平滑过渡。 · 字体的视差或滚动触发动画。
按钮颜色反转或背景色变化。 · 微妙的尺寸缩放或透明度变化。
08
组件
- button 药丸形按钮,采用珊瑚色背景配白色文字,或白色背景配黑色文字与黑色边框。
- card 极简卡片,包含大号字体与摄影元素。
- chip 药丸形标签或标记。
- input 极简表单输入框,带有黑色边框。
- hero 全屏摄影主视觉,叠加文字或极简页头。
09
文案语气与禁用清单
- 语气 自信、直接、略带趣味。
- 标题风格 超大号、粗体,常采用小写或句首大写。
- 按钮文案 行动导向,配有箭头图标。
- 不要使用微妙或低调的字体——截图显示的是超大号、粗体的标题。
- 不要使用柔和或粉彩的配色——截图显示的是鲜明的珊瑚色点缀(#FF5D60)和高对比度的黑白配色。
- 不要使用没有大号字体的复杂网格——截图显示的是充裕的留白和超大号文本。
- 不要使用衬线字体作为标题——截图显示的是粗犷的无衬线字体。
- 不要使用小而密集的段落——截图显示的是简短、有力的文案和较大的行高。
- 不要为大多数元素使用圆角——截图显示的是直角边缘或药丸形按钮。
- 避免: 微妙或低调的字体。
- 避免: 柔和或粉彩配色。
- 避免: 没有大号字体的复杂网格或布局。
- 避免: 没有清晰、富有表现力主题的图库摄影。
- 避免: 用于标题的衬线字体。
- 避免: 小而密集的段落文本。
10
包内真实截图














11
System Prompt
这是一个粗犷、高活力的创意机构网站。使用鲜明的珊瑚色点缀(#FF5D60),搭配黑白分明的配色。字体是主要的设计驱动力,使用粗犷的无衬线字体作为超大号标题和正文。布局充裕,注重留白,聚焦于大号字体和摄影元素。避免微妙或低调的设计选择、柔和的色彩,以及没有大号字体的复杂网格。确保所有交互元素都有平滑、可见的过渡,并保持自信、直接的语调。