Pinecone DESIGN.md

Vector database platform for AI with a clean dark developer aesthetic — deep surfaces, vivid teal-green brand accents, and data-pipeline UI patterns.

1. Visual Theme & Atmosphere

Pinecone lives at the intersection of infrastructure and AI. The design is polished and developer-centric: dark backgrounds, clean typography, and a vivid teal-green accent that feels both modern and technical. The UI prioritizes dashboard clarity — index status, vector counts, and query latency are surfaced prominently. The aesthetic bridges the gap between a traditional developer database tool and a consumer-grade AI product.

2. Color Palette & Roles

3. Typography Rules

css--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--font-size-xs: 11px;
--font-size-sm: 13px;
--font-size-base: 14px;
--font-size-md: 16px;
--font-size-lg: 20px;
--font-size-xl: 28px;
--font-size-2xl: 36px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-base: 1.5;

4. Component Stylings

css/* Primary Button */
.button-primary {
  background: #00C18A;
  color: #0D0F1C;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.button-primary:hover { background: #00A075; }

/* Index Card */
.index-card {
  background: #161929;
  border: 1px solid #2B2F48;
  border-radius: 10px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.index-card:hover { border-color: #00C18A; }
.index-card__name {
  font-size: 16px;
  font-weight: 600;
  color: #F0F2FF;
  font-family: var(--font-mono);
}
.index-card__stat {
  font-size: 24px;
  font-weight: 700;
  color: #00C18A;
  font-family: var(--font-mono);
  margin-top: 8px;
}
.index-card__stat-label {
  font-size: 12px;
  color: #8E93B5;
}

/* Status Pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.status-pill--ready {
  background: rgba(0,193,138,0.12);
  color: #00C18A;
  border: 1px solid rgba(0,193,138,0.2);
}
.status-pill--initializing {
  background: rgba(245,166,35,0.12);
  color: #F5A623;
  border: 1px solid rgba(245,166,35,0.2);
}
.status-pill--error {
  background: rgba(248,113,113,0.12);
  color: #F87171;
  border: 1px solid rgba(248,113,113,0.2);
}

/* Code Panel */
.code-panel {
  background: #0D0F1C;
  border: 1px solid #2B2F48;
  border-radius: 8px;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: #F0F2FF;
  line-height: 1.6;
  overflow-x: auto;
}

/* Input */
.input {
  background: #161929;
  border: 1.5px solid #2B2F48;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 14px;
  color: #F0F2FF;
  transition: border-color 0.15s;
}
.input:focus {
  outline: none;
  border-color: #00C18A;
  box-shadow: 0 0 0 3px rgba(0,193,138,0.15);
}

5. Layout Principles

6. Depth & Elevation

css.shadow-card { box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.shadow-hover { box-shadow: 0 0 0 1px #00C18A, 0 4px 16px rgba(0,193,138,0.15); }
.shadow-modal { box-shadow: 0 16px 48px rgba(0,0,0,0.65); }

7. Do's and Don'ts

Do:

• Show vector count and query latency as the primary index metrics
• Use monospace for all index names, API keys, and dimension counts
• Color-code index status consistently with the status pill pattern
• Highlight the active/hovered index card with a brand-colored border

Don't:

• Don't use light colors for primary surfaces — keep it dark and technical
• Don't show vector data as raw arrays — summarize with dimensions/count
• Don't reuse the teal brand color for error or warning states

8. Responsive Behavior

9. Agent Prompt Guide

You are designing for Pinecone — a vector database for AI applications.
Use a deep dark background (#0D0F1C) with card surfaces at #161929.
Primary accent is teal-green (#00C18A) — use for CTAs, index stats, ready states, and border highlights.
Index cards show the index name in monospace, vector count in large teal numbers.
Status pills use monospace, semantic colors: teal=ready, orange=initializing, red=error.
Code panels are dark with light text, no syntax coloring needed — keep it clean.
Tone is developer-precise, AI-forward, and data-infrastructure-focused.