Craft

Item: Craft
Rating: 7.9

Productivity app for notes, tasks, docs and planning.

7.9/10MABTU rating

DESKTOP · 1440 × 11,057/ ↗

MOBILE · 390

Section outline · Home

01heroSky-blue torn-paper collage and CTA828
02featuresFive icon links379
03use casesPortrait cards on colour blocks860
04featureLilac panel with doc UI732
05featureGreen panel with integrations629
06awardsFour award badges and quote
07featureYellow panel with calendar and tasks
08featureThree organisation cards665
09featureRow of themed document covers639
10communityFour channel tiles617
11pricingFree and Plus cards853
12ctaGreen rounded banner230

Rating · Home

Visual design8.2

UX & clarity7.8

Originality7.8

Craft & consistency8.1

Motion6.5

Performance & a11y8.0

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

Main colours

Light & dark toggle·off white background·muted

Typography

Untitled Serifheading · serif · self-hosted Interbody · sans · self-hosted Untitled Sansaccent · sans · self-hosted

Stack & style

Next.js React Splide Tailwind CSS

Editorial Playful Rounded / soft Product-UI-led Logo cloud Pricing table Sticky header Testimonial slider Transparent header

Also: Plausible, PostHog, Cloudflare

Design DNA

Warm off-white page with a light serif for headlines and italic serif for quotes. Hero is a sky-blue panel with a torn-paper collage of clouds, yellow lined paper and black shapes. Use-case portraits sit on colour-block backgrounds with roles and italic task lists. Feature panels are pastel rounded blocks (lilac, green, yellow) holding app UI cards. A row of document-cover themes, community channel tiles, award badges, a two-plan pricing pair (white vs black), and a green torn-edge CTA before a black footer.

Worth borrowing

Build hero art as a torn-paper collage instead of a device render.
Set user stories as portrait cards on flat colour blocks with italic serif task lists.
Contrast a white free plan with a black paid plan card side by side.