Twenty

Item: Twenty
Rating: 7.4

Open-source CRM that technical teams can customise.

7.4/10MABTU rating

DESKTOP · 1440 × 12,691/ ↗

MOBILE · 390

Section outline · Home

01heroLight display headline, mono buttons, screenshot over halftone waves1,109
02logo cloudHairline logo grid201
03problemBlack visual and two problem notes724
04featuresThree thin cards891
05featuresData model and layout panel on dark grey2,828
06featuresThree black screenshot cards1,028
07case studiesCustomer card over headline2,520
08testimonialsLarge quote slider with counter880
09faqBlack band with CTA and accordion1,366
10footerNotched white panel on black

Rating · Home

Visual design7.8

UX & clarity7.1

Originality8.0

Craft & consistency7.1

Motion6.5

Performance & a11y7.7

This page scores 7.4; the site score weights the home page double.

Main colours

Light·white background·mono

Typography

Aleoheading · slab · self-hosted Host Groteskbody · sans · google

Stack & style

Next.js React Three.js WebGL canvas

Editorial Monochrome Grain / texture Product-UI-led FAQ accordion Logo cloud Sticky header Tabs Testimonial slider

Also: Cloudflare

Design DNA

Pale grey page with a very light, large display face where key words switch to a heavier weight. Monospace uppercase buttons in black and outline. The hero CRM table screenshot floats over a blue halftone dot field shaped like waves. Black rectangles with notched chamfered corners hold visuals; a hairline logo grid uses crosshair corners. Three thin cards describe production-grade, AI and control. A data-model panel in dark grey, a large light quote slider with 1/3 counter, a black FAQ with plus icons and a notched white footer panel on black.

Worth borrowing

Mix an ultra-light display weight with one heavier phrase in each headline.
Render a background of blue halftone dots shaped like waves behind the product screenshot.
Cut chamfered notches into black panels and the footer card for a hardware-like edge.