精选 · 开放 · 免费

Hello Monday

一家为初创公司和产品部门打造数字与魔法般体验的创意机构。

agencycreative

↓ 下载设计系统包 (5 MB)在 OpenDesign 中打开

原站: https://hellomonday.com

📦 浏览包内文件 →

设计气质 DNA

创意机构产品创新数字体验协作

高端编辑杂志与现代创意工作室的结合。

色彩

#DB7093Accent

#000000Ink

#2C2D2EInk soft

#FFFFFFBG

#F8F6F5BG soft

#CACACAMuted

rgba(0, 0, 0, 0.3)Line

鲜明的黑白对比搭配单一活泼的点缀色，高度依赖留白与排版。

字体

transitional-serif · humanist-sans

display80px · 400
body-lg22px · 400
body-sm14px · 400

展示性排版使用经典的过渡衬线字体以获得最大视觉冲击力。 · 正文排版使用清晰的人文主义无衬线字体以获得高可读性。 · 字重主要使用常规体（400），细体（300）仅少量使用以形成微妙层级。

间距

4px

8px

16px

24px

32px

48px

64px

96px

垂直节奏通过充裕的内边距和大外边距建立，常使用基础值的较大倍数（例如 64px、71px）。

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

sm · 0px

md · 0px

lg · 0px

pill · 999px

使用 1px solid rgba(0, 0, 0, 0.3) 作为微妙的分区隔线；无圆角。

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

清晰的网格，包含独立的首屏区块、大型水平分隔线以及充裕的留白。

动效与交互

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

内容区块的淡入过渡 · 文本链接的悬停状态过渡

文本链接和交互元素上出现微妙的下划线或透明度变化。 · 立即响应，无厚重的反馈动画。

组件

button 基于文本的行动号召，采用简单的底部边框下划线，无背景填充。
card 极简的案例研究卡片，包含大尺寸图片和下方醒目的衬线字体文本。
hero 占据视口的大型排版文字，辅以微妙的插图图标。

文案语气与禁用清单

语气自信、专业，同时平易近人且富有玩味。
标题风格 粗体、有冲击力，常带有一丝异想天开或诗意。
按钮文案 直接且以行动为导向，以简单的下划线文本呈现。

不要在卡片或按钮上使用圆角——截图显示为锐利的 90 度角。
不要在界面上添加投影——截图显示为扁平、干净的布局。
不要使用混乱的配色方案——截图显示为严格的黑、白和单一点缀色方案。
不要将导航隐藏在复杂的巨型菜单后——截图显示为极简的汉堡图标。
不要在主要标题上使用无衬线字体——截图显示为醒目的过渡衬线展示字体。
不要用内容填满每个像素——截图显示为大量使用留白来创造焦点。
避免: 避免杂乱的布局或繁复的背景。
避免: 避免在团队部分使用图库照片；优先使用定制插图。
避免: 避免过于复杂的导航结构。

包内真实截图

Hello Monday — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

抓自真实页面 · 真 computed styles

System Prompt

这是一个为 Hello Monday 制作的创意机构作品集网站。设计是极简且高度编辑化的，特点是巨大的过渡衬线展示字体与清晰的人文主义无衬线正文字体之间的鲜明对比。配色方案以单色为主（黑色 #000000 和白色 #FFFFFF），带有温暖的米白色背景（#F8F6F5）和标志性的活泼粉色点缀（#DB7093）。布局高度依赖充裕的留白、锐利的 90 度直角和纤细的分隔线。关键设计约束包括：始终使用锐利、非圆角；始终使用充裕的垂直间距；绝不使用图库照片作为团队插图。整体感觉是精致、自信且高级的。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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