Skip to content
Start Building

Ostra Coffee House

Concept

A dark, poster-style website for a neighbourhood coffee house that roasts its own beans and bakes every morning. Designed and built by Modulr.

Business
Coffee house & roastery
Type
Website
Typefaces
Big Shoulders, IBM Plex Mono
Ostra Coffee House homepage on desktop, a Modulr concept
See the full page (opens in a new tab)

The brief

Most visitors are locals on their phones who want three things fast: is it open, where is it, and what's on the counter. The site also has to sell bags of beans and office catering without crowding the menu. And it should feel like the shop: loud about its coffee, roasted on site, with no fuss.

Design decisions

  • The name is the hero. OSTRA is set huge in Big Shoulders, a tall condensed poster face, and the O is an oval photo of a cup, with a spinning orange roast stamp on its rim.
  • A near-black espresso background with crema-coloured type and one burnt-orange accent, used for prices, the ticker and the visit block, so the eye always lands on what matters.
  • The menu is the centrepiece: a full-width board where every drink name is set large in condensed capitals and every price in orange, read like the board above the counter.
  • IBM Plex Mono for body text, labels and hours, like a till receipt or a roast log, so the small print feels as deliberate as the big type.
  • On phones, the wordmark still fills the screen, with today's hours in the top bar and the menu board in one thumb-friendly column.

What we built

  • Hero: the OSTRA wordmark with the cup photo in its O, a two-line headline, a short intro and two buttons, with today's hours in the top bar.
  • Ticker: an orange band that runs the day's highlights.
  • The board: coffee and bakery menus set as large type with prices, a croissant photo and dietary tags.
  • Roastery: a full-height roaster photo beside the roast-day story and three key days of the week.
  • On the shelf: this week's three coffees with origin, tasting notes, bag size and price.
  • Catering: three priced office boxes and a button to plan an order, beside a café photo.
  • Visit: a full-width orange block with the opening hours, address, directions and email.
  • Footer: newsletter sign-up, links, hours and contact.
Ostra Coffee House homepage on a phone, a Modulr concept

Want one like this?

We'll build your website in 24H. Shops and custom booking systems are quoted.

Start Building