Tostiva

Tostiva is a website template for coffee roasters and roastery cafés.

The home page is a roast log. As you scroll, a macro green bean heats through drying, yellowing, first crack, city and full city: it swells, splits along the centre cut and sheds chaff, while the bean-temperature curve draws on graph paper beside it. Live readouts show roast time, bean temperature, rate of rise and development time, with real specialty-roast numbers.

The rest of the site keeps the roast-log look: stencil type like a coffee sack, a mono data face, and green coffee, cinnamon and espresso brown on grey-green paper.

Pages

• Home: the roast hero, a live roast chart, this week's coffees and brew guides (CMS), and a cupping call to action

• Coffees, and a page per coffee whose roast chart is drawn from its own roast numbers

• Visit with an enquiry form, and a 404: "This batch never left the drum"

Included: Coffees (6 lots) and Brew guides (4) CMS collections, two code components (Roast Bean and Roast Curve), navigation with a phone drawer, buttons, form states, 10 colour and 10 text styles, and desktop, tablet and phone layouts.

Limitations: the hero needs WebGL; the bean and chart are edited through their property controls.

Buying: after checkout you get the remix link instantly, on screen and by email.