---
name: Weaviate
description: "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."
version: alpha

colors:
  background: "#151515"
  primary: "#ffffff"
  secondary: "#b9c8de"
  tertiary: "#44e4c5"
  neutral: "#b9c8de"
  bg-soft: "#1a1a1a"
  bg-quiet: "#0a0e13"
  muted-soft: "#d6deeb"
  line: "rgba(255, 255, 255, 0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

An open-source platform for building complete AI experiences with vector search, RAG, and memory.

*A sleek, dark-themed cockpit for developers building the next generation of AI applications.*

## Colors

Dark base with vibrant teal accents to highlight technical precision and modernity.

- **Background (`#151515`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`#b9c8de`)** — uses `ink-soft` token
- **Accent (`#44e4c5`)** — uses `accent` token
- **Muted (`#b9c8de`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Maintains a consistent 4px base grid with generous padding for whitespace and clarity.

## Elevation & Depth

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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Two-tone primary buttons (solid teal or white with teal borders) and ghost secondary buttons.
- **card:** Dark, rounded cards with subtle borders and inset shadows for a layered, professional look.
- **chip:** Small, uppercase labels like 'NEW' and 'TRUSTED BY AI TEAMS' with subtle backgrounds.
- **input:** Clean, dark-themed inputs with subtle borders and rounded corners.
- **hero:** Full-width dark hero with a prominent 3D abstract visual and bold serif typography.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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