精选 · 开放 · 免费
Use All Five
一个高端数字设计与科技工作室网站,采用开阔渐变与醒目排版。
studiodigital
01
设计气质 DNA
数字创意机构设计工作室科技创意创新
一个融合大胆排版与空灵渐变的高端设计工作室作品集
02
色彩
#000000Ink
#FFFFFFBG
#969696Muted
rgba(0,0,0,1.0)Line
白色背景或柔和渐变上的高对比度黑色文字。
03
字体
geometric-sans
- display
67px · 500 - h1
40px · 400 - body
18px · 400
大型展示字体使用紧凑的负字间距。 · 正文文本通过充裕行高确保高度可读性。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
通过充裕的留白和内边距来强调大型排版与图像。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
极简或无边框;依赖色彩对比与间距分隔。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
非对称的分栏布局,一侧为巨型排版,另一侧为内容/图像。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
文本与图像滚动时淡入。 · 链接hover状态平滑过渡。
微妙的透明度变化或简洁的下划线/箭头动画。 · 即时状态切换。
08
组件
- button 简洁的文本链接带箭头,无实体背景。
- card 以图像为核心的案例研究模块,标题与描述间留有大量间距。
- hero 全屏、以排版为核心的主视觉区域,背景为柔和的多段柔和渐变。
09
文案语气与禁用清单
- 语气 自信、专业、富有远见。
- 标题风格 关于可能性与创造的醒目、宣言式标题。
- 按钮文案 简洁的文本链接带箭头(如‘查看我们的作品 →’)。
- 不要为区块使用纯色背景——截图显示的是开阔的柔和渐变。
- 不要使用字重过大、窄体的字体——截图显示的是常规/中等字重的几何无衬线字体。
- 不要使用小而紧凑的网格——截图显示的是开阔、留白充裕的布局。
- 不要使用主色调按钮——截图显示的是简洁的文本链接带箭头。
- 不要为元素添加投影——截图显示的是极简或无边框的扁平面板。
- 不要使用复杂的多栏文本布局——截图显示的是单一清晰栏目或分栏布局。
- 避免: 避免使用行话或过于技术性的流行词汇。
- 避免: 避免杂乱布局或繁忙背景。
- 避免: 避免使用难以阅读的小号文字。
- 避免: 避免使用多种强调色争夺注意力。
- 避免: 避免使用厚重阴影或3D效果。
- 避免: 避免使用实心按钮等标准UI模式。
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
一个高端数字设计与科技工作室作品集。关键特征是开阔的多段柔和渐变(柔桃色、青色、薰衣草色)与醒目的黑色几何无衬线排版。布局高度非对称且留白充裕。不使用纯色按钮或投影;行动号召为简洁文本链接。关键禁忌:避免纯色区块背景、避免过重字重、避免使用标准UI按钮。
en · zh-CN · zh-TW · ja · ko