Skip to content
ZANARIX
All work
  • Concept

Ruovanne.

A brand identity and online store concept for a fictional Nordic lifestyle brand: from the logo and palette to product pages and a calm, clear checkout.

Try the demo

A working demo shop with sample data. No order or payment is ever made.

Type
Nordic lifestyle store · E-commerce & brand identity
Scope
Brand identity · Store design · Checkout flow
Brand
Fictional, created by Zanarix
Working demo
Live · Sample data
Home · Concept screen · Sample data · Fictional brand

The problem

Beautiful products, sold through stores that all look the same.

We set ourselves a brief: a small Nordic lifestyle brand selling carefully made things for the home. Brands like this often sell through generic store templates that make them look like everyone else, and the story behind each product gets lost.

On top of that, checkout is where trust is won or lost. Clutter, surprises and unclear costs at the last step make people hesitate.

The idea and approach

Brand first, then the store.

Ruovanne is an invented name, inspired by the sound of Finnish words. We built the identity around the lakeside: a reed mark, a warm natural palette, a soft serif for headings and a calm, generous layout.

The store is designed around the identity rather than the other way round. Product pages tell the story of materials and care, filters stay simple, and checkout shows everything up front, right to the last step.

Key features

What the concept covers.

All of it works in the demo shop: browse, filter, choose a colour and size, fill a cart and go through checkout.

  • Brand identity

    Logo, colour palette, typography and short guidelines, so the brand looks the same everywhere.

  • Home and collections

    A calm storefront that leads with the brand's story and a few chosen collections.

  • Product listing with filters

    Filter by category and price and sort the results, with clear counts and no endless menus.

  • Product pages

    A picture gallery, colour and size choices, materials, care, and delivery and returns up front.

  • Slide-out cart

    Change quantities or remove items, and see how close you are to free delivery, without leaving the page.

  • Demo checkout

    Details, delivery and payment in three calm steps. It ends by saying clearly that no order or payment was made, and it never asks for payment details.

Identity

A brand that feels like a quiet shoreline.

Ruovanne's identity: a fictional brand, designed by Zanarix.

ruovanne

Primary logo

Mark on dark

Palette

  • Birch

    #EBE4D8

    Main surface

  • Linen

    #D9CFBF

    Cards, panels

  • Sand

    #CFC3B0

    Soft contrast

  • Moss

    #8A9A82

    Accent

  • Clay

    #B5654A

    Accent, sparingly

  • Bark

    #2D2A26

    Text, buttons

Typography

Aa

Fraunces

Headings and the wordmark. Soft, warm, a little italic.

Aa

Geist

Text, prices, filters and forms. Clear at every size.

Guidelines

Clear space around the mark at least the height of the reed head. Never smaller than 16px.

  • Bark on Birch for text; Moss and Clay only as accents.
  • Let the reed breathe: never crowd, stretch or outline it.
  • Photography warm and natural, never cold or glossy.
Product listing with filters · Concept screen · Sample data
Product page · Concept screen · Sample data
Demo checkout · Concept screen · Sample data
Try the demo

A working demo shop with sample data. No order or payment is ever made.

Design highlights

Warm, natural and unhurried.

  • A palette from the lakeside

    Birch, linen and sand for surfaces, moss and clay for accents, and bark for text: soft colours that let the products lead.

  • Serif with character

    A soft, slightly italic serif for headings gives warmth; a clean sans keeps prices, filters and forms easy to read.

  • Space as a feature

    Generous margins and few elements per screen, so every product gets room, like in a well-kept shop.

  • Trust at checkout

    Costs, delivery and returns shown before payment, clear steps, and nothing added at the last moment.

Technology

How the demo is built.

Next.js + TypeScript
Every shop page is prerendered, so it loads fast.
Tailwind CSS
Ruovanne's palette as design tokens, in light and dark mode.
Product images in code
Every product picture is drawn in SVG: no stock photos, and sharp at any size.
In-memory cart
The cart lives only in the open page: nothing is saved or sent, and there are no accounts.
No payment provider
The checkout has no payment form at all, and never collects payment details.

What it would do for a business

What this approach is designed to do.

Applied to a real brand, a store designed this way aims to:

  • Make the brand instantly recognisable, instead of looking like another template.
  • Help people choose with confidence, with the product's story and details up front.
  • Reduce hesitation at checkout by showing every cost before payment.
  • Give the brand a consistent identity across the store, packaging and social media.

Intended outcomes, not measured results.

Services involved

Each one links to more of our work in that service.

All concepts, designs and content © Zanarix. All rights reserved.

All brands, products, people and data in Zanarix concepts are fictional. Any resemblance to real companies is coincidental.

Next step

Building a brand or an online store?

Tell us about your products and your customers. We'll show you how we'd shape the brand and the store around them.

Start an e-commerce project