Prompt

“A payroll platform for restaurants: clean SaaS, product-UI led, calm, trustworthy.”

The agent invented Backhouse - Restaurant payroll that pulls in shifts and tips, applies state wage rules, and pays on Friday.

Toolchain: pure + inspo
Register: light mode
Build effort: 9+ MCP calls · 5 sites studied
Self-score: 7.5 / 10

The page it shipped - live, scaledOpen full page ↗

The move

The standout move is treating the pay run itself as the hero, drawn in HTML with numbers that add up. Five real staff, hours that sum to 335.0, overtime flagged in amber, tips totalling $4,304.95 and a total-to-fund card that equals gross plus employer taxes, all inside a white screen nested in a soft green field that it bleeds out of on two sides, the way coinbase-com nests its phone. The same amber tip color, green check marks and paid tags then reappear in the three feature demos below, so the page reads as one product rather than a landing page with a screenshot pasted in.

What Inspo gave it

The captures it studied, and exactly what each one contributed.

Amie So - The product screen carries the fold: a real, dense app interface (sidebar, header, table) as the hero visual rather than an illustration. Backhouse's pay run screen follows that density and its blue-pill primary button sits next to a white secondary the same way.
Coinbase - The phone nested inside an oversized rounded color field, two concentric radii, device bleeding out of its own tinted panel. The pay run screen sits inside a soft green field with 28px inset and bleeds off the panel's right and bottom edges.
Todoist - Left text column at roughly 40% with the product UI vertically centered on the right, plus the soft radial vignette behind the screenshot instead of a hard drop shadow. The hero grid split and the radial tint in the screen field come from here.
Moderntreasury - Warm off-white paper, near-black text, muted teal accent used sparingly on tags, sentence case throughout, calm authority. Set the paper, accent temperature and the restraint of the type ramp.
Cleanshot - Dual-action hero CTA where the filled accent pill and the white bordered pill share a row without equal weight; also the single-accent discipline where only primary actions and one badge carry the brand color.

How it was built

The actual MCP calls, in order.

recommend
```
brief "A payroll platform for restaurants: clean SaaS, product-UI led, calm, trustworthy", mode light, vibe calm
```
Feature Stack pick (6 of top hits), evidence: 92% light paper, 83% grotesk sans, accent hue leaning green/teal; exemplars mailchimp-com, cleanshot-com, supabase-com, arrows-to, everlaw-com; comparison-table pricing JSX; hero and spacing guidance
search_screens
```
query "payroll HR fintech product dashboard hero screenshot calm trustworthy", industry fintech, paperBand light, limit 8, detail full
```
public-com, forestadmin-com, polar-sh, moderntreasury-com, coinbase-com, rainbow-me, n26-com--de-de-blog-alle, gusto-com with fold autopsies; coinbase's nested device and moderntreasury's warm paper were the takeaways
find_components
```
type pricing, industry saas, mode light, vibe calm, limit 6
```
pricing crops from amie-so, bear-app, frame-com; surfaced amie-so as a product-UI-led hero worth pulling in full
find_reference_components
```
type hero
```
seven canonical hero shapes (documentary, manifesto, marquee, question, split-screen, stat-led, word-as-art); read for the split-screen tinted-panel idea, none copied directly
get_screen
```
slug amie-so
```
full record and autopsy: headline in upper quarter, app screenshot dominating the lower two thirds, Inter, single blue accent on pills
search_screens
```
query "SaaS landing with product dashboard screenshot as hero, table UI, clean sans, trustworthy", industry saas, paperBand light, macrostructure feature-stack, limit 8, detail full
```
cleanshot-com, trello-com, hey-com, dovetail-com--product-development-wireframing, todoist-com, basecamp-com, ghost-org--about, clay-com; todoist's 40/55 split and vignette confirmed the hero grid
get_reference_jsx
```
type pricing, id three-card
```
the three-card tier layout with one plan raised by a thin accent top rule and no "most popular" badge; used for the Full service tier
find_reference_components
```
type footer
```
seven footer archetypes; note that the four-column sitemap is the most templated shape, so the footer here keeps a brand statement column plus three short lists and a single sign-off bar
compare
```
slugs amie-so, cleanshot-com, todoist-com, moderntreasury-com
```
shared minimalism and light register; five-step type scales on three of four; radius scales topping out at 12 to 16px on the product-led sites, which set the 16px card radius

Palette, traced

Every token, and the reference it came from.

--paper#f6f5f1Page ground. Warm off-white rather than pure white, following moderntreasury-com and mailchimp-com, so the white product screen and cards lift off the page without shadows doing all the work
--ink#16201bAll headings and body text; a green-black rather than neutral black so it sits with the accent
--muted#5c6862Supporting copy, table headers, captions and footer links; one step lighter than ink so hierarchy comes from tone, not size
--rule#e2e0d9Every hairline: card borders, table rows, section seams, footer bar; warm gray so rules do not read as blue on the warm paper
--accent#1b6b52Deep green for primary buttons, eyebrows, the active sidebar item, check marks, the pricing tier rule and the CTA band; green because the category evidence leans green/teal and it reads as money and calm rather than alarm
--accent-soft#e3efe8Tinted surfaces: the hero screen field, the total-to-fund card, active states and paid tags; lets the accent appear as a surface without adding a second hue
--tip#b8791fAmber reserved for tip amounts in the pay run and the bartender share of the tip pool; the one warm note, so tips are visually separable from wages everywhere they appear

Built with the Inspo MCP - try it on your own brief.← All examples