---
name: Pinecone
description: "This site is an excellent example of 'Engineered Clarity,' a design approach that balances a strong technical authority with a clean, user-friendly interface, making complex infrastructure concepts hi"
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#111827"
  secondary: "#57534E"
  tertiary: "#002BFF"
  neutral: "#A8A29E"
  bg-soft: "#FBFBFC"
  muted-soft: "#D1D5DB"
  line: "rgba(231, 229, 228, 1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  subheading:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.4
    fontWeight: 500
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.6
    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

The developer-first platform for building AI applications with fast, accurate vector search.

*A precision-engineered toolkit for developers building intelligent, data-aware applications.*

## Colors

A minimalist, high-contrast system where a vibrant brand blue serves as the sole high-chroma signal against a neutral, clean backdrop.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#111827`)** — uses `ink` token
- **Secondary text (`#57534E`)** — uses `ink-soft` token
- **Accent (`#002BFF`)** — uses `accent` token
- **Muted (`#A8A29E`)** — uses `muted` token
- **Borders (`rgba(231, 229, 228, 1)`)** — uses `line` token

## Typography

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

- Use uppercase for section overlines (e.g., 'ARCHITECTURE', 'USE CASES') with increased letter-spacing.
- Maintain tight tracking on large display text for a modern, engineered feel.
- Use the monospaced font strictly for code snippets and CLI commands.

## Layout

A centered, single-column main container with wide side margins, creating a focused reading experience.

*Rhythm:* Consistent use of an 8px grid, with generous vertical padding for content sections to maintain clear hierarchy.

## Elevation & Depth

- rgba(0, 0, 0, 0.06) 0px 2px 8px 0px
- rgba(0, 0, 0, 0.1) 0px 8px 32px 0px
- Borders: Solid 1px lines using #E7E5E4 for subtle separation; a distinct blue border for primary button focus states.

## Shapes

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

## Components

- **button:** Solid blue (primary) and white with border (secondary). Sharp 4px corners. Clean, functional appearance.
- **card:** Content sections are defined by horizontal rules and generous padding rather than traditional card borders or shadows.
- **chip:** Small, rounded (pill-shaped) tags with subtle borders used for code integrations (e.g., {Claude Code}).
- **input:** Clean, simple inputs with clear borders and generous padding.
- **hero:** A spacious layout with a large, left-aligned display headline, concise subtext, and prominent primary/secondary call-to-action buttons.

## Do's and Don'ts

**Don't:**
- Don't use rounded corners larger than 8px — the design language is precise and technical.
- Don't introduce multiple vibrant colors — the palette relies on a single blue accent against neutrals.
- Don't use decorative gradients or complex background imagery — the background is consistently white or near-white.
- Don't center-align large blocks of body text — primary content is left-aligned for better readability.
- Don't use script or display serif fonts — the typography is strictly functional sans-serif and monospace.
- Don't use drop shadows on every component — they are reserved for specific UI elements like dropdowns.
- Don't use overly large padding that disconnects the UI elements — maintain a sense of structural cohesion.
- Don't invent dark mode styles — the primary captured interface is light mode with a white background.

---

## System Prompt (paste into AI agent)

```
Pinecone is a developer-first AI infrastructure platform, positioned as a premium, highly reliable tool. The design DNA is 'Engineered Clarity'. The primary palette consists of a vibrant blue accent (#002BFF) against a clean white background (#FFFFFF) and neutral gray text tones (#111827, #57534E). The typography uses a humanist sans-serif for UI (GT Planar-like) and a monospaced font for code. The layout is spacious and left-aligned, prioritizing scannable technical information over flashy marketing. Critical donts: 1. Never use decorative gradients; 2. Do not use rounded corners larger than 8px; 3. Never introduce multiple high-chroma accent colors; 4. Do not over-shadow components; 5. Avoid overly casual or salesy copy; 6. Do not deviate from the strict sans-serif and mono font categories.
```