DataVendor
datavendor.ai/
DataVendor is a Data & Analytics product. See its datavendor.ai landing page design in full — desktop and mobile screenshots plus close-ups of the heroes, footers, careers pages and blog pages. It's built with Next.js and Tailwind CSS. Its type is set in gilroy, anchored by a #fdfdfd palette. Study how DataVendor structures its messaging, layout and visual hierarchy, then explore more of the best Data & Analytics website designs.
- Category
- Data & Analytics
- Style
- LightMinimal
- Stack
- Next.jsTailwind CSS
- Fonts
- gilroyGeist
- Palette
- Meta title
- DataVendor | Monetize your data supply
- Sections
- 4
- Updated
DataVendor's landing page, section by section
Each section below is cropped straight from DataVendor's live page — useful references for data & analytics landing page design.
DataVendor design review: how the homepage is built
The page is a short run of white bands split by hairlines: a centred hero, a statement over a yellow dot field, a positioning row, a tabbed catalogue of sellable data, an estimator, a three-step strip, a closing call and a footer that dissolves into yellow dots. The desktop capture is 7089 pixels tall. Near-white #fdfdfd carries almost everything, with near-black #282726 on primary buttons and grey #a9a9a9 for muted copy. Gilroy sets the headings and Geist the body. Every illustration is a halftone dot grid, from hero waves to a dotted "$150k".
Above the fold
A thin header carries a yellow hexagon logo, four grey links from "Resources" to "Docs", a text "Sign in" and a dark "Sign up". "Monetize your data supply" is set very large over two centred lines, above a three-line subhead with key phrases in bolder black. Two buttons stack vertically, a dark "Access marketplace" over an outlined "Estimate your assets", on faint grey halftone waves.
Statement, dot field and supply catalogue
A wide sentence opening "Less than 0.01%" mixes grey and black words and underlines "couldn't" with a yellow squiggle. Below it, hundreds of yellow dots hold one black dot and an "eval tasksets" label. "DataVendor™ is the market for that supply." sits beside a black halftone shape, with "Start selling" and "View marketplace". "What you can sell" has five side tabs, from "Codebases" to "Raw data", next to six priced listing cards.
Estimator and three-step strip
"Estimate" repeats the split heading layout, with copy and an outlined "Estimate in 1 click" button on the right beside three source icons. A dotted canvas shows a halftone oval next to a figure spelled out in dots, "$150k". The "How it works" row has three columns, "1. Add inventory", "2. Quality checks" and "3. Go to market", each under a thin line; only the third line is green, above a green dotted dollar sign.
Closing section and footer
"See what your supply is worth." is centred in large type over a dark "Get started" and an outlined "Contact sales", with wide white space around it. The footer has four short columns, "Estimator tools", "Resources", "Legal" and "Social". A "Provided by" credit sits at the left, the hexagon logo in the centre and a three-way theme switch at the right, above a band of yellow halftone ridges.
On mobile
At 390px the headline breaks over three lines and the opening statement becomes a tall column. The yellow dot block shrinks to a smaller grid labelled "finance reasoning sets", and the black halftone shape moves above its heading. The supply tabs collapse to a single "Tasks" selector with arrows and two listing cards. Each "How it works" step stacks with its own coloured dot illustration.
Worth borrowing
- Drawing every illustration in halftone dots, even the "$150k" figure, gives a text-heavy page one visual language.
- Lighting only the last step's top line green turns the three-step row into a progress bar.
- Showing priced listings such as "Legal contract QA" at "$42k" makes the selling pitch concrete.
