← Back to mockup (v2) · v1 (clean version)
Steam Boys: Toast Websites build spec
Every section of the mockup maps to one native Toast Websites module. No custom CSS and no Code Blocks are needed. The scrappy Polaroid look comes from the image files themselves, which already have the frames, tape and captions baked in. The hand-made feel comes from an uploaded custom font.
1. Site styles (set once)
| Setting | Value |
|---|---|
| Brand color | #D2232A. Override these tokens: Background #F1EDE2, Surface #FFFEFA, Text/Border #231F20 |
| Accent (section backgrounds + button fill only) | #FFD84D |
| Primary font | Upload ArchivoBlack-Regular.ttf (OFL). Set headings in ALL CAPS. |
| Secondary font | Inter from Toast's library, or upload Inter.ttf |
| Buttons | Pill shape, yellow fill, dark text in caps, dark outline. Verify the editor allows a border. If not, use a plain yellow pill. Toast buttons can't have the hard offset shadow, so all hard shadows on the page are baked into images. |
| Logo / favicon | img/logo.png (ask for their vector) / img/bao-face.png |
| Spotlight banner | Three messages that rotate every 4s, dark background: "Bao · Dumplings · Noodle soup · Boba" / "Order ahead for pickup" → Ordering / "Feeding a crowd?" → Catering |
| Menu page | Top Image layout, rounded corners. Background #F1EDE2, item box #FFFEFA, text #231F20. |
2. Homepage modules, top to bottom
Each section's look (texture, outlines, hard shadows, tape, stickers, handwritten notes, motion) is baked into the image file named. The zigzag dividers are thin full-width images in a Media block with spacing set to 0. Confirm that spacing can go to 0. If it can't, drop the zigzags; the colors still separate the sections.
| # | Toast module | Background | Content |
|---|---|---|---|
| 1 | Welcome | Background | Full-size image v2-hero.webp (dot texture, polaroids, badge and arrow are all in the image). Text box on the left, same color as the background. "BAO / DOWN." with DOWN in red, one paragraph, button "Order now". If phones crop it badly, use v2-hero-mobile.webp. |
| 2 | Multiple Images + Text | Background | "The steamer tray / Start with these." 4 images v2-card-0..3.webp, each linking to the Menu. Button "See the full menu". If the module won't do 4 across, use the Image Carousel. |
| — | Media (image) | — | zz-cream-red.webp |
| 3 | Testimonials | Brand red | "Don't take our word for it." Auto-pull Google reviews. Award line as a Text block. |
| — | Media (image) | — | zz-red-cream.webp |
| 4 | Single Image + Text | Background | Animated v2-mascot.gif on the right. "What's a steamboy?" copy and button. |
| — | Media (image) | — | zz-cream-yellow.webp |
| 5 | Media (image) | Yellow | v2-facts.webp: four real facts (2019 Germantown, 6 months in China, 2021 award, TN + AL). Put the full alt text in the image description. |
| — | Media (image) | — | zz-yellow-ink.webp |
| 6 | Single Image + Text | Text color (dark) | "Meet the boys." with BOYS in yellow. Image v2-story.webp. Swap in the crew photo by re-running bake2.py. |
| 7 | Media (video) | Text color (dark) | Client's video. Landscape, under 50 MB, SRT captions. |
| 8 | Image Carousel | Surface | v2-pol-0..5.webp |
| 9 | Single Image + Text | Background | Animated v2-sticker.gif. "Find us" plus the location list. Button → ordering location picker. |
| — | Media (image) | — | zz-cream-red.webp |
| 10 | Single Image + Text | Brand red | Catering. Image v2-catering.webp. Button → Catering or a Form page. |
| — | Footer + mobile CTA | Text color | Toast-generated. Locations and hours ON. Mobile CTA banner "Order now". |
3. Other pages
- Menu: Toast menu page, synced from POS. Nothing to design beyond section 1 settings.
- Online Ordering: set up to 3 featured items per location, Popular Items ON.
- Our Story: Content page. Multiple Images + Text with real team photos, then Text with the full story. Founders named in press: Brandon Lin and Andy Le. Confirm who else they want named.
- Locations: Content page. One Single Image + Text block per location, using a storefront photo per shop if they have them.
- Catering: Toast Catering page if subscribed. Otherwise use a Form page (name, email, phone, date, headcount, location, notes).
- Gift Cards: Toast Gift Cards page, if subscribed.
4. Facts to confirm with the client before publishing
- The 8th location. Public listings show 7: Germantown, Assembly Food Hall, Hermitage, Nolensville, Franklin, Cleveland TN and Madison AL. Josh's draft also listed Midtown, Hendersonville, Huntsville Bridge St and Toyota Field, none of which I could verify.
- Exact POS names for the 4 featured items.
- Photos: some of the current food photos may be stock. Swap in their own photos or the planned shoot. Re-run
bake2.pyto frame the new photos. - Their real hand-drawn asset catalog: the mascot and bao pile used here came from Josh's draft. Use their originals.
- Social URLs.
5. What not to build (Toast can't do it natively)
- Scrolling ticker, floating doodles or stickers between sections, hover effects, overlapping sections, or annotated diagrams. Any decoration has to live inside an image.
- A ZIP/postal-code lookup or custom location map. Use Toast's location picker instead.
- Typed review quotes, made-up stats, or press quotes the client can't source.