Pinecone — design system & UI screens
Vector-database landing; a retrieval-for-agents headline, an enterprise logo wall (Microsoft, OpenAI, Cohere, L'Oreal, Fox), and an install command block. Clean light system with a blue accent.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/pinecone.
Decoded design system
Pinecone's decoded design system: background #FBFBFC, text #4B5563, accent #002BFF, link #002BFF, primary #4B5563; type scale h1 44px / h2 32px / body 16px; 4px spacing base; 0px base radius. The single interactive/action color is #1C1917 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FBFBFC |
| surface | #F0F1F2 |
| border | #E0E2E5 |
| text | #4B5563 |
| text_muted | #8D949D |
| primary | #4B5563 |
| accent | #002BFF |
| link | #002BFF |
| secondary | #CBD5E1 |
| button_bg | #1C1917 |
| button_text | #FBFBFC |
Using these colors
- Action color
#1C1917— the single interactive color; only on things you click or must notice, never large fills. accent,linkare all#002BFF— one role, not several (the action color).- accent
#002BFF— accent for emphasis — keep it rare on the page. - primary
#4B5563— ≈ the text color — a foreground/text color, not an action color (action = #1C1917). - secondary
#CBD5E1— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- h1: 44px
- h2: 32px
- body: 16px
Spacing
- base unit: 4px
- scale: 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px
Radii
- base: 0px
- button: 0px
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →
Pages
Sections (10)
- Hero — Give agents context
- Logo Wall — Customer logo row
- Integrations — Install command tabs
- Pricing / Plans — Cost-performance estimator
- Feature — Your indexes, always visible
- Steps / How-it-works — How Pinecone works
- Stats / Metrics — What teams build with Pinecone
- Feature — Building for your organization
- CTA / Sign-up — Start building today
- Footer — Site footer