DESIGN

Token judgment (polarity, palette, contrast, type floors) lives in the @theme header in styles/global.css — you’ll meet it when you set the tokens. This file governs the surfaces:

• Full-bleed, not boxed. Don’t wrap pages in a narrow centered shell (max-w-4xl mx-auto around everything). Design for the viewport; use peripheral space intentionally.
• One primary CTA per page, worded to the page’s actual action — “Add to Cart”, “Book a Table”, “Reserve Your Spot” — never “Submit” / “Click here” / “Learn more” as the hero action.
• Icons render bare on the surface — no circle/square/pill shell behind nav or card glyphs.
• A card that shows a thing is a link to that thing. A featured product, dish, service, post or event on the home page leads to its own page, or to its place on the listing when the vertical has no item pages (/menu#item-<id> for a dish). A card with a title, image and price and nothing to click is a dead end, not a design choice.
• Corner shape is a token, never a class. Shipped buttons, chips, labels and steppers read --radius-control, which follows --radius-md until the brand says otherwise: 9999px is the pill, 0 is square. Cards and fields read --radius-lg/md/sm. Don’t patch rounded-* on shipped markup, and give your own controls rounded-control so they move with it. Only genuine circles (avatars, swatches, dots) stay rounded-full.
• Error text reads --color-destructive (text-destructive), never a Tailwind palette colour. Set it with the palette so it keeps 4.5:1 on --color-background.
• No emojis in UI copy, headings, or empty states (unless the brief itself asks for them).
• Vary the look across projects. Repeating the same palette/layout on unrelated brands is a failure mode, not a shortcut — two sites with the same vertical and different briefs should look nothing alike.

This constrains the how, not the what — the brief and the vertical decide what the pages are; INSTRUCTIONS decides which surfaces exist.