OpenDesign·你的设计资产库

网页参考

Hle

一幅高对比的深色画布,以超大排版构建,定位为人才与内容的高端主轴。

Dark ModeTypographyEditorialPremiumAI

封面待补录,可通过原站查看设计。

01

设计气质 DNA

极简编辑风格高端深色

一本奢侈品牌的专著。

02

色彩

#FFFFFFInk
#101011BG
#2B2B2BBG soft
#383838BG quiet
#717172Muted
rgba(255,255,255,0.1)Line

极致对比:纯白文字置于近黑背景上,辅以柔和灰色用于次要 UI 元素。

03

字体

geometric-sans · monospace

  • display118px · 400
  • body15px · 400
  • caption10px · 400

主 sans-serif 字体为几何风格,简洁且高度易读。 · 等宽字体用于特定的 UI 元素与标签。 · 所有文字均采用常规字重(400)。

04

间距

4px
8px
12px
16px
24px
32px
48px
64px

以 4px 为基准网格管理所有间距,区块容器的 padding 较为充裕(40px-48px)。

05

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

sm · 0px
md · 12px
lg · 50px
pill · 999px

少量使用纤细、低不透明度的白色边框或深色实线边框。

卡片与按钮采用细腻的 neumorphic 效果,通过内嵌与外凸阴影营造层次感。 · 阴影使用低不透明度的黑色与灰色,与深色背景自然融合。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

采用清晰的分栏布局,注重留白与垂直韵律。

07

动效与交互

220msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

首屏标题似乎采用了打字或揭示动画效果。 · 交互状态使用 transforms 与 transitions 进行过渡。

交互元素在悬停时,阴影深度或颜色强度发生细微变化。 · 按钮与链接在点击时产生细微的缩放或 transform 效果。

08

组件

  • button Neumorphic 风格的深色按钮,带有细腻高光与阴影,常采用 50% border-radius 呈现药丸形状。
  • card 深色卡片,带有细微 neumorphic 阴影与 12px border-radius。
  • chip 在提供的截图中未明显呈现。
  • input 在提供的截图中未明显呈现。
  • hero 全屏深色首屏区域,由超大的左对齐标题主导,标题以打字或揭示动画呈现。

09

文案语气与禁用清单

  • 语气 自信、直接、极简。
  • 标题风格 超大、加粗、宣言式,采用“陈述”风格。
  • 按钮文案 克制地融入 neumorphic 设计系统。
  • 勿使用明亮、饱和的强调色——截图显示严格单色。
  • 勿使用装饰性衬线字体——截图显示所有文字均为简洁的几何 sans-serif。
  • 勿使用厚重、不透明的投影——截图展示细腻的 neumorphic 阴影技术。
  • 勿创建拥挤的布局——截图呈现极简、高对比的设计,留有大量空白。
  • 勿使用粗体或极重字重——截图显示所有文字均为常规(400)字重。
  • 勿在各处使用圆润、柔和的边角——截图显示了尖角与高度圆润(50%)半径的混合使用。
  • 避免: 彩色渐变
  • 避免: 趣味插图
  • 避免: 拥挤布局

10

包内真实截图

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

11

System Prompt

这是一个用于高端编辑或人才平台的极简深色模式设计系统。调色板严格单色:近黑背景(#101011)搭配纯白(#FFFFFF)标题与中灰(#717172)柔和文字。排版是核心特征,采用简洁的几何 sans-serif,字号巨大(最高 118px),字重为常规。布局宽敞且基于分栏。关键禁忌:绝不使用明亮的强调色,绝不使用装饰性衬线字体,并避免厚重不透明的投影,偏好细腻的 neumorphic 效果。系统优先考虑极致对比、充裕留白以及自信、宣言式的排版语调。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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