Pinecone

Overview

Pinecone is the trusted AI knowledge platform for developers and enterprises building production-grade AI agents. The design system embodies 'Technical Minimalism'—a philosophy that strips away ornament to reveal clarity, precision, and developer-first functionality. The aesthetic combines a clean, light-dominant palette with vibrant primary blue accents (#002bff) that signal interactivity and trust. The UI evokes a sense of reliable infrastructure: fast, scalable, and transparent. Voice: direct, confident, and jargon-aware. Pinecone speaks to developers as peers—no marketing fluff, no false promises. Example sentence: 'Your vector index scales from millions to billions of embeddings without latency creep.'

Colors

The color system prioritizes clarity and accessibility within a light, neutral foundation. Primary (#002bff) is the signature accent—used exclusively on CTAs, active states, and key interactive elements that demand user attention. It conveys technical precision and brand identity without aggression. Secondary (#302bff) and Tertiary (#2b8bff) provide supporting accents for status indicators, highlights, and secondary actions, creating a cohesive blue family that feels intentional rather than arbitrary. The surface stack (surface #fbfbfc, surface-container-low #ebebeb, surface-container-high #dcdcde) establishes a subtle hierarchy for cards, inputs, and layered UI without relying on darkness. On-surface text (#1c1c1c) maintains 7:1 contrast against light backgrounds for WCAG AAA compliance.

Typography

The type system uses gtPlanar (or system fallback) as the single typeface family, reinforcing the 'no-nonsense' technical brand. Display (60px, 700 weight) anchors hero sections and major announcements. Headline-lg (44px, 700 weight) is reserved for page titles and section headers—the most prominent text after display. Headline-md (32px, 600 weight) breaks up content into digestible chunks. Title-lg (20px, 600 weight) labels cards and subsections. Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) handle paragraph text and descriptions, with 24–28px line-height for readability. Label-md (15px, 500 weight) and Label-sm (12px, 500 weight) are applied to buttons, badges, and form labels. Letter-spacing is tightened on display and headline levels (-0.04em to -0.01em) to create visual we

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. Sections are separated by lg spacing (40px) for breathing room; internal card padding uses md spacing (24px). The gutter between columns is 24px, maintaining consistent rhythm across breakpoints. Container max-width is enforced at 1280px to prevent line lengths from exceeding 75 characters on large displays—a critical readability constraint for technical documentation and data-heavy interfaces. White-space is generous: cards have 24px internal padding, section headers have 40px top margin, and hero copy sits in a 60% column width to avoid overwhelming the eye. The spacing scale (xs 4px, sm 12px, md 24px, lg 40px, xl 64px) is applied consistently across margins, padding, and gaps. Inputs and form fi

Elevation & Depth

Depth is conveyed through subtle shadows and surface-container layering rather than dramatic drop-shadows. Level 1 (Base): surface #fbfbfc with no shadow—the default canvas. Level 2 (Cards & Containers): surface-container-lowest #f5f5f7 with elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06))—used for standard cards, input fields, and non-interactive surfaces. Level 3 (Elevated Cards & Modals): surface-container-low #ebebeb with elevation.md (0 4px 12px rgba(0, 0, 0, 0.08))—applied on hover or when a card requires emphasis. Level 4 (Floating/Sticky): surface-container #e8e8ea with elevation.lg (0 16p

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are present but restrained, signaling approachability without sacrificing precision. Buttons and inputs use rounded.DEFAULT (8px), a subtle curve that softens hard edges without appearing playful. Cards and larger containers use rounded.lg (16px) to create visual distinction from smaller UI elements. Badges and chips use rounded.full (9999px) for a pill shape, a convention developers recognize instantly. Form inputs (text fields, selects) use 8px to align with button styling, creating visual cohesion in forms. Modals and floating panels

Components

Action Elements Buttons are the primary call-to-action mechanism. button-primary uses backgroundColor {colors.primary} (#002bff), textColor {colors.on-primary} (white), padding 8px 16px, height 40px, and rounded.DEFAULT (8px). On hover, transition to button-primary-hover with backgroundColor {colors.primary-container} (#1c17ff) over 0.2s ease-out. Active state (button-primary-active) darkens to #001a99. button-secondary uses a transparent background with a 1px solid border in {colors.outline} (#bfbfbf), textColor {colors.primary}, and the same padding/height. On hover, fill the background with {colors.surface-container-high} (#dcdcde). All buttons must include a focus ring: outline 3px solid rgba(0, 43, 255, 0.1), outline-offset 2px, applied on :focus-visible.

Containers & Surface

Do's and Don'ts

**Do**

• Do use primary (#002bff) exclusively for CTAs and interactive elements that demand immediate attention—never use it for decorative or background purposes.
• Do maintain 24px gutter spacing between sections and 24px internal padding on cards to create visual breathing room and improve scannability.
• Do apply focus rings (3px solid rgba(0, 43, 255, 0.1)) to all interactive elements for keyboard navigation accessibility.
• Do use the surface-container stack (surface-container-lowest, -low, -high) to create subtle depth without relying on shadows or darkness.
• Do keep line-height at 24px minimum for body text (16px font) and 28px for larger body text (18px font) to ensure readability on screens.
• Do use gtPlanar or system fallback as the single typeface family—avoid mixing serif, script, or decorative fonts.

**Don't**

• Don't use primary blue on backgrounds or large surface areas—it fatigues the eye and reduces contrast for text.
• Don't apply shadows deeper than elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12)) on standard UI elements; reserve heavy shadows for modals and overlays only.
• Don't use border-radius values outside the defined scale (sm 4px, DEFAULT 8px, md 12px, lg 16px, xl 24px, full 9999px)—inconsistent rounding breaks visual cohesion.
• Don't reduce padding below {spacing.sm} (12px) on interactive elements; cramped buttons and inputs feel untrustworthy and are harder to tap on mobile.
• Don't mix rounded corners with sharp corners in the same component family—all buttons should use 8px, all cards should use 16px.
• Don't use color alone to convey status or meaning; pair color with icons, text labels, or patterns for colorblind accessibility.