NIGHT OWL.

“Serious coffee for people who are not morning people.”

A fictional Zagreb roastery with a complete sales system: whole bean and ground coffee, a subscription customers manage themselves, a birthday gift and merch built around a sleepy owl.

Sector
Specialty coffee
Scope
Webshop, subscription, gifts and brand
Pages
44
Languages
Croatian, English
Built with
Astro, TypeScript, hand-written CSS

Concept project. NIGHT OWL is a brand we invented to show what we build: the site is real, live and fully clickable, the business is not. Demo sites stay out of Google on purpose.

The live site

Click the screen to open the demo in a new tab.

What research found

Specialty coffee in Zagreb costs 13 to 18 € per 250 g. Only three Croatian roasters sell a subscription, none lets customers skip, pause or cancel it themselves, and nobody sells a birthday box. This site fills exactly that gap.

What we built

  1. Subscription builder

    Four steps with a live price. As you pick a coffee, the real bags drop into an open box, and the label on the box shows the rhythm and grind.

  2. A self-service account

    Skip, pause, send now or cancel, each in one tap, plus the EU withdrawal button.

  3. Gifts

    A birthday box with a delivery date and a card that previews as you type, plus a 3, 6 or 12 month gift subscription.

  4. Quiz, brew guides and loyalty card

    A five-question quiz recommends a coffee and grind, five brew guides have a ratio calculator and timer, and a digital card collects stamps from receipt codes.

  5. An owl that wakes up

    The mascot opens its eyes as you scroll, and the latest roast date updates live on the bags and in the header.

On the phone

Designed for the phone first, where most visitors arrive.

NIGHT OWL, mobile screen 1
NIGHT OWL, mobile screen 2
NIGHT OWL, mobile screen 3

Brand system

Click a colour to copy it

TypeAntonInstrument Sans

Results

Fast, accessible, built to rank.

100Performance
100Accessibility
100Best practices
1.6 sLargest paint (LCP)
0.000Layout shift (CLS)

Live site, mobile, Google Lighthouse, measured 27 October 2026.

Want a site like this?

Let's talk