Brand guidelines · v1 · October 2026

Your Store. Your Brand.
Your Growth.

How ShopperzKey looks, sounds and shows up: logo, colour, type, voice, components and ready-to-post social templates.

Essentials

Who we are, in one table.

ShopperzKey is the commerce operating system for local shops, D2C brands and growing businesses: an independent online store with its own domain, customers and data, instead of a rented shelf on a marketplace. Made in India, for sellers everywhere.

Name ShopperzKey: capital S, lowercase z, capital K, one word. Never "Shopperzkey", "Shopperz Key" or "SK".
Category line The Commerce Operating System
Tagline Your Store. Your Brand. Your Growth.
Promise Stop renting your business. Start building one.
Proof lines Your URL. Your brand. Your data. · Sell locally, everywhere. · Stores that look like brands, not templates.
Sign-off Made in India, for sellers everywhere.
Primary CTA Start Your Store Free

Who we talk to: owners of local shops moving online, D2C founders leaving marketplaces, and growing brands that have outgrown a website builder. They are busy, practical and wary of lock-in. Lead with ownership, then speed, then growth.

The five pillars organise every feature story: Store (look and pages), Sell (catalogue, orders, payments), Grow (discounts, reviews, SEO), Extend (apps: Shiprocket, FedEx, Stripe, PayPal, PayU, PhonePe) and Intelligence (AI search).

Colour

Monochrome, with one crimson.

Click any swatch to copy its hex value.

Crimson scale

Neutrals and functional

Semantic tokens

TokenLightDarkUse
bg#F2F2F2#000000Page ground. Canvas Gray in light; Pure Black in dark sections (hero, CTA bands).
bg-raised#FFFFFF#141414Cards, sheets, the nav bar and form fields sitting on bg.
bg-soft#F7F7F7#222222Quiet inset panels and table stripes inside a bg-raised card.
line#E1E1E1#333333Hairlines, dividers and outline-button borders. Decorative only: never the only edge of a control.
fg#111111#F7F7F7Headlines and body copy on bg, bg-raised and bg-soft (16.9:1 light, 17.6:1 dark).
fg-muted#555555#A3A3A3Secondary copy, descriptions and metadata on bg and bg-raised (6.7:1 light, 7.5:1 dark).
accent#B6142C#F76D85Crimson used AS TEXT or an icon: highlighted words, active nav, prices on sale. On bg/bg-raised (6.0:1 light, 7.5:1 dark).
accent-fill#D01F3F#D01F3FCrimson used AS A FILL: the primary CTA, the live dot, a badge. Always carries on-accent text (5.3:1).
accent-fill-deep#B6142C#B6142CBottom stop of the CTA gradient and pressed state; the logo's own crimson.
on-accent#FFFFFF#FFFFFFText and icons on accent-fill and accent-fill-deep.
accent-soft#FFF1F3#460611Tinted ground behind crimson text: tags, toasts, the 'New' chip. Pair with accent.
focus#B6142C#F76D852px focus outline with 2px offset on every interactive element (≥6:1 on both grounds).

