---
name: "Hygraph"
description: "该网站是现代企业级B2B SaaS设计的优秀范例，在专业感与简洁现代的美学之间取得了平衡。"
version: alpha
specification_status: not-validated
license_status: unknown

colors:
  background: "#FFFFFF"
  primary: "#081026"
  secondary: "#2D3A5F"
  tertiary: "#685CEF"
  neutral: "#566A95"
  bg-soft: "#F6F8F9"
  bg-quiet: "#E7EAEF"
  line: "rgba(231, 234, 239, 1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-2.4px"
  headline:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.56px"
  subtitle:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.22px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.625
    fontWeight: 400
    letterSpacing: "normal"
  label:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.57
    fontWeight: 500
    letterSpacing: "1.28px"

rounded:
  sm: 6px
  md: 8px
  lg: 10px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

一款AI驱动的Headless CMS，旨在加速企业团队的内容交付速度。

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

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#081026`)** — uses `ink` token
- **Secondary text (`#2D3A5F`)** — uses `ink-soft` token
- **Accent (`#685CEF`)** — uses `accent` token
- **Muted (`#566A95`)** — uses `muted` token
- **Borders (`rgba(231, 234, 239, 1.0)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

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

## Layout

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

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

## Elevation & Depth

- 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
- Borders: 1px solid rgba(231, 234, 239, 1.0)

## Shapes

- `sm`: 6px
- `md`: 8px
- `lg`: 10px
- `pill`: 9999px

## Components

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

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

```
你正在为一个AI驱动的Headless CMS设计一个专业、面向企业级的B2B SaaS网站。设计应干净、通透且值得信赖，使用白色背景，以主紫色（#685CEF）引导行动号召。字体是几何无衬线标题与人文主义无衬线正文的混合，两者都具有高可读性。关键元素包括圆形按钮（药丸形）、微妙的阴影和充足的留白。不要使用深色模式，不要在交互元素上使用尖角，不要使用密集、杂乱的布局。整体感觉应体现精准、高效和现代科技。
```