精选 · 开放 · 免费
Hygraph
一款AI驱动的Headless CMS，旨在加速企业团队的内容交付速度。
cmsdev
01
设计气质 DNA
Headless CMS内容交付速度结构化内容AI驱动
企业内容运营的高性能引擎。
02
色彩
#685CEFAccent
#081026Ink
#2D3A5FInk soft
#FFFFFFBG
#F6F8F9BG soft
#E7EAEFBG quiet
#566A95Muted
rgba(231, 234, 239, 1.0)Line
干净专业，以鲜明的紫色作为点缀，用于突出关键操作和状态变化。
03
字体
geometric-sans · humanist-sans · monospace
- display
56px · 500 - headline
40px · 500 - subtitle
20px · 400 - body
16px · 400 - label
14px · 500
标题使用几何无衬线字体，营造现代、结构化的视觉效果。 · 正文使用人文主义无衬线字体，确保高可读性。 · 等宽字体（Space Grotesk）用于代码片段和技术细节。 · 大写字母谨慎用于标签和导航元素。 · 大写文本的字距会略微增加以提升辨识度。
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
统一采用4px基础网格，用于内边距、外边距和布局间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 6px
md · 8px
lg · 10px
pill · 9999px
1px solid rgba(231, 234, 239, 1.0)
None: rgba(0, 0, 0, 0.047) 0px 12px 12px 0px, rgba(0, 0, 0, 0.055) 0px 25px 25px 0px · None: rgba(91, 76, 255, 0.6) 0px 2px 4px 0px, rgb(91, 76, 255) 0px 0px 0px 1px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
采用标准12列网格系统，最大宽度为1280px，在768px和1024px处设有响应式断点。
07
动效与交互
150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素的弹性hover状态使用微妙的弹性动画（cubic-bezier(0.18, 0.89, 0.31, 1.57)）。 · 颜色、背景色和边框色的变化使用平滑过渡（0.15秒）。 · 元素的显隐使用不透明度渐变（0.3秒）。
按钮和链接等交互元素在hover时会有细微的颜色或背景变化，通常伴随微妙的弹性动画。 · 点击元素可能触发轻微的变换或颜色变化以提供反馈。
08
组件
- button 主按钮为药丸形（9999px圆角），纯紫色背景（#685CEF）配白色文字。次按钮为淡薰衣草背景（#E8E9FF）配紫色文字。
- card 卡片是简单的容器，带有微妙边框、白色背景和极简阴影。
- chip 用于标签或标记的小型药丸状元素，通常为浅色背景配细微边框。
- input 文本输入框带有细微边框、圆角和干净的白色背景。
- hero 一个大型、居中的hero区域，包含醒目的标题、副文本和明确的行动号召。
09
文案语气与禁用清单
- 语气 专业、自信且富有远见。
- 标题风格 大型、有冲击力的标题，清晰阐述价值主张。
- 按钮文案 直接且以行动为导向，例如“联系我们”或“立即开始”。
- 避免使用既定紫色配色方案之外的刺眼、高饱和度颜色。
- 避免使用厚重、黑体或高度装饰性的字体作为标题。
- 避免使用全深色模式主题，因为截图展示的是明亮、通透的界面。
- 避免在按钮或卡片上使用尖锐的90度直角，因为设计倾向于更柔和、圆润的形状。
- 避免为主内容使用密集、多栏文本布局，因为设计倾向于干净、居中的阅读路径。
- 避免使用会与文本内容争夺注意力的大型复杂背景图片。
- 避免: 过于随意的语言
- 避免: 缺乏上下文的技术术语
- 避免: 被动语态
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
你正在为一个AI驱动的Headless CMS设计一个专业、面向企业级的B2B SaaS网站。设计应干净、通透且值得信赖，使用白色背景，以主紫色（#685CEF）引导行动号召。字体是几何无衬线标题与人文主义无衬线正文的混合，两者都具有高可读性。关键元素包括圆形按钮（药丸形）、微妙的阴影和充足的留白。不要使用深色模式，不要在交互元素上使用尖角，不要使用密集、杂乱的布局。整体感觉应体现精准、高效和现代科技。
en · zh-CN · zh-TW · ja · ko