Store
Your look, not a template.
Shape a dynamic homepage and every page with the theme customizer, no code needed.
Brand guidelines · v1 · October 2026
How ShopperzKey looks, sounds and shows up: logo, colour, type, voice, components and ready-to-post social templates.
Essentials
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).
Logo



logo-light.png only if the Z still separates, otherwise use the white wordmark text set in type.Colour
Click any swatch to copy its hex value.
| Token | Light | Dark | Use |
|---|---|---|---|
bg | #F2F2F2 | #000000 | Page ground. Canvas Gray in light; Pure Black in dark sections (hero, CTA bands). |
bg-raised | #FFFFFF | #141414 | Cards, sheets, the nav bar and form fields sitting on bg. |
bg-soft | #F7F7F7 | #222222 | Quiet inset panels and table stripes inside a bg-raised card. |
line | #E1E1E1 | #333333 | Hairlines, dividers and outline-button borders. Decorative only: never the only edge of a control. |
fg | #111111 | #F7F7F7 | Headlines and body copy on bg, bg-raised and bg-soft (16.9:1 light, 17.6:1 dark). |
fg-muted | #555555 | #A3A3A3 | Secondary copy, descriptions and metadata on bg and bg-raised (6.7:1 light, 7.5:1 dark). |
accent | #B6142C | #F76D85 | Crimson 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 | #D01F3F | Crimson used AS A FILL: the primary CTA, the live dot, a badge. Always carries on-accent text (5.3:1). |
accent-fill-deep | #B6142C | #B6142C | Bottom stop of the CTA gradient and pressed state; the logo's own crimson. |
on-accent | #FFFFFF | #FFFFFF | Text and icons on accent-fill and accent-fill-deep. |
accent-soft | #FFF1F3 | #460611 | Tinted ground behind crimson text: tags, toasts, the 'New' chip. Pair with accent. |
focus | #B6142C | #F76D85 | 2px 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.
bg (canvas #f2f2f2 light, pure-black in dark sections). Cards use bg-raised.fg; secondary text fg-muted. Use subtle (#888) only for 24px+ text or decoration: it is 3.2:1 on canvas.accent (crimson-700 on light, crimson-400 on dark). Crimson as a fill uses accent-fill (crimson-600) with on-accent white text.crimson-600 → crimson-700 with shadow-accent. One per screen.crimson-600 → crimson-500 on dark.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 with a 2px offset, on every interactive element.Typography
Your Store. Your Brand. Your Growth.
Stop renting your business.
Sell locally, everywhere.
Your URL. Your brand. Your data.
See the difference for yourself.
Search that thinks like your customer.
Everything your business needs to sell, in one dashboard.
Launch a fully independent online store. No developers. No infrastructure headaches.
Watch a 2-minute demo
A customer database that's yours. Not shared, not rented.
Orders · Products · Customers
THE COMMERCE OPERATING SYSTEM
src/app/local-fonts.css) and on Google Fonts for designers.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.Voice
| 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
max-width-site 1440px. Gutters: 40px above 1280px, 30px laptop, 20px tablet, 12px phone, 8px below 360px.space-24 (96px) on desktop; hero bottom padding space-20.radius-xs (4px, squared on purpose); toasts and inputs radius-md; cards radius-lg–radius-xl; eyebrows and tags radius-pill.shadow-card at rest, shadow-card-hover on hover. Only the accent CTA glows (shadow-accent).blur-nav / blur-glass over content.pure-black, faded to black at the bottom so white type sits on it.radius-2xl. No stock photos of people pointing at laptops.cubic-bezier(0.2, 1, 1, 1) over 800ms (ease-fluid) for headings and cards on scroll.cubic-bezier(0, 0.5, 0.22, 1) over 400ms (ease-snappy); arrows nudge 2px up-right.cubic-bezier(0.4, 0.4, 0, 1) over 500ms. Dropdowns and the mobile menu: cubic-bezier(0, 1, 0.5, 1) over 800ms.prefers-reduced-motion.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).Components
Styles in assets/css/components.css; tokens in assets/css/tokens.css.
<a class="sk-btn sk-btn--accent" href="/signup">Start Your Store Free <span class="sk-arrow">↗</span></a>
The Commerce Operating System
Made in India
Now live in UAE
Store
Shape a dynamic homepage and every page with the theme customizer, no code needed.
Extend
Connect Shiprocket, FedEx, Stripe, PayU and PhonePe the moment your business needs them.
Intelligence
AI finds what shoppers mean in seconds, not scrolls.
Social playbook
| 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 |
| 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 |
| 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.
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
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


Downloads
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
Carousels and stories
Profile covers and link preview
Ads