Ramon BugariuROGet in touch
All work

Online store · Brand identity · Packaging

David Craft Ale

The new age of beer

Small batch, big personality: a complete identity and an animated online shop for a craft beer brand with four beers and a mascot of its own.

The identity was rebuilt as Edition 02 straight from the live site, so the brand board, the labels and the website share one set of colours, typefaces and graphic elements — and the website does the storytelling in motion.

Year
2026
Scope
Identity, mascot, labels & packaging, website, e-commerce
Identity
Edition 02 · October 2026
Platforms
Desktop, tablet & mobile
Type
Portfolio concept
Live demo
dca-murex.vercel.app

Built with

  • HTML
  • CSS
  • JavaScript
  • GSAP
  • Lenis
  • Remotion
  • Vercel

Made with

  • Blender
  • Python
  • ChatGPT
  • Claude

Identity

An 8-point star as the logomark, a slab-serif wordmark — DAVID in cocoa over CRAFT ALE in brick red — and Hopper, the winged hop, as the mascot. A rotating seal, a splash mark set in Archivo and a marquee of the brand's own lines complete the kit.

Alfa Slab One for display, Hanken Grotesk for text and interface. Cream, paper, honey, cocoa and ink carry the brand; each beer adds one colour of its own — Blonde, Amber, IPA and Dark.

Labels & packaging

Each beer has its own label set — neck, front, side and back, the back with tasting notes and ingredients — built on the same frame: the arched David Craft Ale name, Hopper and the beer's own colour.

The cans and the six-pack carriers carry the same system, so the four beers read as one family on the shelf.

Homepage & story

The homepage opens with a splash, then lets Hopper chase the cursor around the hero. Picking a beer recolours the shelf and the “Now pouring” panel; pages hand over through “the pour” — four bands in the beer colours rising and unwinding like a glass being filled.

The story page reveals its illustrations through irises and curtains, then walks through the brewery journey in seven steps — milling, mashing, boiling, fermentation, conditioning, bottling and good company — each illustration linked to the next by a line that draws itself as you scroll.

Product pages

Every beer has its own page: a photo gallery, the essentials (volume, ABV, IBU) and a switch between bottle and can, single and six-pack, with photo and price following the choice.

Hopper gets a page of his own as a limited plush drop, with a gallery and the rest of the merch — beer mats, a bottle opener and a pint glass.

Shop

“Pick your pour” lays out the whole lineup — bottles, cans, six-packs and accessories. Hovering a product swaps in a close-up photo, and a quick view opens any product without leaving the page.

Mobile

On mobile the beer shelf becomes a carousel you tap or swipe, the brewery journey turns into a vertical trail, and the quick view and distributor map stay one thumb away.

Next projectPure FlameThe art of gatheringView case study