The eCom Hero identity system
A visual identity system for certified e-commerce operators — built to feel premium, precise, and quietly confident. This sheet governs colour, type, logo use, and UI components across every eCom Hero touchpoint.
The idea
Deep forest greens and warm gold read as grounded, established, and premium — closer to a private members' club than a template SaaS page. Gold carries the weight of trust and craftsmanship; the near-black greens give it room to breathe.
How to use this sheet
Every colour, type size, and component below maps directly onto common selectors — h1, .eyebrow, .stat .n and so on — so any page can be reskinned by swapping tokens, not rebuilding structure.
Who eCom Hero is
eCom Hero trains and places certified, AI-empowered ecom operators — dedicated, office-based team members certified on a client's own platforms and workflows before day one. The mission is simple: help founders buy back their time, and supercharge their store's growth.
Certified before deployment, always
No operator deploys below the certification threshold — every operator is certified on the client's own platforms before day one.
AI-empowered, not just AI-aware
Every operator is trained to use AI tools across customer service, content, reporting, and admin.
Built by the world's top ecommerce educator
The operator training curriculum is built directly on Paul Waddy's frameworks — coach to brands turning over $500m+ a year.
Backed by a genuine replacement guarantee
If a placed operator can't continue for reasons covered under the Trading Terms, WrkPod replaces them at no additional recruitment cost.
How eCom Hero sounds
Conversational but professional. Short sentences. Active voice. Real outcomes over vague promises — we speak to ecommerce founders as peers, people who've built a store and know what actually needs to get done.
We Are
- Ambitious
- Warm
- Credible
- Direct
- Encouraging
- Entrepreneurial
We Are Never
- Corporate
- Stiff
- Jargon-heavy
- Overly salesy
- Condescending
- Cost-cutting focused, not growth-focused
Phrases We Use
- “Buy back your time”
- “Supercharge your store's growth”
- “AI-empowered ecom operators”
- “Your team, just based offshore”
Phrases We Avoid
- “Cheap labour” or “cheap staff”
- “Outsourcing” used purely as a cost-cutting term
- Corporate jargon — “leverage synergies,” “end-to-end solutions”
- “VA” or “virtual assistant” as the primary term — always “operator”
Palette & usage
Eight core tones carry the entire system. Dark greens hold the structure, gold does the pointing, cream and ivory give the eye somewhere to rest.
Primary dark background — sections, nav, footer
Feature panel — pairs with Deep Forest
Background gradient partner — pairs with Deep Forest
Logo, icons, highlights, primary CTA
Accent gold — hover states, fine details, dividers
Light section background, alt panels
Text on dark backgrounds; base for clean sections
Secondary text, captions, muted labels
Archivo + Inter
Archivo carries every headline, eyebrow, stat and button. Inter handles everything you actually read at length.
- 500 Medium
- 700 Bold
- 800 ExtraBold
- 900 Black
- 400 Regular
- 500 Medium
- 600 SemiBold
- 700 Bold
Type & colour mapping
| Token | CSS variable | Where it applies |
|---|---|---|
| Deep Forest | --forest | Section backgrounds, nav, dark panels |
| Hero Black | --hero-black | Footer, gradient partner |
| Moss Green | --moss | Feature panel gradient partner |
| Hero Gold | --gold | Eyebrows, icons, stats, primary CTA fill |
| Light Gold | --gold-light | Hover states, gradient top stop |
| Warm Cream | --cream | Alternate light section background |
| Soft Ivory | --ivory | Base light background, text on dark |
| Warm Grey | --warm-grey | Secondary copy on dark |
| Hairline | --hairline | 1px borders, dividers, card outlines |
| Display face | --font-display | h1–h4, eyebrow, button, stat |
| Body face | --font-sans | body, p, li, input, caption |
Marks & clear space
Two marks cover every surface. Choose by background, never by preference.
On Deep Forest / Hero Black — “ECOM” in white
On Warm Cream / Soft Ivory — “ECOM” in Deep Forest
clear space = icon heightDo
- Use the supplied SVG marks only — never re-typeset the wordmark.
- Keep clear space equal to the icon height on every side.
- Use the on-dark mark on Deep Forest or Hero Black, the on-light mark on Cream or Ivory.
Don't
- Don't recolour the mark or apply a full gold fill to the wordmark.
- Don't stretch, rotate, or add drop shadows and outlines.
- Don't place the mark on a busy photo without a forest overlay behind it.
UI in the brand voice
Live components, not screenshots — everything below is the same code the marketing site renders.
Order & catalogue accuracy target
Inventory & catalogue
Listings, variants, pricing and stock kept accurate across every channel you sell on.
Gradient & surface direction
Hero and footer surfaces use a subtle forest-to-black gradient. Gold gradients are reserved for CTAs and the logo — never full section fills.
Get out of the back office
Book a free strategy call and we’ll look at where your business is constrained, what work can move offshore and what your first ECOM HERO operator could take off your team’s plate.