---
name: "Contentful"
description: "一个专业、开发者友好的SaaS界面优秀范例，在技术可信度与易用设计间取得了良好平衡。"
version: alpha
specification_status: not-validated
license_status: unknown

colors:
  background: "#FFFFFF"
  primary: "#2B2D31"
  secondary: "#6D7682"
  tertiary: "#3C80CF"
  neutral: "#55575B"
  bg-soft: "#F5F7F9"
  bg-quiet: "#E4EFF8"
  muted-soft: "#C4D1DE"
  line: "rgba(229, 231, 235, 1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2.16px"
  heading:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.12px"
  body-lg:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.55
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.55
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.55
    fontWeight: 600
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

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

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

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#2B2D31`)** — uses `ink` token
- **Secondary text (`#6D7682`)** — uses `ink-soft` token
- **Accent (`#3C80CF`)** — uses `accent` token
- **Muted (`#55575B`)** — uses `muted` token
- **Borders (`rgba(229, 231, 235, 1)`)** — uses `line` token

## Typography

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

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

## Layout

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

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

## Elevation & Depth

- rgba(0, 0, 0, 0.25) 0px 0px 20px 0px
- Borders: 1px solid #E5E7EB

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** 胶囊形主按钮，采用深色实心背景配白色文字，或描边样式的次级按钮。
- **card:** 简洁容器，带有细微边框或柔和背景，用于功能展示和客户评价。
- **chip:** 小型胶囊形元素，带图标，用于功能标签或导航。
- **input:** 简洁、极简的输入框，带有细微边框和圆角。
- **hero:** 大型、具有冲击力的标题，搭配柔和彩色背景上的辅助插图或照片。

## Do's and Don'ts

**Don't:**
- 不要使用衬线字体——截图显示全文使用简洁的人文无衬线字体。
- 不要使用霓虹色或高饱和度的点缀色——截图显示使用柔和的专业蓝色（#3C80CF）作为主要强调色。
- 不要在背景中使用复杂渐变——截图显示主要为纯白色或非常柔和、扁平的色块区域（#F5F7F9、#E4EFF8）。
- 不要到处使用厚重、深色的边框——截图显示使用浅色、细微的边框（#E5E7EB）或无边框设计。
- 不要使用过紧的正文行距——截图显示舒适、可读的行高（约1.55）。
- 不要在按钮或卡片上使用尖锐的90度直角——截图显示一致使用圆角（4px至999px）。

---

## System Prompt (paste into AI agent)

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