精选 · 开放 · 免费

Sirup Online

一个高端、编辑风格的艺人展示网站，通过大胆排版和富有张力的摄影庆祝五周年纪念。

01

设计气质 DNA

一本音乐艺人里程碑的高级时装杂志封面。

02

色彩

在复杂的摄影或渐变背景上使用单色文字，依靠对比度和尺度建立层级。

03

字体

transitional-serif · humanist-sans

• display120px · 700
• body16px · 400

展示字体采用高对比度的过渡型衬线字体，以巨大尺度呈现。 · 正文字体为中性的人文主义无衬线字体。 · 垂直文本使用无衬线字体以保证可读性。 · 展示文本的字距紧凑。

04

间距

不对称的、由布局驱动的间距，通过重叠元素定义。

05

表面 (圆角 / 阴影 / 边线)

极简，依赖于重叠的摄影图层。

06

布局

全出血摄影主视觉，搭配分层排版和绝对定位。

07

动效与交互

基于滚动的显现使用线性过渡。 · 交互元素使用 cubic-bezier 缓动效果。

交互元素上光标变为指针。 · 标准导航链接。

08

组件

• button 无明显的按钮组件；交互通过链接或图标实现。
• card 重叠的图片卡片，无背景，展示艺人肖像。
• chip 无标签组件。
• input 无输入框组件。
• hero 巨大的排版周年纪念主视觉，包含中央肖像和重叠文本。

09

文案语气与禁用清单

• 语气 自信、精致且富有庆典感。
• 标题风格 大胆、富有表现力且尺度夸张。
• 按钮文案 微妙，以文本链接或极简图标形式融入设计。

• 不要使用小而紧凑的展示文本——截图显示的是巨大、重叠的排版。
• 不要使用扁平、纯色的背景——截图显示的是复杂的摄影和渐变背景。
• 不要使用标准的基于网格的卡片布局——截图显示的是重叠、不对称的照片排布。
• 不要使用柔和的调色板——截图显示的是在鲜艳图像上使用高对比度文字。
• 不要使用标准、居中的UI组件——截图使用了绝对定位和垂直文本。
• 不要使用友好、圆润的视觉风格——截图展现的是锐利、高端的编辑式风格。
• 避免: 避免使用通用或过于活泼的无衬线标题字体。
• 避免: 避免使用杂乱的布局遮挡核心图像。
• 避免: 避免使用标准的按钮组件。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko