精选 · 开放 · 免费
Sirup Online
一个高端、编辑风格的艺人展示网站,通过大胆排版和富有张力的摄影庆祝五周年纪念。
EditorialPremiumBold TypographyCurationPhotographic
01
设计气质 DNA
艺人周年纪念高端编辑式大胆
一本音乐艺人里程碑的高级时装杂志封面。
02
色彩
#000000Ink
#ffffffBG
#4554acMuted
rgba(255, 255, 255, 0.88)Line
在复杂的摄影或渐变背景上使用单色文字,依靠对比度和尺度建立层级。
03
字体
transitional-serif · humanist-sans
- display
120px · 700 - body
16px · 400
展示字体采用高对比度的过渡型衬线字体,以巨大尺度呈现。 · 正文字体为中性的人文主义无衬线字体。 · 垂直文本使用无衬线字体以保证可读性。 · 展示文本的字距紧凑。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
不对称的、由布局驱动的间距,通过重叠元素定义。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
极简,依赖于重叠的摄影图层。
06
布局
1920container
12columns
24pxgutter
768 / 1024breakpoints
全出血摄影主视觉,搭配分层排版和绝对定位。
07
动效与交互
125msmicro
250mssmall
500msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing
基于滚动的显现使用线性过渡。 · 交互元素使用 cubic-bezier 缓动效果。
交互元素上光标变为指针。 · 标准导航链接。
08
组件
- button 无明显的按钮组件;交互通过链接或图标实现。
- card 重叠的图片卡片,无背景,展示艺人肖像。
- chip 无标签组件。
- input 无输入框组件。
- hero 巨大的排版周年纪念主视觉,包含中央肖像和重叠文本。
09
文案语气与禁用清单
- 语气 自信、精致且富有庆典感。
- 标题风格 大胆、富有表现力且尺度夸张。
- 按钮文案 微妙,以文本链接或极简图标形式融入设计。
- 不要使用小而紧凑的展示文本——截图显示的是巨大、重叠的排版。
- 不要使用扁平、纯色的背景——截图显示的是复杂的摄影和渐变背景。
- 不要使用标准的基于网格的卡片布局——截图显示的是重叠、不对称的照片排布。
- 不要使用柔和的调色板——截图显示的是在鲜艳图像上使用高对比度文字。
- 不要使用标准、居中的UI组件——截图使用了绝对定位和垂直文本。
- 不要使用友好、圆润的视觉风格——截图展现的是锐利、高端的编辑式风格。
- 避免: 避免使用通用或过于活泼的无衬线标题字体。
- 避免: 避免使用杂乱的布局遮挡核心图像。
- 避免: 避免使用标准的按钮组件。
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个庆祝五周年纪念的高端编辑风格艺人网站。它以巨大、高对比度的过渡型衬线展示字体(如 'Glodok' 或 'Termina')层叠在富有张力的摄影和渐变背景上。主色调是黑色和白色文字置于复杂背景之上,并点缀柔和的蓝色(#4554ac)。正文使用中性的人文主义无衬线字体。关键禁忌:不要使用标准网格布局,不要使用友好或圆润的UI元素,不要使用小尺度的展示文本。布局高度不对称,元素重叠并包含垂直文本,营造出精致的、杂志般的体验。
en · zh-CN · zh-TW · ja · ko