Pinecone. Graph paper under a cobalt halftone.
- AI
- Light theme
- 11 colors
- 2 typefaces
Pinecone is a near-white technical sheet ruled into a visible grid: a 1184px content column framed by full-height #e7e5e4 hairlines, with every card, button and input cut at 0px corners and joined edge to edge. Stone-toned ink #1c1917 carries the copy, and a single electric Index Cobalt #002bff does all the talking: the announcement strip, the square primary button, one word of the headline, the halftone dot field beside the hero and the benchmark figures. GT Planar sets 44px and 32px headings at a confident 700 with only slight negative tracking, while widely tracked 14px uppercase eyebrows and JetBrains Mono tabs and brace tags give the page the feel of a well-kept engineering console rather than an AI-hype poster.
Pinecone design system
Brand1
Announcement strip, square primary buttons, the headline accent word and benchmark figures — one saturated blue against stone grays
Accent2
Cobalt at 50% strength: the idle Subscribe block, console button outlines and the fading dots of the hero halftone
Active row tint in the console sidebar (cobalt at 5% opacity) behind a 2px Index Cobalt left rule
Neutrals7
Headings, navigation, body copy, logo and line icons, plus the filled selected code tab and the closing Start building button
Lead paragraphs, card body copy and inactive segment labels — a warm gray that keeps long copy softer than the ink
Section eyebrows, footer column heads, code comments, stat captions and the legal line
The 1px rules that build the whole page: column gutters, header base, card seams, ghost buttons and inputs
Cooler 1px borders inside the product console mock-up: sidebar edge, tab rail, filter fields and chart frames
Page canvas, header field, ghost-button and input fills — a faintly cool off-white so Paper cards read as raised sheets
Grid cards, code blocks, the console panel and button labels on Index Cobalt
semantic1
The 9999px live-status dot beside the record count and high similarity scores in the console
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Paper on Index Cobalt
7.53 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7
