Typography
scale ratio 1.224- GT Planarcss: gtPlanardisplay + body400 500 70092%
- JetBrains Monomono400 500 6008%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | GT Planar | 44px | 700 | 1.1 | -0.02em |
| headline | GT Planar | 32px | 700 | 1.2 | -0.019em |
| title | GT Planar | 20px | 700 | 1.4 | 0em |
| body | GT Planar | 16px | 400 | 1.5 | 0em |
| body-sm | GT Planar | 14px | 400 | 1.2 | 0em |
| mono | JetBrains Mono | 13px | 400 | 1.5 | 0em |
Type scale
Aa10Aa11Aa12Aa13Aa14Aa15Aa16Aa18Aa20Aa24Aa32Aa44
- Body size
- 16px / 1.5
- Display size
- 44px
- Display tracking
- -0.02em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 16.91:1
- Muted on bg
- 7.38:1
- Accent on bg
- 7.28:1
- Dark mode
- none
Declared accent tokens
- --brand-blue#002BFFpainted
- --brand-violet#3D11A0not on page
- --color-brand-blue#002BFFpainted
- --brand-frost-blue#B3D5FFnot on page
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 7
- 8
- 10
- 11
- 12
- 14
- 15
- 16
- 20
- 22
- 32
- 128
Corner radii
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 97px
Components
exact computed valuesbutton-primary
Start for free
- backgroundColor
- #002BFF
- textColor
- #FFFFFF
- rounded
- 0px
- padding
- 8px 16px
- height
- 39px
- fontFamily
- GT Planar
- fontSize
- 15px
- fontWeight
- 400
- border
- 1px solid #002BFF
button-secondary
Claude Code
- backgroundColor
- #1C1917
- textColor
- #FBFBFC
- rounded
- 0px
- padding
- 8px 14px
- height
- 37.5px
- fontFamily
- JetBrains Mono
- fontSize
- 13px
- fontWeight
- 400
- border
- 1px solid #1C1917
input
- rounded
- 0px
- height
- 46px
- padding
- 10px 16px
- backgroundColor
- #FBFBFC
- border
- 1px solid #E7E5E4
Layout & motion
- Container
- 1184px
- Grid columns
- 4
- Hero
- left-aligned
- Navigation
- top-static
- Page height
- 5,630px
- Easing
- ease-out
- Durations
- 150ms 200ms 300ms 500ms
- Transitions
- 138
- Keyframes
- 1
- Stack
- next.js, tailwind, hubspot, google-tag-manager, vercel
Page sections (10)
section labels are heuristic
01nav
02heroGive agents
03code sample?One API key. Every way you build.
04feature detail?Cost-performance at any scale
05feature detail?The knowledge engine for agents
06feature detail?Your indexes, always visible
07feature detail?How Pinecone works
08features?Knowledge your organization can trust
09newsletterStart building knowledgeable AI today
10footer
How Pinecone compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 44px: smaller than 77% of indexed sites (median 60px).
- Type scale
- 1.22×: flatter than 72% of indexed sites (median 1.28×).
- Container
- 1184px: narrower than 65% of indexed sites (median 1242px).
- Text contrast
- 16.9:1: lower than 58% of indexed sites (median 17.6:1).
- Page length
- 5,630px: shorter than 76% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- GT Planar
- One of 3 indexed sites that load GT Planar (1%).
- JetBrains Mono
- One of 11 indexed sites that load JetBrains Mono (4%).
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Pinecone use?
Pinecone uses GT Planar (loaded as "gtPlanar") for headings and body text. JetBrains Mono is used for code.
What are Pinecone's brand colors?
Pinecone's website uses a light scheme: background #FBFBFC, text #1C1917, muted text #57534E and borders #E7E5E4.
How is Pinecone's website laid out?
The most common corner radius is 0px, body text is 16px with 1.5 line height, and the page container is 1184px wide.
Similar to Pinecone
GT Planar / Berkeley Mono / Inter#F7F7F7
Buildwithfernbuildwithfern.com
Inter / Inter Display / Tiempos Text#FFFFFF
Attioattio.com
Plain / GT Planar / GT Standard Mono#FFFFFF
Browserbasebrowserbase.com
Inter / Degular / Bricolage Grotesque#FFFFFF
Deepnotedeepnote.com
Inter / JetBrains Mono#FFFFFF
Expoexpo.dev