ShopperzKey is a high-contrast monochrome brand with one hue: logo crimson. Neutrals carry the page; crimson marks the one thing to look at.

  • Pages sit on bg (canvas #f2f2f2 light, pure-black in dark sections). Cards use bg-raised.
  • Text is fg; secondary text fg-muted. Use subtle (#888) only for 24px+ text or decoration: it is 3.2:1 on canvas.
  • Crimson as text uses accent (crimson-700 on light, crimson-400 on dark). Crimson as a fill uses accent-fill (crimson-600) with on-accent white text.
  • The accent CTA is the gradient crimson-600 → crimson-700 with shadow-accent. One per screen.
  • The highlight word (the hero's rotating "Store. / Brand. / Growth.") is a text gradient crimson-600 → crimson-500 on dark.
  • Keep crimson to roughly 10% of any composition. A full crimson ground is for merchant stories and the 300 × 250 ad only.
  • action blue (#007cff) is for links inside the product dashboard, never in marketing. danger (#f84f65) is for errors with an icon and a label.
  • Focus rings: 2px solid focus with a 2px offset, on every interactive element.

Typography

Inter Tight for headlines, Inter for everything else.

.display-1Inter Tight · 80px / 1 · 600 · -0.04emHero headline at ≥1024px. One per page.

Your Store. Your Brand. Your Growth.

.display-2Inter Tight · 72px / 1 · 600 · -0.04emSection-opening statement on large screens.

Stop renting your business.

.display-mdInter Tight · 60px / 1 · 600 · -0.04emHero at 640–1023px; social post headlines at 1080px.

Sell locally, everywhere.

.display-smInter Tight · 40px / 1 · 600 · -0.04emHero on phones; card headlines in social posts.

Your URL. Your brand. Your data.

.heading-1Inter Tight · 64px / 1.3 · 700 · -0.04emSection titles on desktop.

See the difference for yourself.

.heading-2Inter Tight · 48px / 1.1 · 700 · -0.04emSection titles on tablet; feature block titles.

Search that thinks like your customer.

.statementInter Tight · 28px / 1.25 · 600 · -0.04emPull statements and card titles.

Everything your business needs to sell, in one dashboard.

.body-lgInter · 20px / 1.4 · 500 · -0.04emHero and section intros, max 36rem wide.

Launch a fully independent online store. No developers. No infrastructure headaches.

.body-mdInter · 17px / 1.2 · 500 · -0.04emLink buttons and short supporting lines.

Watch a 2-minute demo

.bodyInter · 16px / 1.4 · 400Running copy, feature descriptions.

A customer database that's yours. Not shared, not rented.

.uiInter · 15px / 1.4 · 500Nav links, small buttons, tabs, table cells.

Orders · Products · Customers

.captionInter · 12px / 1.4 · 600 · 0.05emEyebrows and labels, set UPPERCASE.

THE COMMERCE OPERATING SYSTEM

  • Display and headings: Inter Tight 600–700 at -0.04em tracking. Body and UI: Inter 400–600. Both are self-hosted in the site (src/app/local-fonts.css) and on Google Fonts for designers.
  • Use the scale as written: display-1 80px for the hero, heading-1 64 and heading-2 48 for sections, statement 28 for card titles, body-lg 20 for intros, body 16 for copy, ui 15 for controls, caption 12 uppercase for eyebrows.
  • Display lines run at leading 1.0; body at 1.4. Keep body measure under 65 characters (about 36rem).
  • Regional scripts (Hindi, Tamil, Arabic for UAE): Noto Sans in the matching script and weight.

Voice

Talk like a seller's partner, not a platform.

  • Speak to the seller as "you" and "your". ShopperzKey is "we" only in support and legal copy.
  • Short declaratives, often in threes: "No developers. No infrastructure headaches. No renting space on someone else's marketplace."
  • Ownership words over feature words: own, yours, your domain, your customers. Contrast with renting.
  • Concrete over clever: "Live this weekend", "2-minute demo", "0% marketplace commission".
  • Headlines end with a full stop. Title Case only for CTA buttons ("Start Your Store Free"); sentence case everywhere else.
  • Indian English spelling and ₹ first for Indian audiences; local currency for UAE, UK and US posts.
  • No emoji in product UI or ads. On social, at most one, at the end of a caption.
  • Never claim figures, ratings or quotes that are not current and approved. Mark sample numbers "illustrative".
Write Not
Launch your store this weekend. Unlock the power of seamless e-commerce!
Every customer is yours. Leverage first-party data synergies.
Search that thinks like your customer. AI-powered next-gen search solution.

Look and feel

Layout, imagery, motion and icons.

Layout, shape and depth

  • Container max-width-site 1440px. Gutters: 40px above 1280px, 30px laptop, 20px tablet, 12px phone, 8px below 360px.
  • Section rhythm space-24 (96px) on desktop; hero bottom padding space-20.
  • Corners: buttons radius-xs (4px, squared on purpose); toasts and inputs radius-md; cards radius-lg–radius-xl; eyebrows and tags radius-pill.
  • Shadows are faint: shadow-card at rest, shadow-card-hover on hover. Only the accent CTA glows (shadow-accent).
  • Glass: the nav and modal sheets use blur-nav / blur-glass over content.

Imagery

  • Hero and launch moments use full-bleed product video or real storefront screenshots on pure-black, faded to black at the bottom so white type sits on it.
  • Show real merchants' stores ("stores that look like brands"): fashion, food, home and local retail from India first.
  • Product UI shots sit in a soft-white frame with radius-2xl. No stock photos of people pointing at laptops.
  • Decorative crimson appears only as a soft radial glow off one corner of a dark ground.

Motion

  • Reveal: cubic-bezier(0.2, 1, 1, 1) over 800ms (ease-fluid) for headings and cards on scroll.
  • Hover: cubic-bezier(0, 0.5, 0.22, 1) over 400ms (ease-snappy); arrows nudge 2px up-right.
  • Modals: cubic-bezier(0.4, 0.4, 0, 1) over 500ms. Dropdowns and the mobile menu: cubic-bezier(0, 1, 0.5, 1) over 800ms.
  • The hero word rotates every 2.8s. Everything stops under prefers-reduced-motion.

Iconography

  • Line icons at 1.5–2px stroke, rounded caps and joins, in fg or on-accent. The CTA arrow is the up-right ↗ (s-300x300_…svg on dark, s-301x300_…svg on light in public/assets/images).
  • Payment and shipping partner logos appear only in their own colours, at equal height, in a row labelled with what they do.
  • No emoji as icons.

Components

The building blocks, live.

Styles in assets/css/components.css; tokens in assets/css/tokens.css.

Buttons

<a class="sk-btn sk-btn--accent" href="/signup">Start Your Store Free <span class="sk-arrow">↗</span></a>

Eyebrow

The Commerce Operating System

Made in India

Now live in UAE

Feature cards

Store

Your look, not a template.

Shape a dynamic homepage and every page with the theme customizer, no code needed.

Extend

Apps when you need them.

Connect Shiprocket, FedEx, Stripe, PayU and PhonePe the moment your business needs them.

Intelligence

Search that thinks like your customer.

AI finds what shoppers mean in seconds, not scrolls.

Social media

Ready to post, at full size.

Every image is shown at its real proportions, ready to post. All of them are in the brand kit download.

Feed posts

Launch / hero template
Launch / hero1080 × 1080
Feature / value template
Feature / value1080 × 1080
Merchant story template
Merchant story1080 × 1080

Carousels and stories

Carousel cover template
Carousel cover1080 × 1350
Carousel slide template
Carousel slide1080 × 1350
Story · new markets template
Story · new markets1080 × 1920
Story · languages template
Story · languages1080 × 1920

Profile covers and link preview

LinkedIn page cover template
LinkedIn page cover1128 × 191
X header template
X header1500 × 500
Link preview (og:image) template
Link preview (og:image)1200 × 630
YouTube channel art template
YouTube channel art2560 × 1440

Ads

Performance ad template
Performance ad1200 × 628
Display ad 300 × 250 template
Display ad 300 × 250600 × 500 @2x

Social playbook

What to post, and how.

Channels and sizes

Channel Format Size (px) Template card
Instagram, Facebook Feed post 1080 × 1080 Feed posts
Instagram, LinkedIn Carousel / portrait 1080 × 1350 Carousels
Instagram, Facebook, WhatsApp Story, Reel cover 1080 × 1920 Stories
LinkedIn Company cover 1128 × 191 Profile covers
X Header 1500 × 500 Profile covers
YouTube Channel art 2560 × 1440 (safe 1546 × 423) Profile covers
All Link preview (og:image) 1200 × 630 Link preview
All Profile picture 400 × 400 Link preview
Meta, Google Ad 1200 × 628, 300 × 250 Ads

Content pillars and mix

Pillar Share What it posts
Merchant stories 30% Real stores that moved off marketplaces: before/after, a quote, one number.
Product in action 25% One feature per post, tied to a pillar (Store, Sell, Grow, Extend, Intelligence).
Seller know-how 25% Practical tips: SEO for a new store, COD vs prepaid, festive-season discounts.
Ownership manifesto 10% Rented vs owned, "Your URL. Your brand. Your data."
Launches and markets 10% New features, new countries, new languages.

Post 4–5 times a week on Instagram and LinkedIn, 3 stories a week, one Reel a week.

Layout rules for every post

  • One message per post. Headline of 3–8 words, Inter Tight 600, -0.04em, last phrase in crimson.
  • Logo top-left at 1/3 of the width on squares; domain or CTA bottom row.
  • 72px safe margin at 1080px. Story text stays between y = 250 and y = 1580.
  • Alternate grounds through the grid: dark, light, dark, crimson. Never two crimson posts side by side.
  • Screens and numbers in posts are real or labelled "Illustrative figures".

Captions

Structure: hook line (the headline restated as a benefit) → 1–3 short lines of detail → CTA → hashtags.

Your marketplace takes a cut of every order. Your own store doesn't. ShopperzKey gives you your own domain, your own customers and 0% commission. Start your store free: link in bio.

ShopperzKey #OwnYourStore #D2CIndia #SellOnline #MadeInIndia

  • Brand hashtags: #ShopperzKey #OwnYourStore #YourStoreYourBrand
  • Topic hashtags (pick 3–5): #D2CIndia #SmallBusinessIndia #SellOnline #Ecommerce #MadeInIndia #ShopLocal
  • LinkedIn: no hashtags in the first line, 3 at the end, a question to close.
  • Tag merchants by handle only with their permission.

Reply tone

Friendly, direct, and quick. Answer the question in the first sentence, then link the help page. Move order or payment issues to DMs. Never argue about competitors; restate what ShopperzKey does.

Stationery

Business card and email signature.

Business card front template
Business card front1050 × 600 · 300 dpi
Business card back template
Business card back1050 × 600 · 300 dpi