74 MVP frontends: websites, shops, panels and apps

This is a set of 74 frontends built as MVPs, each for a different fictional brand with its own name, logo, palette and style, in industries from coffee roasting to astronomy. The brands do not exist, so the set does not describe work for clients. What it shows is how far apart the interfaces we design and build can be.

Every frontend is a separate project with its own code and its own build, not another copy of one template with the colour swapped. Layout, typefaces, icons and motion are chosen for what the company does and who it shows it to.

Colour here is not one button on a grey background. The brand palette carries the backgrounds, surfaces, cards and headings, so the Ashgrove Roasters coffee roastery is brown from header to footer, the Corsa Nine Racing team red across the full screen and the Strata auction house teal. The palettes come from ready colour sets, and the missing lighter and darker shades are worked out from the same hue instead of reaching for a neutral grey.

Typefaces come in pairs chosen for the brand's character: Fraunces with Manrope for the Casa Marlow hotel, Teko with Inter for the Emberset training app, IBM Plex Sans with Plex Mono for the Ledgerline finance panel. The Carrier BBS terminal writes in a single face, VT323, because that is what the screens it recalls looked like.

Logos and icons are drawn for the industry. The roastery has its own roast-level gauge made of beans, the auction house hand-drawn mineral specimens, and the Lightfold photo culling program a star, a flag and an aperture-shaped logo.

The kind of interface is only the start. Among the shops there is Strata, an auction house with no cart, with bidding and a countdown to the end of each lot, and Rookery Games with two tracks: an ordinary shelf with a cart and drops that open at a set hour with a hard limit on copies. Inkhollow sells fountain pens with a choice of nib width.

The websites do not repeat one pattern either. Instead of a header photo Farwater opens on a full-screen, hand-drawn map of the islands with a booking panel, Corsa Nine Racing scrolls through full-screen sections with dot navigation, Switchbench keeps the keyboard preview and the price beside you through the whole configurator, and Foxglove starts straight with a grid of tattoo designs and a style filter.

The web apps do not share one skeleton with a side menu: Handbill is a kanban board, Frameforge a six-step bicycle builder, Tackboard a board you pan and zoom, and Redline an editor with the form on the left and the finished CV on the right. Among the mobile apps Krausen moves from the list to a batch's details through stack navigation instead of a bottom tab bar, and Farstride spreads the run map across the whole screen.

These frontends are not pictures to look at. Filters narrow the catalogue, the cart adds up the total with shipping and survives a page reload, and the price follows the variant: in Trestle a chair with the walnut finish and the wider seat costs exactly what the surcharges add up to. In Tapehouse Studio the play button moves the playhead across the tracks through Web Audio, in Emberset the rest between sets counts down, and Orrery recalculates the altitude and azimuth of the stars with spherical astronomy for the chosen place when you move the time slider.

The numbers on the screens add up. The Alcove mortgage calculator works out the loan amortisation, the Ashcombe Athletic league table counts points and goal difference from the results, the Layerhouse print queue sums the time, material and cost of every item, and moving a deal to won in Quota immediately lowers the value of the open pipeline. Carrier has message boards with threads and replies, file downloads timed by modem speed and blackjack on a full 52-card deck.

Every project stands on the same toolset: React 19, TypeScript, Vite and Tailwind CSS 4, with the Motion library behind the movement in most of them. There is no backend: the data lives in the project files, and state such as the cart or a reserved tattoo design stays in the browser. That makes it possible to click through the frontend from start to finish before any server exists.

The screens go through a headless browser where their main interactions are clicked, the numbers compared against a manual calculation and the layout measured at phone width, so that nothing spills off the screen. The browser console has to stay empty along the way.