CURATED · OPEN · FREE

Weaviate

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

devai

↓ Download design system (29 MB)Open in OpenDesign

Visit: https://weaviate.io

📦 Browse pack contents →

Identity DNA

Vector SearchAI PlatformDeveloperOpen SourceRAG

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

Color

#44e4c5Accent

#ffffffInk

#b9c8deInk soft

#151515BG

#1a1a1aBG soft

#0a0e13BG quiet

rgba(255, 255, 255, 0.1)Line

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

Typography

transitional-serif · humanist-sans · monospace

display56px · 400

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.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

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

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

Subtle 1px borders with rgba(255, 255, 255, 0.1) to separate sections.

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

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

150msmicro

200mssmall

300msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color and background transitions for interactive elements. · Subtle fade-ins for content appearance.

Subtle color shifts and background changes for buttons and links. · Minimal visual feedback, prioritizing speed.

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.

Voice & Don'ts

Tone Technical, authoritative, and empowering.
Headlines Direct, action-oriented, and bold.
CTAs Clear, actionable verbs like 'Start building' and 'Try now'.

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.
Avoid: Overly casual or slang-heavy language.
Avoid: Vague marketing buzzwords without technical substance.
Avoid: Overuse of exclamation points.

Inside the pack — real screenshots

Weaviate — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko