Wrack Line · Toast build sheet

Concept: a dinner-only oyster bar and seafood restaurant in Portland, Maine, built around a nautical chart. View the site mock. Assets are in img/ next to this page and are regenerated by bake.py. Concept design by Coursed. No Code Block on this site.

Layout: editorial, photo-first, dark. The whole page sits on sea-ink except one bone section (the raw bar prices). The rhythm is a full-width photo band (Media module, edge to edge) followed by a centered Text module with a very large Caslon heading and one or two lines of copy. There are no image-beside-text rows.

Signature idea: depth contours, soundings (the small italic depth numbers on a chart) and graduated chart bars along the top and bottom edges, all baked over every photo band and the hero. The oyster list is a full-width tide-table image with a tide curve and a salinity scale for each farm. None of it is CSS.

Fonts

Headings in sentence case. No all-caps, no letter-spacing. The italic Caslon used for soundings only appears inside images.

Colors

Corner radius 0 everywhere. Primary button = solid brand. Secondary = outline in the text color. Headings: Caslon, 140px desktop / 56px phone for H2, the hero H1 as large as the editor allows (240px in the mock), all centered.

Nav, banner, footer

Homepage modules, top to bottom

Code Block

None. Everything chart-like is baked into images, so it also works in CA/UK/IE/AU where Code Block is not available.

Unverified in editor

• Whether the Media module can run truly edge to edge with zero spacing. The whole layout rhythm depends on it. If Media is always contained, try a Welcome-style full-bleed option or an Image Carousel with one slide, and test both.
• The largest heading size the editor allows. The mock uses 140px H2s and a 240px hero H1. If type size is capped, bake the hero wordmark into hero.jpg instead.
• Whether the Welcome module allows a heading with no body text, centered, and how it crops hero.jpg on phones.
• Whether Testimonials cards pick up the Surface token on a dark site. If they render white, give the module a lighter dark background and accept it, or drop the module.
• Whether Toast Tables picks up dark tokens (Surface/Text) cleanly. The widget in the mock is a placeholder.
• Events layout (cards vs list) and whether the description centers.
• Whether the Menu Group can take a per-module light background while the site Background is dark, and whether its title centers.
• How the transparent overlaid nav behaves on scroll.
• Variable font upload for Libre Caslon Text. Use the static Regular if needed.
• The tide-table image is legible on phones but small (water names are about 12px at 390 wide). The alt text carries the list, and the Menu Group below it gives the prices as live text.

Upkeep

• The tide-table image shows the six regular farms. If they change, edit rows in tide_table() in bake.py and rerun.
• Event images carry the date. Add a line to bake.py for each new month.
• Farm names are invented for this concept; the bays and rivers are real Maine waters.

Photo credits

All from Wikimedia Commons. Cropped, color-graded and overlaid with the chart in bake.py.

For a real client, swap in the restaurant's own photography. The grade and chart overlay in bake.py apply to any photo.