Inside the Artie website design
Artie is a developer tools website built with custom code and Next.js. Its pages are built from navbar, hero, logo cloud, other, features, process, testimonials, CTA, and footer sections, shown here in full-page captures and a scroll recording. Typography: Arizona Mix (display text and headings), Saans (body text), and Saans Mono (monospaced text). Colours: background #F5F5F5, text #241D18, main buttons #047454, surface #FFFFFF.
Stream data changes to your warehouse with sub-minute latency and exactly-once delivery. No Kafka build, no DMS compromises. Its visual style is minimal, geometric, and gradient, with navigation bar, hero, and logo strip among its components.
Why we picked it
A live product dashboard with a rising data line chart sits right under the headline, showing real throughput numbers instead of abstract claims. Soft gradient blocks and circles in green and lilac add warmth to a technical subject, while short numbered steps and paired small screenshots break the long page into easy, scannable chapters.
What to look for
- Navbar: a short menu: only the destinations visitors actually look for
- Hero: a specific headline instead of a generic slogan
- Logo Cloud: a short label that says what the logos are: customers, partners, or integrations
- Features: benefits framed around what the user gets, not internal capability names
Questions designers ask
What fonts does Artie use?
Artie uses Arizona Mix for display text and headings, Saans for body text, and Saans Mono for monospaced text, measured from the captured page's CSS.
What is the Artie website built with?
The Artie website is built with custom code and Next.js, detected when the page was captured.
What colours does the Artie website use?
Measured from the captured page's CSS, the Artie website uses #F5F5F5 for the background, #241D18 for text, #047454 for main buttons, and #FFFFFF for surfaces.
What sections does the Artie website have?
The Artie website includes navbar, hero, logo cloud, other, features, process, testimonials, CTA, and footer sections. Each one opens on its own page, so you can compare it with the same section on other websites.
