---
name: "Directus"
description: "此站点是面向开发者的 SaaS 品牌典范，通过深色界面中的衬线标题，平衡了技术权威感与高端的编辑设计风格。"
version: alpha
specification_status: not-validated
license_status: unknown

colors:
  background: "#090909"
  primary: "#FFFFFF"
  neutral: "#A0A0A0"
  bg-soft: "#151515"
  line: "rgba(255, 255, 255, 0.08)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.05
    fontWeight: 400
    letterSpacing: "-1px"
  h1:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 6px
  md: 12px
  lg: 20px
  pill: 999px

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

---

## Overview

一个开源的无头 CMS 和后端即服务，让非技术团队管理内容，同时支持开发者构建。

*您整个数据库基础设施的万能遥控器。*

## Colors

高对比度单色方案，通过稍浅的灰色实现微妙的层次感。

- **Background (`#090909`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#A0A0A0`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.08)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** geometric-mono

- 主要标题使用衬线字体，以增添编辑质感。
- 所有 UI 元素及正文使用无衬线字体。
- 代码片段及技术 UI 元素保留使用等宽字体。

## Layout

全宽深色画布，搭配置顶导航栏和居中的内容列。

*Rhythm:* 8px 基线网格在不同大区块间创建一致的垂直韵律。

## Elevation & Depth

- 0 4px 12px rgba(0, 0, 0, 0.3)
- 0 8px 24px rgba(0, 0, 0, 0.4)
- Borders: 1px solid rgba(255, 255, 255, 0.08)

## Shapes

- `sm`: 6px
- `md`: 12px
- `lg`: 20px
- `pill`: 999px

## Components

- **button:** 主按钮为白底黑字，采用大圆角药丸形；次按钮采用透明背景搭配白色文字。
- **card:** 深灰色卡片，带有微妙的 1px 边框和 12-20px 圆角，用于归类功能描述。
- **chip:** 药丸形导航元素，采用透明背景与细边框，高亮显示激活状态。
- **input:** 深灰色输入框，带有细边框，代码输入项采用等宽字体排版。
- **hero:** 经典的左对齐主视觉区，包含大型衬线标题、无衬线副文本、一段代码片段以及双重操作号召按钮。

## Do's and Don'ts

**Don't:**
- 勿使用明亮的霓虹色点缀——截图显示为严格的单色方案。
- 勿使用圆角方形卡片——截图显示的元素圆角从 12px 到药丸形不等。
- 勿使用粗重的无衬线标题——截图显示展示标题使用的是过渡衬线字体。
- 勿使用密集、小文本的布局——截图显示留白充足，字体大而易读。
- 勿使用繁杂的背景或纹理——截图显示为纯色的近黑 #090909 背景。
- 勿使用俏皮、圆润的图标——截图显示为干净、极简的 UI 元素和技术图标。

---

## System Prompt (paste into AI agent)

```
Directus 是一个面向开发者的后端即服务平台，具有精致的单色深色模式美学。设计依赖于近黑 #090909 背景和白色 #FFFFFF 文本，并以微妙的灰色 (#151515, #A0A0A0) 点缀。字体组合包括用于粗体标题的过渡衬线体、用于 UI 的人文主义无衬线体，以及用于代码的几何等宽体。布局宽敞且居中。关键禁忌：避免亮色，勿使用圆润的 UI 元素，且勿使界面杂乱。其语调专业且以利益驱动，目标受众为技术团队。
```