Sumac Yard · Toast build sheet

View the site mock. Concept design by Coursed. Sumac Yard is a made-up fast-casual Levantine bowl shop with five Charlotte locations; nearly all of its sales come through online ordering, so every module points at the order flow. Assets are in img/ and are regenerated by bake.py from the photos in src/. No Code Block on this site.

Signature idea

Real overhead food photography on flat sumac red. The hero is a real falafel bowl shot from directly above, cut out of its table and set on the red with a soft shadow (both baked into the image, since Toast can't draw shadows). The three plated menu items get the same treatment, so the homepage repeats one look: a real dish, from above, on red. The build sequence is four real photos (rice, grilled chicken, chopped salad, tahini) cropped square under a red label band. Nothing is drawn on the food.

Layout: everything is centered. No promo bar; the phone gets the persistent mobile CTA instead. The first screen is one red field, a short headline, one big button and the finished bowl, so it reads at thumbnail size. There are no image-left/text-right rows; the page is centered Text, Multiple Images + Text, Menu Items and full-width Media.

Fonts

Colors and shape

Corner radius 0 on buttons and images. Primary button = solid brand, white text. On red modules (hero, locations) the button is white with brand text. One button per module.

Nav, banners, pop-up, footer

Homepage modules, top to bottom

Other pages

Code Block

None. The plate cut-outs and their soft shadows, the step label bands and the map are all baked images.

Unverified in editor

• Welcome text box set to center and top. If the editor only centers vertically, the headline will sit over the bowl; fallback is to bake the bowl lower in hero.webp (change the y offset in bake.py) or shorten the module.
• Whether the Welcome module accepts a separate phone background image. If not, check the phone crop of hero.webp; the bowl is centered so a center crop should keep it.
• Overlaid nav with white logo and links over the red hero, and a white CTA button. If the overlaid nav can't switch to light text, use a non-overlaid nav with brand background.
• Whether Multiple Images + Text lays out 4 images in one row on desktop and 2×2 on phones. If it stacks to one column on phones the steps still read in order but the section gets long; fallback is an Image Carousel with the same four images.
• How many items Menu Items shows per row, whether it shows descriptions, and whether it can be centered.
• Media module with zero spacing (catering photo edge to edge) and Media background color set to brand (map module).
• Whether Text modules allow bold inside a line (location names in module 5). If not, drop the bold.
• Pop-up trigger delay and frequency options (the mock waits 4 seconds and shows once per session).
• Uploading a static instance of a variable Google font (Bricolage Grotesque). The .ttf is a normal static font after instancing, but confirm the editor renders it at the right width.

Photo credits

All photos from Wikimedia Commons. Every food image is a real photograph: cropped, color-graded the same way, and for the round plates cut out of the table along the plate edge. No food is composited or drawn. For launch, swap in the client's own overhead shots of their bowls on the same red board.

Fonts: Bricolage Grotesque and Figtree, SIL Open Font License (fonts/OFL-*.txt).