# Qdrant · Design system migration spec

> Source: https://qdrant.tech  ·  Curated by OpenDesign  ·  en

> This site is a prime example of a modern 'Developer Tool' aesthetic, balancing technical credibility with high-impact visual design to drive conversion.

## 1. Identity DNA

Qdrant's identity is built on the engineering of speed and scale, analogous to a high-speed data highway for AI, where every design decision is optimized for maximum throughput. The system's deep navy foundation and vibrant red accent are not decorative choices but functional ones, creating a high-contrast interface engineered for technical focus and decisive action.

**One-liner:** High-performance vector search engine for AI retrieval at scale.
**Keywords:** performance · scale · vector search · developer · infrastructure
**Analogy:** A high-speed data highway for AI, engineered for maximum throughput.

## 2. Color

The color system is a study in controlled intensity, built upon a deep, dark navy foundation (#090e1a) that eliminates visual noise. A singular, high-energy red accent (#dc244c) is deployed sparingly, serving as a functional signal to drive user action and establish a clear hierarchy of importance.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#090e1a` | main background |
| `--bg-soft` | `#28324d` | card background |
| `--bg-quiet` | `#161e33` | quiet area |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `#8f98b2` | secondary text |
| `--muted` | `#8f98b2` | placeholder |
| `--muted-soft` | `#f0f3fa` | weak hint |
| `--accent` | `#dc244c` | single accent |
| `--line` | `rgba(40, 50, 77, 1.0)` | divider |

**Color principle:** High-contrast dark mode with a singular, high-energy accent color to drive action.

The governing principle is functional contrast: color exists to define state and priority, not to ornament.

## 3. Typography

Typographic voice is direct and architectural, employing a clean humanist-sans system. Display headings use tight letter-spacing to form solid, compact blocks of text that convey structural solidity, while body text adopts generous line-height for comfortable reading on dark backgrounds.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 600 | -1px | Main headline for maximum impact and scale. |
| h1 | 40px | 1.1 | 600 | -0.5px | Section headers for clear hierarchy. |
| body | 16px | 1.5 | 400 | 0px | Primary readable text for descriptions and copy. |

**Type rules:**
- Tight letter-spacing for display headings to create a solid, architectural feel.
- Generous line-height for body text to ensure readability on dark backgrounds.
- Monospace for technical labels and code snippets to establish developer context.

## 4. Spacing

A strict 4px base grid establishes a consistent vertical rhythm, ensuring the modular components align with mechanical precision.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Vertical spacing is driven by a 4px base grid, ensuring consistent alignment of modular components.

## 5. Surfaces

Depth is communicated through precise layering, not overt decoration. Subtle 1px borders in a muted blue (#28324d) define the edges of containers and modules, creating a structured, almost blueprint-like clarity on the dark canvas.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 2px 1px 0px inset for button glow effect.
  - 0px 4px 8px 0px rgba(0, 0, 0, 0.2) for floating elements.
- **Borders:** Solid 1px borders in #28324d to subtly define modules and containers.

## 6. Layout

The layout skeleton begins with a full-width, cinematic hero that uses large-scale typography over illustrative backgrounds to make an immediate statement. This structured introduction then transitions into a clean, content-driven grid that prioritizes generous whitespace and a clear vertical flow.

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

**Skeleton:** Full-width hero with centered text and large background imagery, transitioning to a structured grid for content sections.

## 7. Motion & Interaction

Motion is a functional tool, not a decorative layer. All transitions employ a standard ease-out curve (0.2s) to provide immediate, unobtrusive feedback for state changes, maintaining the interface's core sense of performance and reliability.

- **Durations:** micro 200ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.2, 0, 0, 1)`
- **Patterns:**
  - Standard ease-out for transitions and hover states.
  - Opacity and visibility changes for modal and menu reveals.
  - Color transitions for interactive button states.

- **Hover:** Background color shifts and subtle opacity changes.
- **Click:** Visual feedback through inset shadows or slight scale shifts.
- **Transition:** All interactive elements use 'all 0.2s ease-out' for responsive feedback.
- **Keyboard:** Standard focus outlines using the accent color for accessibility.

## 8. Voice & Don'ts

The editorial voice is technical, confident, and direct, mirroring the system's engineered aesthetic. Headlines are bold, declarative statements that emphasize performance and scale, while calls to action are straightforward and benefit-driven.

- **Tone:** Technical, confident, and direct.
- **Headline style:** Bold, declarative statements emphasizing performance and scale.
- **CTA style:** Action-oriented and benefit-driven (e.g., 'Start Free').
- **Avoid:** Vague marketing jargon. / Overly complex technical explanations in headlines. / Passive voice.

### Don'ts
- ❌ Don't use light, airy backgrounds — the screenshot shows a deep, dark (#090e1a) interface.
- ❌ Don't use soft, rounded corners everywhere — the screenshot shows sharp, 8px corners on cards and containers.
- ❌ Don't use a wide variety of colors — the screenshot shows a limited palette focused on dark blues and a single red accent.
- ❌ Don't use low-contrast text — the screenshot shows bright white (#ffffff) text on dark backgrounds.
- ❌ Don't use playful or decorative fonts — the screenshot shows a functional, humanist-sans system.
- ❌ Don't clutter the layout with many side-by-side elements — the screenshot shows generous whitespace and a clear vertical flow.

The system deliberately avoids playful ornamentation, soft rounded forms, and low-contrast elements, reinforcing its core identity as a tool built for scale and serious work.

## System Prompt (paste into AI tool)

```
This is a high-performance developer tool for AI vector search. The design DNA is defined by a dark, architectural aesthetic using a deep navy background (#090e1a) and a vibrant red accent (#dc244c) for critical actions. Typography uses a clean humanist-sans system with tight letter-spacing for display headlines to convey speed and scale. Critical donts: Avoid light backgrounds, avoid overly rounded corners, and avoid low-contrast text. The interface must feel engineered, reliable, and built for scale, with generous whitespace and a clear information hierarchy.
```