Restaurant
Coffee shop brand site
The prompt
Build a website for a single-location specialty coffee roaster called Meridian. Constraint: only three photographs exist. The design must not need more. Structure: a hero that is pure typography โ the roaster name set enormous at clamp(3.5rem, 12vw, 9rem) filling the width edge to edge, with a single line beneath stating the city and the year founded in monospace. No image at all in the hero. Then a horizontal band with the first photograph at 21:9 bleeding full width. Then 'What we roast': three coffee entries, each a row with an origin name, a monospace tasting-note list, an altitude and a price. Rows separated by hairlines, no images. Then the second photograph at 4:3 in a two-column layout with a 'Where we are' block containing the address, hours as a compact table, and transit directions. Then a short 'How we source' paragraph at 60 characters per line. Then the third photograph, full width. Then a footer with a wholesale enquiry email and opening hours. Design tokens: background #F2EFE9, text #171512, hairline #DCD7CD, muted #6E695F, accent #7F3E1B. Radius 0 โ this brand is square. One grotesque at three weights plus one monospace. No serif. Constraints: no stock photography, no coffee-bean icons, no parallax, no scroll animation, no cart. The page should be legible and complete with images disabled.
Paste the whole block into your builder. Replace the bracketed names with your own โ leave the constraints alone, they are what stops the generic output.
About this prompt
A small hospitality brand site where the type does the work and there are only three photographs.
Tags:#light-mode#minimal#brand#typography
Prompt Setup Guide
How to use this prompt & FAQs
Follow these simple steps to generate high-converting websites using Coffee shop brand site.
STEP 01
Copy System Prompt
Click the copy button above to grab the structured system prompt for "Coffee shop brand site".
STEP 02
Paste into AI Builder
Open Lovable, Codex, Cursor, Claude, Windsurf and paste the system prompt into the composer or initial prompt box.
STEP 03
Generate & Refine
Replace any bracketed text like [App Name] with your specific details, then click generate.
Frequently Asked Questions
More like this