Skip to content
BetaFree MCP server
basewell.com/ (opens in new tab)
Basewell full landing page screenshot (desktop)

Basewell

basewell.com/

Basewell is a knowledge and compliance platform with two parts: a learning-management system for employee training and certifications, and a beta “Compliance SDK” that checks AI agent responses against a company's approved policies before they go out. The homepage shows a live-looking insights dashboard with specific counts (102 guides, 156 pages, 64 resources, 22 certifications) and includes a JavaScript code sample demonstrating how the SDK validates an agent's output. However, the page also displays a banner reading “Basewell is winding down” above this otherwise fully built-out product pitch, making the homepage itself the clearest signal about the company's current status.

Category
Productivity & Collaboration
Style
LightColorful
Stack
Next.jsTailwind CSS
Fonts
GeistSans
Palette
Meta title
Basewell
Sections
7
Updated

Basewell's landing page, section by section

Each section below is cropped straight from Basewell's live page — useful references for productivity & collaboration landing page design.

Basewell design review: how the homepage is built

Basewell's homepage runs 6055 pixels at desktop width, stacking a collapsed header, a centered hero with a dashboard mockup, a scrolling card row, a feature grid, a blue testimonial panel, a dark SDK block, an FAQ list and a black footer. The page is pale grey with bright blue: #157cff on the announcement button, the highlighted headline words and the quote panel, and #a9cdfa in the sky photo behind the dashboard. Headings use GeistSans. Two pixelated hands reaching toward each other flank the headline, an unusual hero illustration for a knowledge and compliance product.

Above the fold

The header holds only the Basewell wordmark at left and a hamburger icon at right, so the navigation is collapsed. Below it a blue button reads "Basewell is winding down". The headline "Knowledge and compliance for humans and agents" sets "humans" in blue serif and "agents" in blue pixel type. One black "Log in" button is the only call to action. Six grey logos follow, then a framed "Insights" dashboard with a line chart.

Platform cards and feature grid

Under a blue "Platform" tag, "Build effective teams" introduces a horizontal card row with left and right arrow buttons. Cards pair a photo or a grid of integration icons with a bold lead-in such as "Get up and running fast." and "Sync across your tech stack." Next, "Other essential features, saving hours of manual work" sets six items in two rows of three, one titled "Role-based access controls".

Testimonial and SDK block

A rounded blue panel quotes "Adam Kupfer", "General Manager at Roam", with a "Read Roam's story" button. The page then turns black for "Align agentic workflows", tagged "SDK" and "Beta". An "agent.tsx" code editor with numbered lines spans the full width, and its lower lines fade out. Below, three bordered cards, "Validate on the edge", "Detect vulnerabilities" and "Increase visibility", each have an outline icon.

Closing section and footer

No closing call to action appears. A "Frequently Asked Questions" heading leads eight collapsed rows, each with a plus sign, the sixth being "Can I try Basewell for free?". The black footer repeats the wordmark with a tagline and two social icons. A "Navigation" column lists four links, About, Pricing, Blog and Customers, and a "Company" column lists Security and Legal. A green "All systems operational" status closes the bottom bar.

On mobile

At 390 pixels the headline wraps to four lines under the announcement button, and the two hands shrink to the screen edges, one sitting behind "Log in". The six logos reflow into a grid of two columns. Platform cards stack in a single column instead of scrolling sideways, and the six features become one list. The code editor is cut off at the right edge, while the footer keeps its two link columns.

Worth borrowing

  • A hamburger-only header with one "Log in" button keeps all attention on the headline.
  • Mixing a serif word and a pixel-font word inside one headline separates the human and agent audiences.
  • Switching to a black section with a code editor signals the developer SDK within a light marketing page.
Craft landing page design
Craft
Productivity & Collaborationcraft.do/
HireKai landing page design
HireKai
Productivity & Collaborationhirekai.ai/
Usealmanac landing page design
Usealmanac
Productivity & Collaborationusealmanac.com/
Clueso landing page design
Clueso
Productivity & Collaborationclueso.io/
Pasteapp landing page design
Pasteapp
Productivity & Collaborationpasteapp.io/
Linktr landing page design
Linktr
Productivity & Collaborationlinktr.ee/