OpenDesign·你的设计资产库

网页参考

Sirup Online

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

EditorialPremiumBold TypographyCurationPhotographic
Sirup Online 网站截图

01

设计气质 DNA

艺人周年纪念高端编辑式大胆

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

02

色彩

#000000Ink
#ffffffBG
#4554acMuted
rgba(255, 255, 255, 0.88)Line

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

03

字体

transitional-serif · humanist-sans

  • display120px · 700
  • body16px · 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

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这是一个庆祝五周年纪念的高端编辑风格艺人网站。它以巨大、高对比度的过渡型衬线展示字体(如 'Glodok' 或 'Termina')层叠在富有张力的摄影和渐变背景上。主色调是黑色和白色文字置于复杂背景之上,并点缀柔和的蓝色(#4554ac)。正文使用中性的人文主义无衬线字体。关键禁忌:不要使用标准网格布局,不要使用友好或圆润的UI元素,不要使用小尺度的展示文本。布局高度不对称,元素重叠并包含垂直文本,营造出精致的、杂志般的体验。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。