Hygraph

企业内容运营的高性能引擎。

干净专业，以鲜明的紫色作为点缀，用于突出关键操作和状态变化。

geometric-sans · humanist-sans · monospace

• display56px · 500
• headline40px · 500
• subtitle20px · 400
• body16px · 400
• label14px · 500

标题使用几何无衬线字体，营造现代、结构化的视觉效果。 · 正文使用人文主义无衬线字体，确保高可读性。 · 等宽字体（Space Grotesk）用于代码片段和技术细节。 · 大写字母谨慎用于标签和导航元素。 · 大写文本的字距会略微增加以提升辨识度。

统一采用4px基础网格，用于内边距、外边距和布局间距。

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

采用标准12列网格系统，最大宽度为1280px，在768px和1024px处设有响应式断点。

交互元素的弹性hover状态使用微妙的弹性动画（cubic-bezier(0.18, 0.89, 0.31, 1.57)）。 · 颜色、背景色和边框色的变化使用平滑过渡（0.15秒）。 · 元素的显隐使用不透明度渐变（0.3秒）。

按钮和链接等交互元素在hover时会有细微的颜色或背景变化，通常伴随微妙的弹性动画。 · 点击元素可能触发轻微的变换或颜色变化以提供反馈。

• button 主按钮为药丸形（9999px圆角），纯紫色背景（#685CEF）配白色文字。次按钮为淡薰衣草背景（#E8E9FF）配紫色文字。
• card 卡片是简单的容器，带有微妙边框、白色背景和极简阴影。
• chip 用于标签或标记的小型药丸状元素，通常为浅色背景配细微边框。
• input 文本输入框带有细微边框、圆角和干净的白色背景。
• hero 一个大型、居中的hero区域，包含醒目的标题、副文本和明确的行动号召。

• 语气 专业、自信且富有远见。
• 标题风格 大型、有冲击力的标题，清晰阐述价值主张。
• 按钮文案 直接且以行动为导向，例如“联系我们”或“立即开始”。

• 避免使用既定紫色配色方案之外的刺眼、高饱和度颜色。
• 避免使用厚重、黑体或高度装饰性的字体作为标题。
• 避免使用全深色模式主题，因为截图展示的是明亮、通透的界面。
• 避免在按钮或卡片上使用尖锐的90度直角，因为设计倾向于更柔和、圆润的形状。
• 避免为主内容使用密集、多栏文本布局，因为设计倾向于干净、居中的阅读路径。
• 避免使用会与文本内容争夺注意力的大型复杂背景图片。
• 避免: 过于随意的语言
• 避免: 缺乏上下文的技术术语
• 避免: 被动语态

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