--- version: alpha name: Pinecone website: "https://www.pinecone.io" description: >- Pinecone's marketing surface is the managed vector database translated into a square-edged technical brochure — an electric blue primary (#002bff) carries every Start Building CTA at a 0px radius, ink sits in warm near-black #1c1917 on a #ffffff canvas, type runs GT Planar at weight 700 for display (44px, -0.88px tracking) above 16px/24px GT Planar body, and a JetBrains Mono / Apple II Pro pair handles the install snippet and the [Cursor] [Copilot] [Codex] [Gemini] [CLI] [MCP] bracket row. The brand reads as load-bearing developer infrastructure, not a friendly SaaS — square buttons, no rounded corners, a 509-occurrence #e7e5e4 hairline doing every divider. seo: title: "Pinecone Design System for React — Electric #002bff, GT Planar, 18 components" metaDescription: "Pinecone's design system as a DESIGN.md file. Electric blue #002bff, GT Planar, 22 color tokens, 18 components. For React, Next.js, and AI tools." highlights: - "Square 0px button radius — the 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 tier — 44px hero at weight 700 with -0.88px tracking, where Stripe and Vercel hold display at 300 / 600" - "Apple II Pro terminal font appears once — the bracketed [Cursor] [Copilot] [Codex] [Gemini] [CLI] [MCP] row signals the agent-integration story typographically" - "509-occurrence #e7e5e4 hairline — the warmest near-white border in the palette carries every card divider and section split" tags: - "Backend, Database & DevOps" - "AI & LLM Platforms" lastUpdated: "2026-05-13" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.pinecone.io" title: "Pinecone — official site" description: "The managed vector database the system is extracted from." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files." questions: - id: "primary-color" title: "What is Pinecone's primary brand color?" answer: "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." - id: "shape-language" title: "Why are Pinecone's buttons square instead of rounded?" answer: "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." - id: "typography" title: "What font does Pinecone use, and what should I use if GT Planar isn't licensed?" answer: "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." - id: "hairline" title: "What is the workhorse border color on the page?" answer: "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." - id: "agent-row" title: "What is the bracketed [Cursor] [Copilot] [Codex] row in the hero?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build a React app that looks like Pinecone?" answer: "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." colors: primary: "#002bff" primary-dark: "#222160" brand-violet: "#3d11a0" brand-frost-blue: "#b3d5ff" brand-cyan: "#8bf6ff" ink: "#1c1917" ink-cool: "#111827" ink-secondary: "#57534e" ink-mute: "#4b5563" ink-tertiary: "#a8a29e" ink-secondary-cool: "#6b7280" canvas: "#ffffff" surface: "#f1f5f9" hairline: "#e7e5e4" hairline-cool: "#cbd5e1" overlay: "#2b3244" navy: "#1a194c" info: "#002bff" success: "#15b077" warning: "#dd815d" error: "#e31957" accent-yellow: "#f4e04d" on-primary: "#ffffff" typography: display-hero: fontFamily: "GT Planar, system-ui, sans-serif" fontSize: 44px fontWeight: 700 lineHeight: 1.1 letterSpacing: "-0.88px" display-h2: fontFamily: "GT Planar, system-ui, sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0px heading-md: fontFamily: "GT Planar, system-ui, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0px body-lg: fontFamily: "GT Planar, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body-md: fontFamily: "GT Planar, system-ui, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px body-sm: fontFamily: "GT Planar, system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0px label-eyebrow: fontFamily: "GT Planar, system-ui, sans-serif" fontSize: 11px fontWeight: 500 lineHeight: 1.4 letterSpacing: "0.6px" label-caps: fontFamily: "GT Planar, system-ui, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.5 letterSpacing: "1.8px" caption: fontFamily: "GT Planar, system-ui, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px code-md: fontFamily: "JetBrains Mono, ui-monospace, Menlo, monospace" fontSize: 12px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px terminal-bracket: fontFamily: "Apple II Pro, ui-monospace, monospace" fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px rounded: none: "0px" sm: "4px" md: "6px" full: "9999px" circle: "50%" spacing: xxs: "2px" xs: "4px" sm: "6px" md: "8px" base: "10px" lg: "16px" xl: "32px" xxl: "64px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "8px 16px" height: 39px border: "0" button-primary-hover: backgroundColor: "#302bff" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "8px 16px" height: 39px border: "0" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "8px 16px" height: 39px borderColor: "{colors.hairline}" nav-cta: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "8px 16px" height: 36px top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-cool}" typography: "{typography.body-lg}" rounded: "{rounded.none}" padding: "0px 32px" height: 73px nav-link: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-cool}" typography: "{typography.body-lg}" rounded: "{rounded.none}" padding: "0" border: "0" announcement-bar: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "8px 16px" eyebrow-label: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.label-eyebrow}" rounded: "{rounded.none}" padding: "0" hero-heading: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-hero}" rounded: "{rounded.none}" padding: "0" body-paragraph: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-secondary}" typography: "{typography.body-lg}" rounded: "{rounded.none}" padding: "0" card-section: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "32px" borderColor: "{colors.hairline}" card-architecture: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "32px" borderColor: "{colors.hairline}" url-pill: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.code-md}" rounded: "{rounded.full}" padding: "4px 10px" borderColor: "{colors.hairline}" text-input: backgroundColor: "#fbfbfc" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "10px 16px" height: 46px borderColor: "{colors.hairline}" estimator-chip: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "4px 10px" borderColor: "{colors.hairline}" code-block: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.code-md}" rounded: "{rounded.none}" padding: "11px 14px" borderColor: "{colors.hairline}" integration-bracket: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-secondary}" typography: "{typography.terminal-bracket}" rounded: "{rounded.none}" padding: "0" logo-orbit: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-tertiary}" typography: "{typography.body-sm}" rounded: "{rounded.circle}" padding: "0" footer-cta: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "8px 16px" height: 39px --- ## Overview Pinecone's page is the managed vector database rendered as a technical brochure. The canvas commits to `{colors.canvas}` (pure white `#ffffff`), text lands in `{colors.ink}` (`#1c1917` — a warm near-black, not the `#000000` the CSS also exposes), and the only consistent chromatic event above the fold is the **electric blue voltage** at `{colors.primary}` (`#002bff`) — used inside the inline `context` word of the headline, the filled Start Building button, the secondary top-nav CTA, and the link color across every CTA-adjacent surface. **Square-edged authority**: Where most developer-infra brands soften the corner radius to 6px or 8px (Supabase 6px, Linear 8px, Vercel's nav 6px), Pinecone holds every button at 0px. The Start Building primary, the Get a Demo outlined secondary, the Connect button on the dashboard mockup, the announcement bar at the top of the page — every CTA-shaped surface ships a literal right angle. The square edge is the brand's argument that this is load-bearing infrastructure rather than a friendly product, and it carries through to every card and section split. Typography runs **GT Planar** at weight 700 for display and 400 for body, with a JetBrains Mono companion at 12px inside the install snippet and a one-off Apple II Pro bitmap face reserved for the bracketed `[Cursor] [Copilot] [Codex] [Gemini] [CLI] [MCP]` integration row below the install command. The hero hits 44px / 700 / `-0.88px` tracking — heavier than Stripe's weight-300 fintech track, heavier than Vercel's weight-600 ceiling, and contrary to the category default of restraining display weight below body. Pinecone leans the opposite way: display is the loudest typographic surface on the page. The hairline ladder is the structural workhorse. A warm `{colors.hairline}` (`#e7e5e4`) appears 509 times across the page — every card divider, section split, table outline, and dashboard chrome edge resolves to this single border token. Cooler `#cbd5e1` and `#6b7280` exist inside CSS variables but barely surface on the marketing track. Unlike the convention of one cool grey for borders and one warm grey for text, Pinecone aligns warmth across both — the warm-near-black ink at `#1c1917` and the warm-near-white hairline at `#e7e5e4` share the same temperature. ## Colors - **Electric blue (`#002bff`)** — frequency 41. Used as text (21), background (12), border (7). The single load-bearing voltage on the home surface — Start Building CTA, hero inline "context" word, top-nav CTA, link color. The only chromatic event above the fold. - **Hairline warm (`#e7e5e4`)** — frequency 509, all as border. The dominant structural token in the system; every card, table, and section split renders against this single value. Resolves from `--border` / `--color-border`. - **Ink warm (`#1c1917`)** — frequency 74. Used as text (73), background (1). The headline and primary body ink — `--color-text-primary` / `--text-primary`. Warm, not cool — the brand picks `oklch(0.216 0.006 56.04)` over pure black. - **Ink cool (`#111827`)** — frequency 131, all as text. The secondary text grade resolved from Tailwind's `gray-900` / `slate-900` / `zinc-900`. Used in product UI body copy, table rows, dashboard chrome. - **Pure black (`#000000`)** — frequency 193. Used as text (191), shadow (2). High raw count but mostly inherited from gradient stops and Osano consent-widget defaults; rarely surfaces on the marketing canvas. The brand prefers `#1c1917` for ink. - **Canvas white (`#ffffff`)** — frequency 96. Used as background (79), text (12), border (4), gradient (1). The dominant surface fill across every section. Resolves from `--paper` / `--color-background` / `--white`. - **Ink secondary (`#57534e`)** — frequency 31, all as text. The secondary body-copy grade. Resolves from `--text-secondary` / `--color-text-secondary`. Used for the "Fast retrieval. Accurate results. Lower costs." hero subtitle and section dek copy. - **Ink mute (`#4b5563`)** — frequency 58, all as text. The tertiary body grade — `--color-secondary` / `--color-neutral-600`. Used inside dashboard mockup labels and table column headers. - **Ink tertiary (`#a8a29e`)** — frequency 49. Used as text (43), border (6). The faint-text grade for axis labels, watermark logo strokes, and the "01 · WRITE" / "02 · INDEX" / "03 · QUERY" section step markers. - **Hairline cool (`#cbd5e1`)** — frequency 9, all as border. The cooler divider grade — `--color-divider` / `--color-zinc-300` — surfaces inside the cost estimator widget and certain product UI chrome but stays scoped, not page-wide. - **Surface (`#f1f5f9`)** — frequency 2, all as background. The faint band fill for alternating section backgrounds. Resolves from `--surface` / `--color-surface`. Reserved for section-band differentiation; never used for cards. - **Primary dark (`#222160`)** — declared in `--color-primary-dark` / `--primary-dark`. The deep navy companion to the electric blue; sits inside CSS but stays off the home page surface. Reserved for product UI accent. - **Brand violet (`#3d11a0`)** — declared in `--color-brand-violet` / `--brand-violet`. The sub-brand voltage — does not appear on the home canvas but exists for chart strokes and product-feature illustrations. - **Brand frost-blue (`#b3d5ff`)** — declared in `--brand-frost-blue` / `--color-brand-frost-blue`. The pale companion for chart fills and ambient background tints inside product UI. - **Brand cyan (`#8bf6ff`)** — frequency 2, all as background. A pale cyan accent — `--color-cyan-200` / `--color-alpha6`. Appears as a faint chart fill and decorative dot inside the dashboard mockup. - **Navy (`#1a194c`)** — declared in `--color-navy` / `--color-navy2`. A near-indigo deep tone reserved for overlay scrims and inverted-band backgrounds; not present on the home surface. - **Overlay (`#2b3244`)** — declared in `--overlay` / `--color-overlay`. The modal-and-drawer scrim tone — desaturated dark slate, used at low opacity. - **Success (`#15b077`)** — declared in `--color-success` / `--success`. The semantic positive — index-ready states, healthy uptime indicators inside product UI. - **Warning (`#dd815d`)** — declared in `--color-warning` / `--warning`. The semantic caution — burnt-orange, never bright amber. Reserved for usage thresholds inside dashboards. - **Error (`#e31957`)** — declared in `--color-error` / `--error`. The semantic negative — magenta-red rather than pure red, picks up the brand's preference for off-axis hues. - **Accent yellow (`#f4e04d`)** — frequency 1, as background. A single decorative yellow chip inside the dashboard mockup's chart legend; absent from every other surface. ## Typography The system runs **GT Planar** (a Grilli Type geometric sans) across every text surface, declared in `--default-font-family`. Weights observed on the page: 400 (body, nav, paragraph), 500 (eyebrow labels, ALL-CAPS section markers), 600 (subhead emphasis), 700 (hero, h2, h3). Display tier hits 44px / 700 / `-0.88px` tracking — the brand picks weight rather than size to carry voice. There is no italic on the page, and no display weight below 600. **JetBrains Mono** at 12px is the technical companion, declared in `--font-mono` / `--font-jetbrains-mono`. It appears once on the home surface — inside the `npm install pinecone` code block — and again across product UI chrome for IDs, region strings, and namespace labels. **Apple II Pro** is the one-off bitmap accent, declared in `--font-apple-ii-pro` / `--font-apple-ii`. It appears exactly once on the home page: the bracketed `[Cursor] [Copilot] [Codex] [Gemini] [CLI] [MCP]` row below the install snippet. The font signals the agent-integration story typographically — pinecone is a database you call from your editor's chat panel, and the bitmap face carries that argument without an illustration. Eyebrow labels above section headlines (`BUILD KNOWLEDGEABLE AI`, `ARCHITECTURE`, `USE CASES`, `ENTERPRISE`) ship at 11px / 500 / `0.6px` tracking, ALL-CAPS, set in the electric blue `{colors.primary}`. They are the most idiosyncratic typographic move on the page — single-line, mid-tracking, blue ink, no icon — and they thread the system together visually. ## Layout The page operates on a 1280px max-width container with `32px` horizontal padding (the dominant `0px 32px` spacing value). Section rhythm is anchored at `64px` vertical gaps between major bands; card grids sit at `16px` internal spacing. The top nav holds at 73px tall, content sections sit at `64px–100px` vertical padding. The cost-estimator widget runs a single horizontal row of dropdown chips at 4px / 6px internal padding — the most compressed UI density on the entire page. The hero composition follows a left-aligned column rather than centered — eyebrow + h1 + paragraph + CTA pair all stacked against the left edge, with a faint decorative arc floating in the right margin. Below the hero, a logo orbit row (Adobe, Workday, L'Oréal, Microsoft, OpenAI, Cohere, Fox) sits at 50% radius circle frames. The architecture three-card row (`01 · WRITE`, `02 · INDEX`, `03 · QUERY`) is the single horizontal triplet pattern; everything else is 1-column or 2-column. ## Elevation & Depth Pinecone refuses traditional shadows. The system documents `--shadow-2xs` through `--shadow-2xl` inside CSS variables but the home surface barely uses them — the dashboard mockup, the cost estimator widget, and the architecture cards all sit on a `1px` hairline ring at `{colors.hairline}` (`#e7e5e4`) rather than a drop shadow. **Hairline-as-elevation**: depth is signaled by a single warm border, not by atmospheric blur. The one exception is the dashboard mockup's URL pill at the top (`app.pinecone.io`) — it ships with a hint of soft surface lift via `--shadow-xs` (`0 1px 2px 0` over black at 5% alpha), barely perceptible but enough to detach the pill from the chrome below it. ## Shapes The radius story is binary: 0px or circular. Every button, card, code block, section panel, and input ships at `0px`. The avatars in the logo orbit, the chart legend dots, and the decorative arcs in the hero ship at `50%` (circle). The system declares `--radius-md` at `.375rem` (6px) and `--radius-lg` at `.5rem` (8px) inside CSS variables, but the home page does not use them — they exist for product UI chrome (table cell rounding, certain dropdown chips). The cost estimator widget's "RAG pipeline" / "passion project" select chips hold a `4px` radius, the only mid-radius surface on the home page. ## Components - `button-primary` — `{colors.primary}` background, white ink, `0px` radius, `8px 16px` padding, height `39px`. The Start Building CTA. - `button-primary-hover` — shifts to `#302bff`, a slightly desaturated electric blue from the Osano consent contrast tokens. - `button-secondary` — white canvas, ink text, `0px` radius, `{colors.hairline}` border. The Get a Demo button. - `nav-cta` — top-right Start Building button in the nav bar, smaller `36px` height. - `top-nav` — `73px` tall, white canvas, `0px 32px` horizontal padding, ink-cool text. - `nav-link` — text-only nav items (Products, Enterprise, Customers, Resources, Pricing). - `announcement-bar` — full-width electric blue band at the top of the page carrying the launch broadcast. - `eyebrow-label` — `11px / 500 / 0.6px` ALL-CAPS in electric blue above every section heading. - `hero-heading` — `44px / 700 / -0.88px`, warm ink. Inline `context` word rendered in `{colors.primary}`. - `body-paragraph` — `16px / 400 / 24px` line-height, secondary ink. - `card-section` — square white panel with hairline border, used for the cost estimator and the dashboard frame. - `card-architecture` — the three-up `01 · WRITE` / `02 · INDEX` / `03 · QUERY` panels. - `url-pill` — the `app.pinecone.io` chip at the top of the dashboard mockup; the one pill-radius surface on the page. - `text-input` — `46px` tall, `10px 16px` padding, faint `#fbfbfc` fill, hairline border. - `estimator-chip` — the `RAG pipeline` / `passion project` dropdowns inside the cost widget; the only `4px` radius on the home page. - `code-block` — the `npm install pinecone` snippet, JetBrains Mono on white with a hairline border, copy button right-aligned. - `integration-bracket` — the `[Cursor]` / `[Copilot]` / `[Codex]` / `[Gemini]` / `[CLI]` / `[MCP]` row in Apple II Pro. - `logo-orbit` — the customer-logo carousel below the hero, circular frames at `50%` radius. - `footer-cta` — inverted ink-on-white footer "Start Building" CTA at the bottom of the page. ## Do's and Don'ts **Do** keep every CTA at `0px` radius — including small in-row buttons. The brand's authority comes from the right angle, and softening even one button to 6px breaks the system. **Do** use `{colors.hairline}` (`#e7e5e4`) for every divider, card border, and section split. Cooler `#cbd5e1` exists in the CSS but the marketing track aligns warmth across both ink and hairlines. **Do** reserve Apple II Pro for the integration bracket row only — one occurrence per page. The bitmap font is a signal, not a body face. **Don't** use `#000000` for text — the page declares it but resolves headline ink to `#1c1917` (warm near-black). Pure black appears 193 times in the CSS but the marketing canvas leans warm. For copy, alias `--color-text-primary` to `#1c1917`. **Don't** pill the primary button. Every other developer-infra brand softens to 6–8px; Pinecone's 0px is the differentiator. A pilled Start Building looks like a competitor's button instantly. **Don't** introduce a secondary chromatic accent on the home surface. The CSS declares brand-violet `#3d11a0` and brand-frost-blue `#b3d5ff` but they stay off the marketing canvas — using either alongside the electric `#002bff` would dilute the single-voltage principle. **Don't** drop a heavy shadow under cards — the system signals elevation via the `#e7e5e4` hairline ring, not via blur. A `shadow-md` on the architecture cards reads as foreign material. **Don't** lower display weight below 600. The brand's voice is carried by weight-700 at 44px against thin 400 body — flattening display to 500 (the Supabase / Linear convention) collapses the contrast that makes the page feel engineered. ## Known Gaps - **Dark-mode marketing variant** — the page declares `data-theme="light"` and `--theme: "light"`; no dark marketing surfaces were captured. The product app may default differently. - **Focus rings** — the system documents `--osano-focus-outline-color: Highlight` (browser default) but no custom focus ring on form inputs or buttons surfaces in the captured CSS. - **Hover state colors beyond `#302bff`** — pressed and hover lifts on cards, nav links, and the architecture panels were not consistently observable. - **Empty / loading / skeleton screens** — the captured dashboard mockup is fully populated; loading states are not represented. - **Toast and inline-alert system** — semantic info / success / warning / error tokens exist (`#15b077`, `#dd815d`, `#e31957`) but no alert or toast component is rendered on the marketing track. - **In-product dashboard chrome** — table header densities, namespace selector chips, the SQL-style query editor — these live inside the product app and weren't captured on the public marketing surface beyond the floating screenshot. - **Motion** — the page runs `marquee` and `marquee-reverse` keyframes at 60s linear infinite for the logo orbit, but easing for hover transitions on buttons and cards is not documented in the captured CSS.