精选 · 开放 · 免费

Contentful

一个专注于企业内容管理和个性化的专业SaaS平台。

cmsdev
Contentful 网站截图
↓ 下载设计系统包 (15 MB)在 OpenDesign 中打开

原站: https://www.contentful.com

📦 浏览包内文件 →

01

设计气质 DNA

内容管理开发者平台企业级个性化数字体验

为开发者和内容团队打造的简洁、专业的工作空间，强调清晰与高效。

02

色彩

#3C80CFAccent
#2B2D31Ink
#6D7682Ink soft
#FFFFFFBG
#F5F7F9BG soft
#E4EFF8BG quiet
#55575BMuted
rgba(229, 231, 235, 1)Line

专业克制，辅以柔和的蓝色点缀配色方案，以实现清晰度和可信度。

03

字体

humanist-sans · monospace

标题采用紧凑的负字间距以增强视觉冲击力。 · 正文保持充足的行高以确保可读性。 · 字体权重主要使用常规（400），UI元素使用半粗体（600）。

04

间距

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

网格项和章节之间保持一致的32px间距。

05

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

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

1px solid #E5E7EB

rgba(0, 0, 0, 0.25) 0px 0px 20px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中内容区，配有宽导航栏和充足的垂直内边距。

07

动效与交互

100msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

hover时平滑的颜色和背景色过渡。 · UI状态变化时的变换和透明度过渡。

文本链接的颜色变化和按钮的背景变化。 · 细微的变换或透明度降低。

08

组件

09

文案语气与禁用清单

10

包内真实截图

Contentful — 桌面首屏（hero）
桌面首屏（hero）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

这是Contentful的主页，一个专注于企业内容管理的专业SaaS平台。设计简洁、克制，聚焦于清晰度。关键颜色包括白色背景（#FFFFFF）、柔和灰色区块（#F5F7F9）和主要蓝色强调色（#3C80CF）。字体使用人文无衬线字体（Avenir Next），配有大号、间距紧凑的展示标题和舒适的正文。关键注意事项：不要使用衬线字体，不要使用霓虹色，不要使用厚重的深色边框，不要使用尖锐直角，不要使用过紧的正文行距，不要使用复杂的背景渐变。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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