Kodlo
kodlo.ai/
Kodlo is a Sales & Support product. See its kodlo.ai landing page design in full — desktop and mobile screenshots plus close-ups of the heroes, footers, pricing, contact us, pricing & plans, and 1 more. It's built with WordPress. Its type is set in Space Grotesk, anchored by a #f3f2ed palette. Study how Kodlo structures its messaging, layout and visual hierarchy, then explore more of the best Sales & Support website designs.
- Category
- Sales & Support
- Style
- LightMinimal
- Stack
- WordPress
- Fonts
- Space GroteskInter
- Palette
- Meta title
- End-to-end AI sales workspace with unified context | kōdlo
- Sections
- 6
- Updated
Kodlo's landing page, section by section
Each section below is cropped straight from Kodlo's live page — useful references for sales & support landing page design.
Heroes
More heroesPricing
More pricingContact Us
More contact usPricing & Plans
More pricing & plansBlog pages
More blog pagesKodlo design review: how the homepage is built
The page reads as a numbered edition: a hero with a node diagram, a dark cycle section, a four-column pricing table, a dark source-of-truth block and a closing form. It measures 7423 pixels on desktop. Colour alternates between a warm off-white, #f3f2ed, and near-black panels, with #2a2629 as the text tone and grey for the second half of each headline. Space Grotesk sets the display type, Inter the body, and small monospaced capitals label every figure. The distinctive choice is the technical-drawing voice: crosshair marks, "FIG. 01" captions and boxed node numbers in place of product screenshots.
Above the fold
The top row has the logo, four nav links ("PRICING", "BLOG", "FEATURES", "WHY TO USE?") and an outlined sign-in button. The four-line headline "The AI-workspace for sales." alternates black and grey lines at staggered indents, above a solid "START FOR FREE" button, an underlined "SEE HOW IT WORKS" link and a "#2 Product of the Day" badge. The right half is a gridded diagram of nine numbered nodes, from "ICP INTERVIEW" to "CLOSED DEAL", with one path drawn heavier.
Dark cycle section with three diagrams
The page flips to black for "See kōdlo at work.", with a short paragraph at the right. Three framed diagrams follow, each in a window with three dots and numbered 01, 02 and 03 in outlined digits. The first lists tools on the left and agents on the right, such as "Agentic Deep Research" and "Lead Discovery". The second and third are flowcharts for outbound and inbound work.
Four-column pricing table
Back on light, "Pay for signal, not seats." heads a table with a Monthly and Quarterly toggle. Four columns sit between thin vertical rules: $0 for a 7-day trial, "$49 / mo + VAT", a black column marked "RECOMMENDED" at "$199 / mo + VAT", and "Custom". Features are dash-prefixed lines under hairlines.
Closing section and footer
A second black block, "kōdlo is your one source of truth.", pairs a paragraph with a circular network map of labelled boxes such as "HEAD OF SALES". "THE TRACE" shows five steps from ASK to CITE on a thin curve. The last light section sets "Built for your high-ticket deals." above a three-field form ending in a black "REQUEST ACCESS." button. The footer has an oversized pale wordmark, three numbered link columns and LinkedIn and YouTube icons.
On mobile
At 390px the page stretches to 10690 pixels. The hero buttons stack full width and the badge and paragraph come before the node diagram, which drops below with its labels cramped at the edge. The three cycle diagrams shrink to thumbnails with unreadable text. The pricing columns become one list, Free first, and Pro keeps its black background.
Worth borrowing
- Numbering sections and captioning diagrams as "FIG. 01" gives a product page the feel of a technical document.
- Setting the second half of each headline in grey gives two-tone emphasis without another colour.
- Making only the recommended pricing column black draws the eye to one plan among four.
