---
name: "Payload"
description: "面向开发者的优秀设计范例，兼具技术美感与清晰的视觉层次。"
version: alpha
specification_status: not-validated
license_status: unknown

colors:
  background: "#000000"
  primary: "#ffffff"
  secondary: "rgba(255,255,255,0.5)"
  neutral: "#808080"
  bg-soft: "rgba(255,255,255,0.125)"
  muted-soft: "rgba(208,208,208,1.0)"
  line: "rgba(255,255,255,0.125)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.6px"
  heading:
    fontFamily: geometric-sans
    fontSize: 32px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.88px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "3px"

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

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

---

## Overview

用于构建现代 Web 应用程序的开源 Next.js 后端。

*为后端开发打造的高性能跑车*

## Colors

高对比度单色配色，辅以微妙的纹理叠加

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`rgba(255,255,255,0.5)`)** — uses `ink-soft` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.125)`)** — uses `line` token

## Typography

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

- 展示字体使用字间距紧凑的几何无衬线体
- 正文使用同一几何无衬线字体家族的常规字重
- 代码片段使用等宽字体
- 标签和元数据使用大写转换

## Layout

全宽区块，配有宽裕的内边距

*Rhythm:* 一致的 4px 网格，配合宽裕的内边距

## Elevation & Depth

- 0 4px 24px rgba(0,0,0,0.5)
- Borders: 1px solid rgba(255,255,255,0.125)

## Shapes

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

## Components

- **button:** 药丸状主按钮，实色白色背景，黑色文字
- **card:** 简洁卡片，带有微妙边框和背景色调
- **chip:** 小型大写标签，带有字间距
- **input:** 最小化的输入框，带有微妙边框
- **hero:** 全宽主视觉区，采用大号字体和代码片段预览

## Do's and Don'ts

**Don't:**
- 不要使用彩色渐变——截图显示的是单色配色方案
- 不要使用衬线字体——截图显示的是通篇的几何无衬线体
- 不要使用繁杂的背景——截图显示的是简洁的深色表面
- 不要使用过小的触摸目标——截图显示的是宽裕的内边距
- 不要使用装饰性元素——截图显示的是极简、功能性的设计
- 不要使用复杂的动画——截图显示的是微妙、有目的的动效

---

## System Prompt (paste into AI agent)

```
Payload CMS 是一款开发者优先的无头 CMS，定位为 Web 开发的现代后端解决方案。关键视觉元素包括深色主题（#000000 背景）搭配白色（#ffffff）的几何无衬线字体排版。设计强调采用紧凑字间距的大胆、醒目标题，以及极简的装饰元素。关键约束：保持严格的单色配色，不使用彩色强调色；使用一致的几何无衬线字体层次；确保贯穿始终的宽裕间距和内边距。避免使用衬线字体、渐变或过于装饰的元素，以免破坏简洁的技术美感。界面优先考虑开发者体验，提供代码片段、终端风格命令，以及为技术内容设计的清晰视觉层次。
```