What is Pinecone's primary brand color?

Pinecone's signature voltage is an electric blue at #002bff — used as the filled Start Building CTA background, the inline hero word 'context', the secondary nav CTA, and the link color across the page. Frequency on the home page is 41 (21 as text, 12 as background, 7 as border). The pressed and hover states resolve to a slightly desaturated #302bff via the Osano consent widget's contrast tokens. Sub-brand colors exist in CSS variables — violet #3d11a0, primary-dark navy #222160, frost-blue #b3d5ff — but they stay off the hero on the home page and surface only inside product UI accents and chart strokes.

Why are Pinecone's buttons square instead of rounded?

Every primary button on the page ships at a 0px border radius — the Start Building CTA, the secondary Get a Demo outlined button, and the dashboard Connect button all hold the square corner. Most developer-infra brands soften to 6px or 8px (Supabase, Linear, Vercel's nav scale), but Pinecone holds the engineered right-angle. The radii actually observed on the page are 50% (avatar circles, the integration logo orbit) and 4px (form-style chips inside the cost estimator widget). The square button reads as load-bearing infrastructure rather than a friendly product.

What font does Pinecone use, and what should I use if GT Planar isn't licensed?

The system runs GT Planar (a Grilli Type geometric sans) at weights 400 / 500 / 600 / 700 for display and body, with JetBrains Mono at 12px as the technical companion inside the install snippet and Apple II Pro as a one-off terminal accent inside the [Cursor] [Copilot] [Codex] [Gemini] [CLI] [MCP] integration bracket row. Display sits at 44px / 700 with -0.88px tracking — heavier than the weight-300 fintech track Stripe runs, and heavier than Vercel's 600 ceiling. If GT Planar is not licensed, Inter at weight 700 with letter-spacing -0.88px at 44px is the closest substitute; JetBrains Mono is open-source so the mono companion drops in directly.

What is the workhorse border color on the page?

A warm near-white at #e7e5e4 carries every divider, card border, section split, and table outline on the page — frequency 509, the highest count in the entire palette. It resolves from `--border` and `--color-border` and is the only border color the marketing surface uses. Cooler #cbd5e1 and #6b7280 exist as `--color-divider` and `--color-secondary` but appear under 20 times combined. When porting the system, alias every Tailwind `border-zinc-200` / `border-slate-200` / `border-neutral-200` to a single `--hairline` token at #e7e5e4 — the warmth is intentional.

What is the bracketed [Cursor] [Copilot] [Codex] row in the hero?

Below the install snippet sits a single-row marquee of bracket-wrapped agent labels — [Cursor] [Copilot] [Codex] [Gemini] [CLI] [MCP] — rendered in Apple II Pro, a bitmap-style terminal face exposed by the CSS variable `--font-apple-ii-pro`. It is the only place on the page the bitmap font appears. The bracket-wrapped, mono-coded ASCII signals the agent-integration story typographically rather than via icons — the brand argues that you can call Pinecone from your editor's chat panel, and the font choice carries the argument. Match this only when the page genuinely talks to agents.

Can I use this DESIGN.md to build a React app that looks like Pinecone?

Yes — feed the file to Claude, Cursor, or any AI agent that reads structured design tokens and it will reproduce Pinecone's specific moves: 0px buttons in electric #002bff with white text, warm-near-black #1c1917 ink rather than pure black, 44px display at weight 700 with -0.88px tracking, and a single chromatic voltage that refuses a secondary accent on the home surface. Reference the tokens directly inside Tailwind config: every hex (#002bff, #1c1917, #e7e5e4, #b3d5ff) is quoted so it pastes cleanly into theme files. The 18 component recipes map the primary CTA, the outlined secondary, the dashboard URL pill, the install code block, and the architecture card row onto shadcn primitives.

Pinecone Design System

Pinecone's design system as a DESIGN.md file.

About Pinecone DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source pinecone.io

Backend, Database & DevOps
AI & LLM Platforms

Pinecone's page is the vector database rendered as a technical brochure. The canvas commits to pure white (#ffffff), text lands in a warm near-black (#1c1917) rather than the cool #000000 the page's CSS exposes, and the one chromatic event on the hero is the electric blue primary at #002bff — used inside the inline "context" word of the headline, the filled Start Building button, and the secondary nav CTA. Where most developer-infra brands soften the corner radius to 6px or 8px, Pinecone holds every button at 0px. The square edge is the signature. Sub-brand violet (#3d11a0) and frost-blue (#b3d5ff) sit declared in CSS variables but stay almost entirely off-page on the home surface — reserved for product UI accents and chart strokes.

This page packages the system into a single DESIGN.md file following the Google Labs open spec. Inside: 22 color tokens (one primary, one primary-dark navy, three sub-brand accents, a five-step warm grey ladder from #e7e5e4 hairline to #1c1917 ink, plus four semantic info / success / warning / error roles), 11 typography styles running GT Planar at weights 400 / 500 / 600 / 700 with a JetBrains Mono companion at 12px and an Apple II Pro terminal accent for the integration bracket row, 4 radius tokens topping at 50% for avatar circles, an 8-step spacing scale anchored at 16px, and 18 component recipes — the square Start Building primary, the outlined Get a Demo, the app-pinecone.io URL pill at the top of the dashboard mockup, the install-pinecone code block, and the architecture three-column card row.

Feed the file to Claude, Cursor, or GitHub Copilot when you want a React surface that reads as Pinecone rather than another shadcn theme. The agent reproduces the specific moves: 0px buttons in #002bff with white text, 44px bold display at -0.88px tracking, warm #1c1917 ink rather than pure black, and a single electric blue voltage that refuses to share the page with a secondary accent. Reference the tokens inside Tailwind config or treat the spec as an audit checklist — every hex is quoted so it pastes cleanly into theme files. The system is worth studying because of what it refuses: no rounded buttons, no atmospheric gradient, no display weight below 700.

What makes it distinct

Square 0px button radiusthe Start Building CTA at #002bff never rounds, where every other developer SaaS pills its buttons
Single electric voltage#002bff appears 41 times (21 text, 12 bg, 7 border) and is the only chromatic event above the fold
Bold-700 display tier44px hero at weight 700 with -0.88px tracking, where Stripe and Vercel hold display at 300 / 600
Apple II Pro terminal font appears oncethe bracketed [Cursor] [Copilot] [Codex] [Gemini] [CLI] [MCP] row signals the agent-integration story typographically
509-occurrence #e7e5e4 hairlinethe warmest near-white border in the palette carries every card divider and section split

Live at pinecone.io

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

pinecone.io

Explore Pinecone

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Pinecone design system FAQ

Common questions about Pinecone's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Pinecone — official site

The managed vector database the system is extracted from.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Pinecone in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→