# Directus · Design system migration spec

> Source: https://directus.io  ·  Curated by OpenDesign  ·  en

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

## 1. Identity DNA

Directus frames itself as the universal remote for database infrastructure, a tool that brings order to complexity. Its identity is built on the tension between technical precision and editorial clarity, like a well-organized engine room where every control is clearly labeled.

**One-liner:** An open-source headless CMS and backend-as-a-service that lets non-technical teams manage content while developers build.
**Keywords:** backend · database · team · API · no-code
**Analogy:** A universal remote control for your entire database infrastructure.

## 2. Color

The color system is a study in high-contrast monochrome, built on a near-black canvas. It uses a strict hierarchy of whites, grays, and blacks to create depth and focus without relying on hue.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#090909` | main background |
| `--bg-soft` | `#151515` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#A0A0A0` | placeholder |
| `--line` | `rgba(255, 255, 255, 0.08)` | divider |

**Color principle:** High-contrast monochrome with subtle elevation through slightly lighter grays.

This palette proves that a system can be both minimal and rich, using value contrast alone to guide the eye and define hierarchy.

## 3. Typography

The typographic voice is split between authority and utility. A transitional serif commands attention for major headlines, while a humanist sans-serif handles all UI and body text with clean legibility.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 400 | -1px | Hero headlines |
| h1 | 48px | 1.1 | 400 | -0.5px | Section headlines |
| body | 16px | 1.5 | 400 | 0px | Main copy |

**Type rules:**
- 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.

## 4. Spacing

An 8px baseline grid provides the architectural rhythm, ensuring vertical alignment and consistent pacing across all sections of the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** An 8px baseline grid creates consistent vertical rhythm across large sections.

## 5. Surfaces

Surfaces are defined by deep shadows and subtle, luminous borders. The effect is one of layered depth, where elements appear to float just above the solid, near-black foundation.

- **Radius:** sm 6px · md 12px · lg 20px · pill 999px
- **Shadows:**
  - 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)

## 6. Layout

The layout skeleton is a full-width dark canvas with a persistent header anchoring the top. Content columns are centered, creating a spacious reading lane that prioritizes clarity and information hierarchy.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is treated as functional feedback, not decoration. Interactions use subtle opacity fades and smooth transitions to confirm actions and guide focus without drawing attention to themselves.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.44, 0, 0.56, 1)`
- **Patterns:**
  - Subtle color transitions on interactive elements.
  - Smooth opacity fades for content reveals.

- **Hover:** Buttons and links subtly change opacity or background brightness.
- **Click:** Immediate visual feedback via subtle scaling or color shifts.
- **Transition:** All interactive properties transition smoothly using a custom cubic-bezier curve.
- **Keyboard:** Standard browser focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident and professional, speaking directly to developers and technical teams. It favors clear benefits over marketing buzzwords, matching the precision of the visual system.

- **Tone:** Confident, professional, and developer-friendly without being overly casual.
- **Headline style:** Direct, punchy, and benefits-focused, often using a serif typeface for authority.
- **CTA style:** Clear and action-oriented, such as 'Get Started Free' or 'See the Studio'.
- **Avoid:** Avoid overly marketing-heavy or buzzword-filled copy. / Avoid playful or whimsical illustrations. / Avoid overly complex or cluttered layouts.

### Don'ts
- ❌ 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.

The system deliberately rejects bright accents, playful illustrations, and cluttered layouts to maintain its focused, technical authority.

## System Prompt (paste into AI tool)

```
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.
```