精选 · 开放 · 免费
Vividand
以粗体字和3D玻璃质感为特色的高端深色模式设计机构作品集。
AgencyPremiumFintechDark ModeBold Typography
01
设计气质 DNA
高端战略设计机构金融科技大胆
一家构建无形框架的高端建筑工作室。
02
色彩
#FFFDF9Ink
#6F879CInk soft
#101010BG
#1a1a1aBG soft
rgba(255, 253, 249, 0.2)Line
深炭灰色为布局奠定基调，高对比度的米白色文字确保绝对的可读性与高端质感。
03
字体
geometric-sans
- display
105px · 700 - body
20px · 400
次要导航和标签使用大写字母 · 大尺寸展示文字保持紧凑的字间距
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
主要板块之间采用充足的垂直间距（48px-96px），营造通透、电影般的感受。
05
表面 (圆角 / 阴影 / 边线)
sm · 15px
md · 15px
lg · 15px
pill · 999px
仅用于水平分隔线，采用最小化、1px宽的低透明度白色实线。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
首屏采用不对称分割布局；列表为全宽设计，文字左对齐，配有水平分隔线。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.52, 0.01, 0, 1)easing
文字区块缓慢淡入 · 3D元素采用平缓的cubic-bezier变换 · UI过渡采用清晰的线性透明度变化
交互元素上微妙的透明度变化。 · 最小化的视觉反馈；依赖过渡效果。
08
组件
- button 极简的文字链接或简单几何形状。
- card 无可见卡片；信息以简洁的列表行呈现。
- chip 无可见标签。
- input 无可见输入框。
- hero 大尺寸字体搭配深色背景上微妙的3D玻璃渲染元素。
09
文案语气与禁用清单
- 语气 自信、直接且低调权威。
- 标题风格 简短有力，通过字体排印进行高度风格化处理。
- 按钮文案 极简，通常仅为文字或微妙的几何提示。
- 避免使用亮色强调色——截图显示为严格的单色配色，仅带灰蓝色调点缀。
- 避免标题使用衬线字体——截图显示仅使用几何无衬线字体。
- 避免使用浓重的投影——截图显示为平坦、洁净的表面，无3D景深阴影。
- 避免所有文字居中对齐——截图显示标题采用强烈的左对齐排版。
- 避免使用繁复的背景图案——截图显示为纯色深炭灰背景。
- 避免所有元素使用圆角——截图显示为锐利边缘或特定的15px圆角半径。
- 避免: 杂乱
- 避免: 明亮霓虹色
- 避免: 俏皮动画
- 避免: 企业行话
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
为Vivid+Co打造的高端设计机构作品集，以深炭灰色背景（#101010）和高对比度米白色字体（#FFFDF9）为特色。视觉系统采用几何无衬线字体，营造粗体、现代的美学风格。配有3D玻璃渲染元素和简洁的水平分隔线。关键限制：避免衬线字体，避免亮色强调色，避免浓重投影，并保持充足的垂直间距以维持电影般的高端感。
en · zh-CN · zh-TW · ja · ko