精选 · 开放 · 免费
Merci-Michel
一个高端创意工作室网站，以大胆的衬线字体置于沉浸式动画背景之上为特色。
studiocreative
01
设计气质 DNA
游戏化创意体验式品牌趣味性
一个高端创意机构网站，将优雅的衬线字体与沉浸式、色彩丰富的3D和电影感背景相融合，以展示其作品。
02
色彩
#ffffffInk
#000000BG
rgba(255,255,255,0.2)Line
高对比度与沉浸感，在全屏、动态、深色或多彩背景上使用白色文字。
03
字体
didone-serif · monospace
- display
70px · 400 - display-italic
64px · 400 - body
16px · 400 - caption
12px · 400 - micro
11px · 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
动效与交互
300msmicro
500mssmall
800msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
页面元素的平滑淡入和变换过渡。 · 背景图像或3D元素上的类视差效果。 · 文本和UI组件的交错动画。
微妙的透明度变化或平滑过渡。 · 即时响应，状态变化平滑。
08
组件
- button 纯文本按钮，通常大写并带有字间距，有时带有垂直分隔线。
- card 全屏背景卡片或图像覆盖层。
- hero 一个全视口区块，包含大型衬线标题、等宽字体描述和行动号召链接，设置在动画或3D背景之上。
09
文案语气与禁用清单
- 语气 自信、创意且专业。
- 标题风格 大胆、优雅的衬线字体，常与艺术化的斜体混用。
- 按钮文案 低调、大写、等宽字体文本链接。
- 不要使用无衬线字体做标题——截图显示的是优雅的迪多内衬线展示型字体。
- 不要使用明亮、纯色的背景——截图显示的是深色、电影感或插图丰富的背景。
- 不要在UI元素上使用圆角——截图显示的是直角边缘或完全圆形的胶囊形状。
- 不要在正文中使用小写——截图显示的是广泛使用的大写和字间距。
- 不要使用重网格、多列布局——截图显示的是居中、全宽的内容块。
- 不要使用狭小、紧凑的间距——截图显示的是大量留白和全视口区块。
- 避免: 喧闹或霓虹色
- 避免: 趣味、圆润的无衬线字体
- 避免: 复杂的网格布局
- 避免: 繁杂或杂乱的背景
- 避免: 明亮、扁平的UI组件
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个数字游戏化机构的高端创意工作室网站。其特点是高对比度美学，在沉浸式、深色和多彩的3D背景上使用白色文字。排版混合了优雅的迪多内衬线字体用于展示，以及等宽字体用于正文。布局居中且宽敞，聚焦于大型全屏主视觉区块。关键颜色为 #000000 和 #ffffff，背景媒体中包含丰富的蓝色、红色和粉色。关键禁忌：不要使用无衬线字体做标题，不要使用纯色明亮背景，不要使用圆角，不要使用小写文本，不要使用重网格布局，不要使用紧凑间距。
en · zh-CN · zh-TW · ja · ko