OpenDesign·你的设计资产库

网页参考

Heylow

一个面向目标驱动型组织的设计与代码合作伙伴,帮助他们像其作品一样,展现出深思熟虑的姿态。

AgencyCleanBold TypographyPremiumCalm
Heylow 网站截图

01

设计气质 DNA

设计代码合作伙伴目标导向低碳持久耐用

一个高端、目标驱动的创意工作室,在设计与数字执行中都重视清晰、优雅与可持续性。

02

色彩

#faf8f3Ink
#a8a3a1Ink soft
#0f0e0cBG
#4a4643Muted
rgba(74, 70, 67, 1.0)Line

深沉、温暖、大地色的单色系调色板,搭配高对比度文字以确保清晰度与焦点。

03

字体

humanist-sans

  • display160px · 400
  • h148px · 400
  • body20px · 400
  • caption12px · 400

大型展示文字使用紧凑的字距,营造精致、现代的感觉。 · 正文文本保持充足的行高(1.6),以确保可读性。 · 导航与小型标签采用大写形式,并配以宽松的字母间距。 · 所有文字保持统一的400字重,以呈现宁静、统一的视觉效果。

04

间距

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

所有间距均使用一致的4px基础网格,提供结构化且可预测的布局节奏。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

使用1px细边框,采用柔和的大地色调(#4a4643 或 #faf8f3),用于构建布局和定义交互区域,避免视觉重量感。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

通过虚线边框线呈现强烈、可见的网格结构,强调建筑般的精确性。

07

动效与交互

200msmicro
200mssmall
500msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing

悬停时微妙的透明度过渡。 · 菜单交互时平滑的淡入淡出。 · 极简、有意的动态,不分散对内容的注意力。

微妙的透明度变化,指示可交互性。 · 立即反馈,配以极简动画。

08

组件

  • button 极简的文本按钮,标签采用大写形式并配以充足内边距,通过细微边框定义。
  • card 内容区域由细边框与充足留白定义,而非使用凸起的卡片效果。
  • chip 用于分类或元数据的小型大写文本标签。
  • input 简洁、极简的输入框,采用底部边框。
  • hero 巨大的、粗体的排版文字标识占据视口,搭配描述性文案。

09

文案语气与禁用清单

  • 语气 专业、深思熟虑、体贴。
  • 标题风格 直接、简洁、有冲击力。
  • 按钮文案 低调、行动导向,常以简单文本链接形式呈现。
  • 不要使用明亮、饱和的强调色——截图显示的是单色、大地色系的调色板。
  • 不要使用装饰性或手写字体——截图显示的是干净的人文无衬线字体。
  • 不要使用厚重的投影或渐变——截图显示的是带有细边框的平面化表面。
  • 不要为正文使用大写文本——截图显示大写仅用于小型标签和导航。
  • 不要使用粗重的边框——截图显示的是1px的柔和色调细线条。
  • 不要使用复杂、拥挤的布局——截图显示的是宽敞、基于网格的结构,并配有充足留白。
  • 避免: 避免使用喧闹、激进或过于充满活力的语言。
  • 避免: 避免在界面中堆砌过多元素。
  • 避免: 避免使用明亮、饱和的强调色来破坏宁静的调色板。

10

包内真实截图

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

11

System Prompt

这是一个名为Heylow的设计与代码合作伙伴机构的作品集网站。其设计以宁静、精致且深思熟虑的美学为特点。关键色彩包括深沉的暖黑色(#0f0e0c)背景,搭配浅色暖米白文字(#faf8f3)与柔和的灰色点缀(#a8a3a1, #4a4643)。排版使用干净的人文无衬线字体家族,采用多种字重,重点突出粗体、超大尺寸的文字标识展示。布局宽敞且基于网格,结构线条清晰可见。关键禁忌:不要使用明亮、饱和的强调色;不要使用装饰性或手写字体;不要用不必要的元素或厚重的视觉效果堆砌界面;不要为正文使用大写文本;不要使用厚重的投影;不要使用复杂、拥挤的布局。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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