Skip to content
All work

ConceptCoffee barMalé, Maldives2026

Nocturne

A coffee bar site built around low light and late evenings.

Visit live site (opens in a new tab)

A concept site, live and working.

The problem

A late-opening coffee bar sells an evening atmosphere, but a social feed rarely tells people when it's open, how to find it or whether they can book a space.

What we added

A visit page with the hours, step-by-step directions to the door and an enquiry form for booking the back room for tastings and private evenings.

01Brief

A coffee bar that stays open late sells a feeling as much as a drink. The site needs to show the room, the menu and the hours, and make it easy to ask about private events.

02Approach

  • Layout

    Cinematic full-bleed sections with looping video, alternating with quiet text, so the page has a slow rhythm.

  • Typography

    Instrument Serif, with its italics, for headlines, and Karla for body text. Elegant without feeling formal.

  • Colour

    Warm near-black with cream text and a single amber accent, like a room lit by lamps after dark.

  • Interaction

    Videos load only as you approach them and play only while on screen. The nav turns solid after the hero, and sections fade in softly.

03Result

Four pages that set the mood and answer the practical questions: what's on the menu, when it's open, where it is, and how to book the back room.

  • 01Home, Menu, About and Visit pages
  • 02Menu with tasting notes and a detailed single-origin card
  • 03Events and private booking enquiry form with friendly validation
  • 04Background video that loads only when needed
  • 05Slide-in mobile menu

(04)Design system

The pieces it’s made from.

Type

Instrument Serif Regular 400: the letters A to Z, a to z and 0 to 9
Instrument SerifDisplay, Regular 400. Headlines.
Karla Regular 400: the letters A to Z, a to z and 0 to 9
KarlaBody, Regular 400. Body and interface.

Colour

  • #1A1512

    Ink

    Background

  • #EDE3D3

    Cream

    Text

  • #C98A3E

    Amber

    Accent and links

  • #8B4A3A

    Brick

    Details

  • #B7A794

    Dim cream

    Secondary text

Components

The Nocturne navigation bar
Navigation
A menu card from the Nocturne site
Menu card

(05)Pages

Key pages

Drag

The Nocturne Home page
01Home
The Nocturne Menu page
02Menu
The Nocturne About page
03About
The Nocturne Visit page
04Visit

See Nocturne for yourself.

Visit live site (opens in a new tab)

Next project

Fuku Coffee

ConceptCaféView case study