精选 · 开放 · 免费

Work & Co

一个极简、自信的机构作品集，让排版与高知名度客户项目自行发声。

agencyproduct

Work & Co 网站截图

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

原站: https://work.co

📦 浏览包内文件 →

01

设计气质 DNA

策略设计科技企业问题解决

一家享有声誉的设计与科技咨询公司。

02

色彩

#DB2223Accent

#000000Ink

#FFFFFFBG

#DDDDDDMuted

rgba(0,0,0,1.0)Line

高对比度极简主义，搭配单一强烈的红色点缀。

03

字体

transitional-serif

display56px · 500
heading36px · 400
body16px · 400

所有主文本和标题使用过渡型衬线字体。 · 小型实用文本或特定品牌标志使用无衬线字体（如 'Part of Accenture Song' 中所示）。 · 大标题采用紧凑的字间距。

04

间距

4px

8px

16px

24px

32px

48px

64px

96px

宽松的垂直间距，主要版块间采用大内边距（60px, 100px）。

05

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

sm · 0px

md · 0px

lg · 0px

pill · 999px

使用 1px 实线细边框分隔版块。

0px -1px 0px 0px inset rgb(0,0,0)

06

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

不对称双栏网格（1/3 标签，2/3 内容），移动端自动折叠。

07

动效与交互

250msmicro

300mssmall

500msmedium

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

文本链接的颜色与下划线过渡效果。

文字颜色变化或下划线动画。 · 标准指针光标。

08

组件

button 带下划线的文本链接，采用点缀色红色或黑色。
card 极简卡片，顶部对齐图片，下方为简洁的衬线文本。
hero 大型左对齐文本块，附带引言和行动号召（CTA）。

09

文案语气与禁用清单

语气权威、简洁、含蓄。
标题风格 陈述性，略带学术感。
按钮文案 简洁的带下划线文本链接（例如'了解更多'）。

不要为排版主体使用无衬线字体——截图显示高度依赖过渡型衬线字体。
不要使用多种点缀色——截图显示仅一致使用红色（#DB2223）作为强调。
不要使用投影来增加深度——截图显示完全扁平的 2D 布局，无可见投影元素。
不要将布局居中——截图显示文本和版块结构始终左对齐。
不要为卡片或界面元素使用圆角——截图显示所有矩形元素均为尖角（0px 圆角）。
不要为正文使用粗体——截图显示标准文本的 font-weight 始终为 400。
避免: 术语
避免: 过度使用大写
避免: 醒目的行动号召按钮

10

包内真实截图

Work & Co — 桌面首屏（hero） — 桌面首屏（hero）

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

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

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

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

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

Work & Co — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

这是一个专业机构网站 Work & Co 的设计规范，采用极简、高对比度设计。主色调为纯白（#FFFFFF）与黑（#000000），搭配单一强烈的红色点缀（#DB2223），用于标志和链接。排版严重依赖过渡型衬线字体用于标题与正文，营造编辑感，而无衬线字体严格用于小型实用标签，如 'Part of Accenture Song' 署名。布局采用不对称双栏网格，配有宽松的垂直内边距。关键注意事项：切勿使用投影，切勿将主要内容块居中，切勿偏离单一的红色点缀色。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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