# Weaviate · Design system migration spec

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

> This site is worth including as it masterfully combines a dark, technical aesthetic with bold typography and vibrant accents, setting a high standard for modern developer tool interfaces.

## 1. Identity DNA

Weaviate's identity is built on the premise of control and clarity within a complex technical environment. It functions as a sleek, dark-themed cockpit for developers, where every interface element serves a precise operational purpose in building next-generation AI applications.

**One-liner:** An open-source platform for building complete AI experiences with vector search, RAG, and memory.
**Keywords:** Vector Search · AI Platform · Developer · Open Source · RAG
**Analogy:** A sleek, dark-themed cockpit for developers building the next generation of AI applications.

## 2. Color

The system is anchored by a deep charcoal base, a neutral stage that allows content to emerge without visual competition. Vibrant teal accents are applied with surgical precision to highlight technical affordances and primary actions, creating a clear visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#151515` | main background |
| `--bg-soft` | `#1a1a1a` | card background |
| `--bg-quiet` | `#0a0e13` | quiet area |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `#b9c8de` | secondary text |
| `--muted` | `#b9c8de` | placeholder |
| `--muted-soft` | `#d6deeb` | weak hint |
| `--accent` | `#44e4c5` | single accent |
| `--line` | `rgba(255, 255, 255, 0.1)` | divider |

**Color principle:** Dark base with vibrant teal accents to highlight technical precision and modernity.

Color is used functionally to direct attention and signal interactivity, not as mere decoration.

## 3. Typography

Typography is split between the technical clarity of Plus Jakarta Sans for body text and the sharp UI utility of Inter. This pairing establishes a voice that is authoritative and precise, deliberately avoiding decorative fonts to maintain a developer-centric focus.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1px | Hero headlines and primary marketing statements. |

**Type rules:**
- Use Plus Jakarta Sans for body text to ensure technical clarity.
- Use Inter for UI elements and navigation.
- Use monospace for code snippets to maintain a developer-centric feel.
- Avoid overly decorative or playful typefaces.

## 4. Spacing

A consistent 4px base grid establishes a steady architectural rhythm, with generous padding ensuring clarity and focus within the dense information landscape.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Maintains a consistent 4px base grid with generous padding for whitespace and clarity.

## 5. Surfaces

Surfaces are defined by layered, deep shadows and subtle inset light, creating a sense of controlled depth. Sectional separation is achieved with low-opacity borders, maintaining structure without introducing visual weight.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.16) 0px 20px 60px 0px
  - rgba(0, 0, 0, 0.22) 0px 10px 40px 0px
  - rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset
- **Borders:** Subtle 1px borders with rgba(255, 255, 255, 0.1) to separate sections.

## 6. Layout

The layout follows a spacious, centered 12-column grid, providing a structured yet flexible framework. Generous vertical rhythm and padding prioritize content legibility and establish a clear, unhurried visual hierarchy.

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

**Skeleton:** A standard grid-based layout with centered content and generous vertical rhythm.

## 7. Motion & Interaction

Motion is minimal and purposeful, existing only to confirm interaction and guide focus. Transitions are smooth but brisk, reinforcing a system that values speed and responsiveness over spectacle.

- **Durations:** micro 150ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background transitions for interactive elements.
  - Subtle fade-ins for content appearance.

- **Hover:** Subtle color shifts and background changes for buttons and links.
- **Click:** Minimal visual feedback, prioritizing speed.
- **Transition:** Use consistent 150ms to 300ms transitions for UI state changes.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is technical, direct, and empowering, matching the precision of the interface. Headlines are action-oriented, and language is chosen for its technical substance, rejecting vague marketing buzzwords.

- **Tone:** Technical, authoritative, and empowering.
- **Headline style:** Direct, action-oriented, and bold.
- **CTA style:** Clear, actionable verbs like 'Start building' and 'Try now'.
- **Avoid:** Overly casual or slang-heavy language. / Vague marketing buzzwords without technical substance. / Overuse of exclamation points.

### Don'ts
- ❌ Don't use a light or white background — screenshot shows a dark mode interface.
- ❌ Don't use playful or rounded sans-serif fonts — screenshot shows a mix of transitional-serif for headlines and humanist-sans for body text.
- ❌ Don't use a single dominant high-chroma accent color — screenshot shows teal as the primary accent but also incorporates gradients and 3D visuals.
- ❌ Don't use thin or light font weights for headlines — screenshot shows bold or medium weights for impact.
- ❌ Don't use excessive borders or heavy outlines — screenshot shows subtle, low-opacity borders.
- ❌ Don't use a standard, cluttered grid — screenshot shows a spacious layout with generous whitespace.

The system deliberately avoids light backgrounds, playful type, and decorative flourishes that would compromise its focused, professional utility.

## System Prompt (paste into AI tool)

```
Weaviate is a developer-centric AI platform for vector search and RAG. The design DNA is a dark mode interface with a #151515 background, #44e4c5 teal accents, and a mix of transitional-serif and humanist-sans typography. The layout is spacious, using a 12-column grid. Critical donts include: don't use a light background, don't use playful sans-serif fonts for headlines, and don't clutter the interface with unnecessary borders. The voice is technical and authoritative, focusing on developer productivity.
```