Four directions
for Annie's
Singapore.

Each concept explores a different positioning for the brand — from artisan heritage to clinical precision. All share the same six-page scope and content strategy.

How to review: Click any direction below to view the full Home page design. Use the colour switcher in the top-right corner of each design to explore 3 colour variations.

All designs are fully responsive. Resize your browser or open on mobile to preview the layout.

6-page scope Mobile responsive 3 colour variants each Real brand assets CMS-ready structure

01 Design Directions

Direction A

Artisan Heritage

Celebrates the brand's handcrafted origin. Playfair Display serif headings, stamp-badge decorative elements, gold accents, and a split navy-and-cream layout that feels like a premium specialty food label.

Serif typography Badge / stamp motifs Split hero layout Heritage warmth

View Design A

Direction B

Modern Minimal

Luxury through restraint. Full-bleed dark photography, ultra-light DM Sans headings (weight 200), generous whitespace, and a numbered principle layout. Feels like a premium lifestyle brand on a Singapore grocery shelf.

Featherweight sans-serif Full-bleed hero Stat bar Maximum whitespace

View Design B

Direction C

Warm Organic

Sensory and inviting. Cormorant Garamond italic headings, terracotta and olive accents, wave SVG section dividers, and alternating product layout. Evokes Mediterranean dairy tradition — you can almost taste it.

Italic serif headings Wave dividers Rounded pill buttons Warm sensory feel

View Design C

0

Preserv.

12–24h

Fermented

≤3

Ingredts.

Direction D

Clinical Prestige

Trust through expertise. Inter sans-serif with IBM Plex Mono for data points, a 60/40 split hero with inline stats, grid overlay backgrounds, and monochrome labelling. Speaks directly to chefs and F&B buyers.

Monospace data labels Split hero + stats Grid geometry B2B-forward tone

View Design D

Direction A — Extended Demo

2 additional pages · Our Products + Our Story

See how the design system extends across the full site

Direction A includes two additional page examples — Our Products and Our Story — to demonstrate how the visual system adapts to different content types while remaining coherent. The remaining designs would follow the same structural approach.

🛍

Our Products Filter + detail view

📖

Our Story Brand narrative + timeline

🎨

How to explore each design

Each design page has a colour switcher in the top-right corner — three circular buttons showing the available palettes. Click to switch instantly. The entire design recolours using CSS variables.

All pages are fully responsive. Resize your browser window or open the links on a phone to preview the mobile layout. Navigation collapses to a hamburger menu on small screens.