Pinecone

How it works

hero:

60/40 left-right split with 3xl headline in black + secondary blue CTA button on left; right side features isometric layered architecture diagram in grayscale line art with subtle shadow depth.

layout:

Vertical stacking of alternating full-width sections: hero with sidebar, logo row, metric cards (3-column grid of outlined stat boxes), 2x2 case study grid, two-column feature section with icon-text pairs, integrated code snippet with background color block, 3x3 icon feature grid, footer with 4-column link structure.

type:

Bold sans-serif (appears to be system stack) for headlines at 2xl–3xl with tight line-height; medium-weight for body copy at sm–base; monospaced code block at xs with orange and blue syntax highlighting; generous letter-spacing on section labels (all-caps, xs weight).

colors:

Bright electric blue (#0052FF) reserved for primary CTAs and accent elements; neutral grayscale (black headlines, mid-gray body copy, light gray borders) with high-contrast white backgrounds; client logos in full black.

distinctive:

Large outlined numerals (21M, 1000, 400) as metric proof points, each housed in a thin-bordered card with supporting label below, creating a scannable stat pattern that repeats the visual language of the product's technical identity.