# Pinecone Design System

> High-density technical canvas where electric blue logic meets stone-cold infrastructure.

**Source:** https://pinecone.io | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Pinecone utilizes a "monochrome plus one" system where a high-voltage electric blue `#002bff` acts as the sole chromatic driver against a neutral foundation of warm stone `#e7e5e4` and deep charcoal `#1c1917`. The layout is characterized by sharp 0px corners, dense technical data grids, and a sophisticated typographic hierarchy using **GT Planar**. Visual interest is generated through data visualization patterns and "blueprint" framing rather than photography. The system feels like a high-performance developer tool: precise, utilitarian, and unapologetically technical.

## Signature DNA
1. **The Blueprint Frame** (Elements are often contained within 1px stone borders `#e7e5e4` with 0px radii, creating a modular, architectural grid feel across all pages.)
2. **Electric Blue Logic** (The use of `#002bff` is strictly reserved for primary actions, critical technical highlights, and active states, providing a high-contrast signal against the achromatic base.)
3. **High-Density Data Grids** (Complex pricing and feature tables use tight vertical spacing and 14px GT Planar to maintain legibility while maximizing information density.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--color-text-primary` | `#1c1917` | Primary text, dark surface backgrounds | 528 | 1 | Computed Style |
| `--color-border` | `#e7e5e4` | Universal 1px divider and container border | 326 | 1 | Computed Style |
| `--color-white` | `#ffffff` | Page canvas, card backgrounds | 123 | 1 | Computed Style |
| `--color-text-secondary` | `#57534e` | Sub-labels, secondary body text | 120 | 1 | Computed Style |
| `--color-background` | `#fbfbfc` | Subtle section alternating background | 88 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--color-brand-blue` | `#002bff` | Primary CTA, technical highlights, links | 56 | 1 | Computed Style |
| `--color-tertiary` | `#a8a29e` | Muted metadata, disabled text | 13 | 1 | Computed Style |
| `--color-error` | `#e31957` | Decorative error/status (decorative_only) | 1 | 1 | Computed Style |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `--color-success` | `#15b077` | Confirmation and positive status |
| `--color-info` | `#0028ff` | Technical info and primary brand signal |
| `--color-warning` | `#dd815d` | Alert states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| __gtPlanar_9a6492 | 400, 500, 600, 700 | All UI, Headings, Body | Inter | Proprietary |
| __JetBrains_Mono_3c557b | 400, 600 | Code, technical markers | JetBrains Mono | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display}` | 44px | 48.4px | -0.88px | 700 | Hero H1 | `h1.text-h1` |
| `{text.h2}` | 32px | 38.4px | normal | 700 | Section heads | `h2.md:text-h2` |
| `{text.h2-alt}` | 29px | 34.8px | -0.28px | 400 | Sub-section heads | `h2.font-normal` |
| `{text.h3}` | 20px | 28px | normal | 700 | Card titles | `h3.text-xl` |
| `{text.body}` | 16px | 24px | normal | 400 | Running text | `section.relative` |
| `{text.body-sm}` | 14px | 20px | normal | 400 | Footer, secondary | `a.text-text-secondary` |
| `{text.mono}` | 13px | 19.5px | normal | 400 | Code snippets | `span.text-brand-blue` |
| `{text.caption}` | 12px | 16px | normal | 400 | Metadata | `p.text-xs` |

### Principles
1. **Tight Display Tracking:** Large headings (44px) use aggressive negative letter-spacing (-0.88px) to maintain visual tension.
2. **Technical Monospace:** JetBrains Mono is used for all "executable" content (CLI commands, API parameters) to distinguish machine-read from human-read text.
3. **Bold Hierarchy:** Section headers are consistently weight 700, creating a clear "stop-and-read" rhythm.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 30 |
| `{space.sm}` | 12px | 270 |
| `{space.md}` | 16px | 328 |
| `{space.lg}` | 32px | 25 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Default for all cards, buttons, inputs | 939 occurrences |
| `{radius.full}` | 50% | Status indicators, avatars | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | 0px | All UI elements are flat; depth is achieved via 1px borders | Universal |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action
**Pages observed:** All
**Spec:** Background `#002bff` / Text `#ffffff` / Radius `0px` / Padding `10px 20px` / Typography `15px 500`
**States observed:** Default | Hover | Active: Captured

#### Secondary Button
**Role:** Alternative actions
**Pages observed:** pricing, about
**Spec:** Background `transparent` / Text `#1c1917` / Border `1px #e7e5e4` / Radius `0px` / Padding `10px 20px`
**States observed:** Default | Hover: Captured

### Tier 2: Patterns
#### Technical Card
**Role:** Feature and product display
**Pages observed:** homepage, pricing
**Spec:** Background `#ffffff` / Border `1px #e7e5e4` / Radius `0px` / Padding `32px`
**States observed:** Default: Captured

#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** pricing
**Spec:** Background `#ffffff` / Border `1px #e7e5e4` / Radius `0px` / Padding `28px`
**States observed:** Default: Captured

### Tier 3: Surface-specific
#### Code Block
**Role:** CLI and SDK examples
**Pages observed:** homepage
**Spec:** Background `#fbfbfc` / Text `#1c1917` / Border `1px #e7e5e4` / Font `JetBrains Mono`
**States observed:** Default: Captured

#### Data Table
**Role:** Plan comparison
**Pages observed:** pricing
**Spec:** Border-bottom `1px #e7e5e4` / Text `#1c1917` / Font-size `14px`
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1280px |
| Section Gap | 64px - 96px |
| Grid | 12-column desktop |

## Do's
- Use `#002bff` exclusively for primary interactive elements.
- Maintain sharp `0px` corners on all containers and buttons.
- Use **JetBrains Mono** for any content representing code or data parameters.
- Apply `1px #e7e5e4` borders to define section boundaries.
- Ensure high-density tables remain legible through consistent 20px line-height.

## Don'ts
- **Wrong:** Using a rounded radius on a primary button. **Right:** Always `0px`. **Reason:** Pinecone's identity is built on architectural precision.
- **Wrong:** Using `#002bff` for large background areas. **Right:** Use for accents and CTAs. **Reason:** Overuse kills the "signal" value of the brand color.
- **Wrong:** Mislabeling a sub-brand color (like a decorative violet) as the primary blue. **Right:** Stick to `#002bff`. **Reason:** Parent brand integrity depends on chromatic consistency.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --pinecone-blue: #002bff;
  --pinecone-stone: #e7e5e4;
  --pinecone-charcoal: #1c1917;
  --pinecone-white: #ffffff;
  --radius-none: 0px;
}
```

## Known gaps
- Hover and Active states for tertiary buttons were not fully captured in the automated run.
- Mobile-specific navigation transitions were not analyzed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://pinecone.io | 1440px | 2026-06-06 |
| Pricing | https://pinecone.io/pricing | 1440px | 2026-06-06 |
| About | https://pinecone.io/about | 1440px | 2026-06-06 |