Skip to content
DesignMunkDesignMunk Submit a site

Swarang

swarang.in
Art you can carry: weaving Indian art into everyday luxury.
Ecommerce Shopify Tailwind Homepage Poppins
Share Visit site
swarang.in DESKTOP · 1440
Swarang

AI Breakdown

Design export

---
version: alpha
name: Swarang
description: "Art you can carry: weaving Indian art into everyday luxury."
colors:
  primary: "#424242"
  secondary: "#f9ba3b"
  tertiary: "#623c15"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-armor-wash: "#040404"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Poppins
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.19
  headline-md:
    fontFamily: Poppins
    fontSize: 27px
    fontWeight: 500
    lineHeight: 1.19
    letterSpacing: 0.045em
  headline-sm:
    fontFamily: Tenor Sans
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: 0.07em
  headline-xs:
    fontFamily: Poppins
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.21
  body-md:
    fontFamily: Poppins
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.07em
rounded:
  sm: 3px
  md: 8px
spacing:
  xs: 2px
  sm: 10px
  md: 18px
  lg: 40px
  xl: 120px
components:
  button-primary:
    backgroundColor: "{colors.neutral}"
    textColor: "#000000"
    rounded: "{rounded.sm}"
    padding: 19.68px 34.56px
    height: 52px
  button-secondary:
    textColor: "#dfdfdf"
    rounded: "{rounded.sm}"
    padding: 19.68px 34.56px
    height: 52px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Swarang: Museum-white canvas with 8px product cards

## Overview

Swarang's UI is product-first and editorial-light: a bright, gallery-style canvas that lets handcrafted textures and brass details read clearly. The voice is calm, premium, and craft-oriented; density is moderate with generous vertical rhythm. Audience: shoppers of artisanal accessories who value heritage and sustainable production. When tokens don't dictate, default to white surfaces, charcoal text, and restrained accent use.

## Colors

