Lark Coffee. Free coffee shop and roastery HTML & Astro template

About Lark Coffee

Lark Coffee gives an independent café a familiar, welcoming structure: a centered masthead, navigation below the logo, a short typographic introduction and a broad café photograph. Espresso, warm white, ochre and dusty blue carry through original coffee-bag illustrations, menu rows and useful inner pages. Both editions use local Lora and DM Sans derivatives and plain CSS.

Best suited to: Independent cafés, coffee shops and small roasteries presenting a verified menu, coffee information and general enquiries.

Desktop and mobile screenshots

Captured from version 1.0.0 on 30 October 2026. Open a screenshot to inspect the full page.

Choose your download

Both ZIPs contain the same 9-page design. Confirm your email to download. Newsletter emails are optional; no account or license key is needed.

What’s in the design

• Nine complete pages include Our Roastery, Café Menu, Our Coffees, House Blend, Brew Guide, Wholesale and Visit & Contact, plus Home and 404.
• The café menu has category filtering, a live result count, reset and printable view. Six sample items use clearly labelled GBP prices.
• Four illustrative coffee concepts combine roast and brewing-method filters, with result counts and an empty state. House Blend has a full profile; the other concepts lead to subject-aware enquiries.
• The House Blend page includes sample weight and price, roast, proposed uses and starting filter and espresso recipes. Origin and processing are explicitly left for verification by the actual roastery.
• The brew calculator multiplies a coffee dose in grams by water millilitres per gram. Inputs have explicit bounds; a static 20g/320ml recipe remains available without JavaScript.
• Wholesale explains the information needed for an initial supply conversation. Visit & Contact offers native FAQs, sample hours and a reviewable email draft.

Verified page layouts

These 9 pages are included in both archives. Each link opens the live preview.

• Home ↗index.html
• Roastery ↗roastery.html
• Menu ↗menu.html
• Coffees ↗coffees.html
• House Blend ↗house-blend.html
• Brew Guide ↗brew-guide.html
• Wholesale ↗wholesale.html
• Visit ↗visit.html
• 404 ↗404.html

How coffee enquiries work

The contact form validates a name, email and general question, then presents an encoded mailto link for the visitor to open and review. No email is sent, saved, ordered or booked through the site. The [email protected] address is deliberately non-operational.

Coffee, wholesale and visit query values are allowed only if they match the subject options. Editing a field hides the previous draft. Submit is hidden and disabled until the handler is attached; a direct email fallback remains available.

Confirm actual product, price, stock, ingredients, allergens, supply arrangements and opening information with the real business. An enquiry does not place an order, reserve stock or start a subscription.

Set up the Astro edition

Extract the source ZIP and run these commands from its folder:

npm ci
npm run dev
npm run check
npm run build

The build produces a dist/ folder for static hosting. The source includes its shared template kit under vendor/template-kit, so it builds independently of our development workspace. Astro 7.4.4 and the Astro checker 0.9.12 are pinned; TypeScript 6.0.3 is the latest supported by that checker’s declared peer range.

Before you launch

• Choose HTML for direct file editing, or Astro for shared layouts and source-driven content.
• Replace sample business details, menu recipes, prices, coffee profiles and brewing guidance with verified information. Confirm actual origin, processing, decaffeination and ingredient information. Keep prices tied to explicit currency and pack weight.
• Edit menu and coffee data in src/site.ts. Keep roast, brewing-method and subject IDs aligned with filters and enquiries. Check combined filters, reset and empty state, calculator bounds, allowed/unknown subject values, validation and stale-draft clearing.
• Replace imagery with licensed content. Keep responsive variants, intrinsic dimensions, alt text and ASSETS.md credits aligned.
• Set PUBLIC_SITE_URL to the real domain/folder URL with a trailing slash for canonical/social metadata, robots.txt and a 8-page sitemap. Leave PUBLIC_PREVIEW unset for production.
• Upload the entire HTML folder or Astro dist/. Configure unknown paths to return 404.html with HTTP 404. Test enquiries or configure a separately tested delivery route if direct sending is required.

No checkout, coffee ordering, recurring subscription, reservation, stock system, payment handling or message-delivery backend. The calculator is a starting brew ratio, not a guaranteed result.

License and assets

The original template code is released under the included MIT license. It permits personal and commercial use; retain the license notice when redistributing the code. Visible footer attribution is optional.

Café and brewing photography by Pavel Danilyuk, Betül Üstün, Ketut Subiyanto and Jeffry Surianto retains the Pexels License. Lark Serif and Lark Sans are renamed Lora and DM Sans WOFF2 subset derivatives, with complete OFL notices. Original logo, coffee-bag illustration, code and writing are MIT. Pexels License. Full asset credits.

Release verification

The page inventory, screenshots and download manifests document the included layouts and assets. The HTML and independent Astro editions contain the same design and license notices. Customization requires its own accessibility, content and performance checks.

Version 1.0.0, reviewed 30 October 2026. Live preview. Plain HTML checksum. Standalone Astro source checksum. Lark Coffee is fictional. Coffee profiles, tasting notes, prices, menu, location and hours are illustrative. Photos depict separate settings; no verified premises, staff or sourcing is claimed. Tasting notes are flavour descriptions, not ingredient or allergen declarations.