---
name: Payload
description: "Excellent example of developer-focused design with technical aesthetics and clear visual hierarchy."
version: alpha

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

The open-source Next.js backend for building modern web applications.

*A high-performance sports car for backend development*

## Colors

High contrast monochrome palette with subtle texture overlays

- **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

- Display uses geometric sans with tight tracking
- Body uses same geometric sans family at regular weight
- Mono font used for code snippets
- Uppercase transform for labels and metadata

## Layout

Full-width sections with generous padding

*Rhythm:* Consistent 4px grid with generous padding

## 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:** Pill-shaped primary button with solid white background and black text
- **card:** Simple cards with subtle border and background tint
- **chip:** Small uppercase labels with letter spacing
- **input:** Minimal input fields with subtle borders
- **hero:** Full-width hero with large typography and code snippet preview

## Do's and Don'ts

**Don't:**
- Don't use colorful gradients — screenshot shows monochrome palette
- Don't use serif fonts — screenshot shows geometric sans throughout
- Don't use busy backgrounds — screenshot shows clean dark surfaces
- Don't use small touch targets — screenshot shows generous padding
- Don't use decorative elements — screenshot shows minimal, functional design
- Don't use complex animations — screenshot shows subtle, purposeful motion

---

## System Prompt (paste into AI agent)

```
Payload CMS is a developer-first headless CMS positioned as the modern backend solution for web development. Key visual elements include a dark theme (#000000 background) with white (#ffffff) typography using geometric sans-serif fonts. The design emphasizes bold, large headlines with tight tracking and minimal decorative elements. Critical constraints: maintain strict monochrome palette without colorful accents, use consistent geometric sans typography hierarchy, ensure generous spacing and padding throughout. Avoid serif fonts, gradients, or overly decorative elements that would compromise the clean, technical aesthetic. The interface prioritizes developer experience with code snippets, terminal-style commands, and clear visual hierarchy for technical content.
```