- **primary (#424242):** Charcoal ink for body copy, navigation, and standard icons.
- **secondary (#f9ba3b):** Marigold accent for promotional flags, highlights, and small UI flourishes. Use sparingly.
- **tertiary (#623c15):** Leather umber for warm emphasis on artisanal cues and occasional headings.
- **neutral (#ffffff):** Canvas white for page surfaces and cards.
- **border (#e5e7eb):** Mist-grey hairlines for card edges, inputs, and subtle dividers.
- **brand-armor-wash (#040404):** Near-black for overlays or icon strokes where maximum contrast is required.
- **surface (#ffffff):** Default surface color (alias of neutral) for backgrounds.
- **on-surface (#424242):** Standard text and UI color on white (alias of primary).

## Typography

- Poppins (Google, freely available): the primary UI workhorse. Headline-lg 32/1.19 at 700 for hero titles; Headline-md 27/1.19 at 500 (0.045em tracking) for section headers; Headline-xs 19/1.21 at 400 for card titles; Body-md 16/1.5 at 400 with 0.07em tracking for descriptions, menus, and legal. Substitutes: Inter, Nunito Sans, or Work Sans.
- Tenor Sans (Google, freely available): the editorial accent for small headlines and collection labels (Headline-sm 23/1.08 at 400 with 0.07em tracking). Its classical proportions add refinement without weight. Substitutes: Marcellus, Forum, or Cinzel.

## Layout

Spacing uses a simple, roomy scale: 2, 10, 18, 40, 120px. Build cards and controls with 18px inner padding, space blocks with 40px between sections, and reserve 120px for hero and major collection insets. Product areas favor 2–4 column grids: 1–2 columns on mobile, 3 on tablet, 4 on desktop. Max content widths stay open so imagery can breathe against the white surface.

## Elevation & Depth

Shadows are disabled. Hierarchy relies on: crisp borders (#e5e7eb), tonal contrast (charcoal on white), and generous whitespace. Use image scale, typographic weight, and spacing to signal importance; keep hover states to borders, underlines, and subtle image shifts rather than drop shadows.

## Shapes

Corners are minimal. Use 3px radius for buttons and small chips; 8px for cards and larger panels. The tighter 3px reads tailored and precise; the 8px softens photo tiles without feeling playful.

## Components

### Button — Primary
- Background #ffffff, text #000000, height 52px, radius 3px, padding 19.68px 34.56px. Default CTA in hero and forms.

### Button — Secondary
- Text #dfdfdf, height 52px, radius 3px, same padding as primary. Use over dark imagery or colored blocks where contrast is sufficient.

### Button — Link
- Text #424242, radius 0. Inline action with no fill; pair with underline on hover.

### Card
- Background #ffffff, text #424242, radius 8px, padding 16px, hairline border #e5e7eb when needed. Base for product tiles and story previews.

### Announcement Bar
- Single-line message above the header. Body-md Poppins 16px with 0.07em tracking, text #424242 on #ffffff; compact spacing (xs–sm) to avoid pushing content.

### Hero With Dual CTAs
- Full-bleed image with overline, H1, and two actions. H1 uses Poppins 32px/700; subcopy uses Body-md 16px. Primary button (white) and link-style secondary, both 3px radius.

### Category Filter Pills
- Row of chips for SLING BAGS / TOTE BAGS / etc. Poppins 16px, 3px radius; inactive uses border #e5e7eb on #ffffff; active text #424242 with a subtle bottom rule.

### Product Tile
- Image, savings flag, name, price, and Add-to-cart. Name: Poppins 19px; price: Body-md 16px; discount flag can use secondary #f9ba3b. Card radius 8px; Add-to-cart reveals on hover desktop, always visible on mobile.

### Collection Carousel
- Section header (Poppins 27px/500), short copy, and horizontally scrollable cards. Arrows or pagination dots sit outside the 8px-radius tiles.

### Value Pillars (3-up)
- "HANDCRAFTED / ROOTED IN INDIA / ETHICALLY SOURCED." Each block uses Headline-xs 19px title with Body-md copy, equal 40px gutters, thin dividers #e5e7eb.

### Newsletter Block
- Two-line heading, email input with border #e5e7eb, and Primary button. Inputs use 3px radius; center-aligned on mobile, left-aligned on desktop.

## Do's and Don'ts

- Do keep text #424242 on #ffffff for all standard copy; avoid mid-grey text.
- Do reserve #f9ba3b for accents like discounts or small highlights; overuse cheapens the premium tone.
- Do space sections by 40px and keep card padding near 16–18px for consistency.
- Don't add drop shadows; use borders (#e5e7eb) and whitespace for separation.
- Don't exceed 8px corner radius on tiles or 3px on small controls.
- Don't hide critical CTAs on mobile; keep Add-to-cart visible below product images.

## Agent Prompt Guide

Quick color reference — Text: #424242, Background: #ffffff, Border: #e5e7eb, Accent: #f9ba3b.

1) Build a hero section on #ffffff with an image backdrop. H1: Poppins 700 at 32px, line-height 1.19, color #424242. Subcopy: Poppins 400 at 16px, line-height 1.5, letter-spacing 0.07em. Primary button: 52px height, 19.68px/34.56px padding, 3px radius, background #ffffff, text #000000. Add a link-style secondary (text #424242).

2) Create a Featured Categories bar: horizontal chips using Poppins 16px. Each chip has 3px radius, 10px vertical and 18px horizontal padding, border 1px #e5e7eb on #ffffff. Active chip text #424242 with a 2px bottom rule in #424242.

3) Product grid, 4 columns desktop / 2 mobile. Card background #ffffff, 8px radius, 1px border #e5e7eb, 16–18px inner padding. Product name: Poppins 19px; price: Poppins 16px. Place a savings badge using #f9ba3b. Add-to-cart uses the Primary button spec (52px height, 3px radius).

4) Newsletter block on #ffffff: heading Poppins 27px/500; subcopy Poppins 16px. Email input 44px height, 3px radius, 1px border #e5e7eb; submit button follows Primary button spec. Keep 40px vertical spacing around the section.

## Similar Brands

- Bellroy — similarly quiet neutrals and product-led grids; Bellroy leans heavier on earthy backgrounds and stronger iconography.
- Cuyana — white canvas and refined typography; Cuyana uses more beige warmth and larger editorial photography.
- Everlane — minimal ecommerce with charcoal text and neat cards; Everlane feels more utilitarian and type-driven.
- Ritu Kumar — Indian craft heritage with modern retail UI; more color and ornate motifs compared to Swarang's restraint.

More like this

Browse Ecommerce →
wizcommerce.com
WizCommerce AI
WizCommerce
Built for Wholesale. Powered by AI.
Homepage · 3 days ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 4 days ago
rodeo-labs.com
Rodeo Adventure Labs Ecommerce
Rodeo Adventure Labs
Ride. Explore. Create.
Homepage · 5 days ago
auntfannies.com
Aunt Fannie’s Ecommerce
Aunt Fannie’s
Cleaning differently: no harsh chemicals, plant-based, pet-friendly goodness
Homepage · 5 days ago