The all-in-one notebook for creatives. Brainstorm, write, and plan in a single tool.
Screenshot of the cloverapp.co homepage.
Three ways to ship a Clover-style UI.
Use in your AI builder, no-code tool, or CMS
Paste the DESIGN.md in and ask the tool to restyle your existing site to match this design, or start a brand new one from scratch with the same visual language.
Not affiliated with Clover. All trademarks belong to their respective owners.
About Clover
Home page hero
The page is a near-black, scrolling product story from 2020. In the top bar a small white clover-shaped mark sits at the left and, at the right, a white pill holds an email field in tiny spaced monospaced caps with a magenta sign-up button inside it, above a caps line about early access and signing in. The hero shows a dark tablet and a dark phone, tilted and overlapping, with a notes workspace on the tablet (a sidebar page tree, a page titled "Cozy Conifers" with an image collage, a to-paint checklist) and an agenda view on the phone. The headline, "The all-in-one notebook for creatives.," is white and left aligned in a clean sans, with a grey sentence about brainstorming, writing and planning in a single tool.
Writing and thinking
A magenta mono caps eyebrow, "Reimagining the page," introduces the headline "Designed for better writing and thinking," with the word "and" in italic. Two grey paragraphs explain that word processors work in straight lines and the product lets documents be exploded into free-form maps. Below them, two tabs labelled writing and thinking sit over a thin line, with the first one in magenta, and a wide dark editor window shows a document called "Kickoff" with an indented timeline, a to-do list with checked and unchecked items and a short note, with a column of tiny dots on the left edge.
Tasks, quick capture and customization
Each later block follows the same pattern: a small magenta eyebrow in mono caps, a bold two-line headline and a grey paragraph. "Manage your tasks. Plan your days." sits beside a tilted phone with a dated agenda. A wide command bar shows a typed sentence with the time words highlighted in magenta, then a row of small chips for the item type, the agenda target and a date, ending in a magenta create-task button. "Quickly capture ideas, notes, and tasks" follows, then "Make it yours," illustrated by a large rainbow color ring with sun and moon toggles at its center and a ghosted sidebar with one magenta highlighted row.
Team and closing
An "Our team" section shows two portrait photos with angled cut corners and black name tags with handles in magenta, next to the headline "On a mission to unlock creativity." and a line of small logos for tools the founders designed before. The page ends on a fan of thin magenta curved lines radiating around the clover mark, the sign-off "where ideas grow," a line saying web, desktop and mobile are coming soon, and a mono footer with the company name, a 2020 copyright and five links.
How the page reads
It is a quiet, dark page with one magenta accent. The mono eyebrows and the command bar give a keyboard-first tone, and large product mockups carry the explanation.
Based on a single full-page screenshot of cloverapp.co from 2020 (the footer shows a 2020 copyright), when the product was in early access, the only capture available for this entry. Features, availability and team details are as shown on the capture date and may have changed. Check the live site for the current offering.
Related designs
