---
name: Directus
description: "This site is a strong example of a developer-oriented SaaS brand that balances technical authority with high-end editorial design through its use of serif headlines in a dark mode interface."
version: alpha

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

An open-source headless CMS and backend-as-a-service that lets non-technical teams manage content while developers build.

*A universal remote control for your entire database infrastructure.*

## Colors

High-contrast monochrome with subtle elevation through slightly lighter grays.

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

- Use serif for major headlines to add editorial weight.
- Use sans-serif for all UI elements and body copy.
- Reserve monospace for code snippets and technical UI elements.

## Layout

A full-width dark canvas with a sticky header and centered content columns.

*Rhythm:* An 8px baseline grid creates consistent vertical rhythm across large sections.

## 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:** Primary buttons are white with black text and large pill radii; secondary buttons use transparent backgrounds with white text.
- **card:** Dark gray cards with subtle 1px borders and 12-20px radii, used to group feature descriptions.
- **chip:** Pill-shaped navigation elements with transparent backgrounds and thin borders, highlighting the active state.
- **input:** Dark gray input fields with thin borders, featuring monospace typography for code entries.
- **hero:** A classic left-aligned hero featuring a large serif headline, sans-serif subtext, a code snippet, and dual CTAs.

## Do's and Don'ts

**Don't:**
- Don't use bright neon accents — screenshot shows a strictly monochrome palette.
- Don't use rounded square cards — screenshot shows elements with 12px to pill radii.
- Don't use heavy sans-serif headlines — screenshot shows a transitional serif for display.
- Don't use dense, small-text layouts — screenshot shows generous spacing and large, readable type.
- Don't use busy backgrounds or textures — screenshot shows a solid, near-black #090909 background.
- Don't use playful, bubbly icons — screenshot shows clean, minimal UI elements and technical icons.

---

## System Prompt (paste into AI agent)

```
Directus is a developer-focused backend-as-a-service platform with a refined, monochromatic dark mode aesthetic. The design relies on a near-black #090909 background and white #FFFFFF text, accented by subtle grays (#151515, #A0A0A0). Typography is a mix of transitional serif for bold headlines and humanist sans for UI, with geometric monospace for code. The layout is spacious and centered. Critical donts: avoid bright colors, don't use bubbly UI elements, and don't clutter the interface. The voice is professional and benefits-driven, targeting technical teams.
```