craft.do/

Craft

craft.do/

Craft is a cross-device workspace combining notes, tasks, docs, calendars, whiteboards, and daily notes, under the line 'Your space for notes, tasks, and big ideas.' Rather than positioning around one feature, the copy explicitly argues for its own breadth: 'Craft isn't just for one thing, it's for your things.' It backs this with a specific, verifiable award list rather than adjectives — an Apple Design Awards finalist nod, three Webby wins, a German Design Award, and a 4.8-star rating across 25,000+ App Store reviews. The site also lists direct MCP integrations with Claude, ChatGPT, VS Code, Cursor, and Raycast, and shows 18+ selectable visual themes, treating customization as a headline feature rather than an afterthought.

Visit website

Category

Productivity & Collaboration

Style

Light Colorful

Stack

Next.js Tailwind CSS

Fonts

UntitledSerifFontUntitledSansFont

Palette

Meta title

Craft — Productivity App for Notes, Tasks, and Docs

Sections

Updated

Oct 10, 2026

Craft's landing page, section by section

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

Craft design review: how the homepage is built

The Craft homepage runs about 11,057 pixels at desktop width: a framed hero, a row of five feature icons, a portrait carousel, four colour-coded feature panels, pull quotes between them, an awards row, a theme carousel, community tiles, two pricing cards, a closing banner and a black footer. The ground is warm off-white, with sky blue (#a8daf1) in the hero and pale yellow (#fde593) in one panel. Headlines use UntitledSerifFont, often in italics, and UntitledSansFont carries the body. Torn-paper collage and cloud textures set it apart from typical productivity sites.

Above the fold

A rounded frame holds a sky-blue collage of torn paper, clouds and a ripped white edge. A floating pill navigation lists "Product", "Imagine", "Community", "Pricing", "Learn" and "Download", with "Log in" and a black "Try Craft Free" button. The serif headline "Your space for notes, tasks, and big ideas" sits above one pill CTA, also "Try Craft Free". An app window with four coloured document cards overlaps the bottom edge of the frame.

Icon row, portraits and Write panel

"Craft isn't just for one thing, it's for your things." introduces five line icons: "Docs", "Tasks", "Calendar", "Whiteboards" and "Daily Notes". "How people use Craft" follows with five cropped portraits, each with an uppercase name and role and an italic use case. The first panel is periwinkle, headed "From first thought to final form", with a bread-recipe mock-up at left, a "Learn more" button and four icon links.

Imagine, Plan, Organize and Customize

A green "Imagine" panel holds white cards for "MCP connections", "API integrations", "Start Building" and "Community". Four award badges follow, then a yellow "Planning that doesn't feel like work" panel with four cards: "Calendar", "Tasks", "Journal" and "Reminders". "Structure That Adapts to Your Thinking" shows three gradient cards, "Spaces", "Folders & Tags" and "Collections". "Make it unmistakably yours" presents a swipe row of theme cards, including "Writer" and "Shape Shift".

Community, pricing and footer

Four tiles under "Stay in the loop" link to Reddit, Slack, X and YouTube, each in its own brand colour. "Your pace, your plan" shows a white "Free" card at "₹0 /month" and a black "Plus" card with a struck-through "₹658.3" and "₹526.7 /month". A green banner reads "Let's get started" with "Continue on web" and an App Store button. The black rounded footer has five columns: "PRODUCT", "COMMUNITY", "SUPPORT", "COMPANY" and "DOWNLOAD".

On mobile

At 390px the navigation shrinks to the logo, "Try Craft Free" and a menu icon, and the hero shows a phone mock-up in place of the desktop window. The five icons wrap into a grid, the portraits become a swipe carousel, and feature sub-cards turn into collapsible rows marked with plus signs. Pricing cards and community tiles stack, and both closing buttons run full width.

Worth borrowing

A hero with a rounded frame and torn-paper collage gives a utility product personality while the CTA stays a single pill button.
Giving each feature panel its own flat colour (periwinkle, green, yellow) makes the long scroll easy to segment.
Pull quotes in italic serif between panels break up the product mock-ups and add social proof.