A cafe, bar and art space on the Bandla tea estate above Palampur, in the shadow of the Dhauladhar.
Role
Web design & build
Engagement
Self-initiated concept
Scope
- Art direction
- Photography direction & crops
- Menu and events structure
- Reservation flow
- Responsive build
Tools
- Figma — UI design
- Framer
Disciplines
- Web design
- Art direction
Firewood is a room in the tea gardens with the Dhauladhar range in the window. The site has to sell the place — the light, the timber, the altitude — before it sells anything on the menu, because nobody drives to Palampur for a coffee they could have had at home.
A self-initiated concept. The business is real; the engagement is not — this was designed to explore the brief, not delivered to a client.
A destination is an emotional decision first.
Somebody choosing a cafe two hours up a mountain road is not comparing menus. They are deciding whether the place is worth the drive, and that decision is made almost entirely on atmosphere.
Photography therefore leads, with the menu, events and reservations kept one clear step behind it — present and easy to reach, but never competing with the room itself.
Warm, timbered, unhurried.
The palette is drawn directly from the space: wood, ember, and the particular grey-green of tea under cloud. Nothing in the interface introduces a colour the room does not already contain.
Type is set large and quiet, with long measures and generous leading — the pacing of somebody describing a place rather than advertising one. It also has to hold up on a phone with two bars of signal halfway up a hill, so the page is kept light and the imagery is aggressively sized.
- Photography-led hierarchy with a strict, repeatable crop
- Palette sampled from the room, not chosen independently
- Reservation always one action away, never interrupting
What the work clarified.
Restraint reads as confidence in hospitality. Every element removed from the opening screen made the place feel more established and less like it was trying to convince anybody.
The visual system.
Tokens named after the place itself — parchment, forest green, walnut and ember — with Fraunces for a timbered, unhurried display voice and square-cornered, tracked uppercase buttons.
Colour names and values are the design tokens declared in the live site's CSS; type sizes, weights and button styles were measured from the rendered page at desktop width.
01 — Foundations
Colour, type and shape — the decisions every component inherits.
Estate
green-deep
#072A15
Hero and dark bands
green
#0E4020
Sections
green-mid
#14522A
Hover and accents
walnut-deep
#3B2411
Timber tones
ember
#B9793A
Highlights
Paper & ink
paper
#F6F2E9
Page
cream
#EBE3D6
Text on green, primary buttons
parchment
#E2D9C8
Raised surfaces
ink
#1E1712
Headings
ink-soft
#4A4038
Body text
Status
success
#2F6B3F
Confirmations
warning
#A8701C
Notices
danger
#8F3524
Errors
Typography
Display
Fraunces
A timber room in the tea gardens
Text & labels
Archivo
Firewood is a cafe, bar and art space.
Type scale
Corner radius
- ButtonsSquare corners throughout0 px
- Pills999 px
02 — Components
Rebuilt from the Firewood screens and tokens — the parts every screen is assembled from.
Bandla tea estate · Palampur
A timber room in the tea gardens
Firewood is a cafe, bar and art space above Palampur.
Type in use
Display and text faces at their measured weights and tracking, on the site's own ground.
Buttons
Primary and secondary actions exactly as styled on the live site.
