This is a real, complete output of the Starter Heist Prompt. The setup: a fictional builder is making "Shelfie, a reading tracker for people with too many unread books", wants it to feel "cozy, calm, bookish", and screenshotted the homepage of a (fictional) indie bookshop whose site they loved. Everything below the line is the design.md the prompt produced. --- # design.md ## The vibe in one paragraph This looks like the website of a small bookshop run by someone with excellent taste: warm, quiet, and a little old-fashioned in a good way. Nothing glows, nothing floats, nothing is trying to look like a tech startup. Two decisions do most of the work: almost every surface is warm cream instead of white, and there is exactly one strong color (a deep library green) which only appears when something is clickable. ## Colors (5 to 7, no more) - Cream (#FAF5EC): the background of almost every screen. Never pure white. - Espresso (#2B2119): all regular text. A very dark warm brown, not black. - Library Green (#2E5E4E): the one loud color. Buttons, links, and the active tab. Nothing else. - Soft Sand (#EFE6D4) (best guess): the background of cards and panels, one shade deeper than Cream so they stand out without shadows. - Faded Ink (#8A7B6B) (best guess): quiet secondary text, like dates and captions. - Terracotta (#C4552F): warnings and delete actions only. I chose this; the screenshot showed no errors, and a warm red-orange fits the palette. Accent rule: Library Green may appear at most two or three times per screen. If a screen is more than roughly one-tenth green, something is wrong. ## Fonts Headlines are a warm serif with real character, like a hardcover title page: confident but never shouty. Body text is a plain, quietly friendly sans-serif that disappears while you read. Free Google Fonts that match: headlines in Fraunces or Lora; body text in Karla or Source Sans 3. Never use the same font for both jobs. ## Shapes Buttons are solid Library Green rectangles with slightly softened corners, about as rounded as a credit card, with white text and no shadow at all. Cards and panels have gently rounded corners and a very thin Espresso-tinted outline instead of a shadow; the whole design has basically no shadows anywhere. Input boxes are Cream with the same thin outline, and they turn Library Green on the edge when you click into them. Signature move: section dividers are thin single lines, like the rule on a library index card. ## Spacing and layout feel Airy, in a calm way rather than a dramatic one. Text columns are narrow enough to read comfortably, sections get generous gaps, and cards never touch each other. Content sits in one relaxed column rather than a busy grid. The rule: when unsure, add more space; this design would rather scroll longer than feel crowded. ## 5 DO rules 1. DO use Cream (#FAF5EC) as the background of every screen, including popups and settings. 2. DO make every clickable thing either Library Green or clearly underlined; if it is not green or underlined, it should not be clickable. 3. DO separate cards with the thin outline and a background one shade deeper, never with shadows. 4. DO use the serif font for every headline and the sans-serif for everything else, on every screen. 5. DO keep one main action per screen as the only solid green button; secondary actions are outlined or plain text. ## 5 DON'T rules 1. DON'T use gradients anywhere, ever. Every surface is one flat color. 2. DON'T use pure white (#FFFFFF) or pure black (#000000); this palette is warm cream and espresso. 3. DON'T add drop shadows to cards, buttons, or menus; depth comes from the thin outlines. 4. DON'T introduce new grays or blues; if a color is not in the list above, it does not exist. 5. DON'T make corners fully round or pill-shaped; everything stays credit-card rounded. ## Never copy these The screenshot contained the shop's logo (a hand-drawn owl on a stack of books), the shop name in a custom hand-lettered style, their tagline, and photos of their actual storefront. None of these appear anywhere in this file. Safe swaps: use your own app name set in the headline font (Fraunces), skip mascots entirely for now, and use your own photos or none. The hand-lettered logo style is distinctive enough that imitating it would read as a copy; do not ask your builder to recreate it.