Brand + e-commerce design · Freelance Tawisa

A jewellery shop,
taking its first
step online.

Tawisa is a family jewellery shop. In seven days I gave it a name in type, a colour of its own, a design system and every screen of its online store.

The Tawisa homepage hero: a frosted header with the S logo and navigation, the headline Jewellery for the Modern Soul in a serif face on soft lavender, with Explore Collections and View Lookbook buttons and stats for designs, metals, rating and customers, beside a photo of a woman wearing a diamond pendant and earrings
The brief

A store like the big ones.
Designed in a week.

Tawisa sells silver, gold and diamond jewellery from its own shop. The owners wanted to sell online too, and they pointed at the big Indian jewellery stores as the model: browse by who it’s for, filter by metal, pick a stone, pay online.

There was no brand to build on yet, only the shop’s name. So the job started with a logo and ended with a store a developer could build from.

My role
Brand, logo, design system and UI
Client
Tawisa
Freelance
Design time
7 days
Build in progress with a developer friend
Platform
Web
Desktop and phone
The scope

Everything a first
store needs.

The brief was a starter store, kept small on purpose so it could launch. Small still meant a full shopping journey:

The brand

Gold came first.
Then I looked around.

The logo is a flowing S mark above a widely spaced serif wordmark. It works on light and dark grounds and on its own as a symbol.

The first colour system was the obvious one: gold on warm cream, in light and dark modes. It looked right for jewellery, and that was the problem. Almost every jewellery store in India already looks like that.

The Tawisa logo, a flowing S mark above the wordmark TAWISA, shown in lilac on white, lilac on a pale tint, white on lilac, lilac on black and white on deep plum
The mark and wordmark, in four colourways.
The first Tawisa style guide: a gold gradient wordmark, light and dark palettes of cream and near-black with gold gradient bars, and the type pairing of Cormorant Garamond and Manrope
Version one: gold on cream. Correct, and like everyone else.
Finding the colour

Three directions.
One that stood out.

I kept the type pairing and tried three colour worlds on the same layout: champagne and rose-gold, blush pink, and amethyst.

Amethyst won. Nothing else in the market looked like it, it suited a shop whose buyers are mostly women without tipping into pink, and the client liked it.

Three theme cards side by side, each with the TAWISA wordmark, a serif headline and buttons: Soft Editorial Luxury in champagne and rose-gold, Rose Blush Luxury in pink, and Amethyst Silk Luxury in lavender and plum
Soft Editorial, Rose Blush and Amethyst Silk. The third one became Tawisa.

The direction, in one lineSoft lavender surfaces, plum accents and silk-like gradients: premium, fashion-forward, and not like any other jewellery store.

Design system

Built once,
used on every screen.

With a friend coding it, the Figma file had to answer questions before they were asked. So the system came before the screens: an eight-step amethyst scale, neutrals and status colours, Cormorant Garamond for headings and prices, and Manrope for everything you read or tap.

The colour palette: eight amethyst shades from 50 to 700 with 400 starred as the brand colour, eight neutrals from white to dark grey, and green, red, orange and blue for success, error, warning and info
Amethyst 400 is the brand colour. Everything else steps out from it.
The type scale: Cormorant Garamond SemiBold from Display XL at 64 to Heading H3 at 28, then Manrope for Body Large 18, Body 16, Label 14 and Caption 12, each with a jewellery example line
A serif for the story, a sans for the shopping.
Buttons in four styles, primary gradient, secondary outline, ghost and dark, each at large 48, medium 40 and small 32 pixel heights
Four button styles, three sizes.
The product card in three states, default, hover with a raised shadow and a filled Add to Cart button, and wishlisted with a red heart
The product card: default, hover and wishlisted.

Tokens

A 4px spacing grid, seven corner radii from 2px to a full pill, and five shadows plus an amethyst glow.

22 text styles

Display to caption, with separate price styles so ₹ figures line up on cards, product pages and the cart.

Components

Buttons, inputs in five states, product cards, badges and the category pill row that scrolls on phones.

The store

Browse by who
it’s for.

Most people shop for jewellery with a person in mind, so the homepage leads with For Her, For Him and For Kids, then a row of metal filters and the bestsellers.

The Shop by Audience section: three cards with close-up photos of a woman wearing a pendant and earrings, a man in a green shirt wearing a chain, and a boy wearing a chain, labelled For Her with 124 styles, For Him with 68 styles and For Kids with 42 styles
Three ways in, each with a face and a count of styles.
The For Her page: a photo banner of a woman wearing a pendant and earrings beside lavender silk, titled Made for Her with 124 styles, above a filter panel with category counts, metal swatches and a price range, a grid of pendant and ring cards with New and Hot badges, ratings and discounts, and a Load More button
Each audience page gets its own photo banner, with filters on the left, a grid on the right and progress before Load More.
The product page

Choose it.
Trust it.

Jewellery is bought on detail. The product page lets you pick the metal, stone and colour, then answers the worries that stop people paying online: hallmarking, delivery and returns.

The product page for Sweep Contour Studs: a large product visual on the left, and on the right the price of ₹10,120 with 17% off, swatches for metal, stone and colour, Add to Cart and Buy Now buttons, Save to Wishlist, and three trust badges
The choices, the price and the reassurance, all above the fold.
On the phone

Designed at 360px,
not squeezed into it.

Every screen was drawn twice, at 1440px and at 360px. On a phone, filters become a scrolling pill row and the product page keeps Add to Cart and Buy Now pinned to the bottom of the screen.

Three phone screens: the homepage hero, the For Her page with filter pills under the photo banner, and the product page with Add to Cart and Buy Now buttons pinned at the bottom
Home, For Her and a product page on a phone.
Sign-in and account

No passwords.
Just a code.

You sign in with a one-time code sent to your phone or email, or with Google. The code screen counts down before you can resend, and lets you fix a wrong number without starting over.

The account keeps three things in one place: your details, your orders filtered by status with Track and Buy Again, and your saved addresses.

The Tawisa sign-in card: the wordmark, Welcome Back, an email address field and a Send OTP button, with a link to create an account
One field and one button.
The journey

Five steps,
shop to doorstep.

  1. DiscoverStart from who it’s for, or a metal.
  2. NarrowFilter by category, metal and price.
  3. ChoosePick the metal, stone and colour.
  4. SaveWishlist it, or add it to the bag.
  5. BuySign in with a code and pay online.
7

days of design, from the logo to every screen on desktop and phone. The build is still in progress.