WebPayMe Brand Guidelines
01 Logo: Current State vs Gold Shield Vision
Documenting the gap between the current generic SVG implementation and the brand vision for a premium gold shield mark.
Current State Live
The existing logo is a functional SVG shield with:
- An amber-to-amber gradient shield shape
- Dark inner shield fill with a white "$" character
- Two-line "WebPay / Me" wordmark (split across two lines)
- A thin underline accent bar
- Aesthetic but not a distinct, ownable brand mark
- Lacks the visual weight and protection symbolism of a true shield
Files: /logo.svg (gold shield, 320x80), /logo-alt.svg (360x80, compact single-line), /favicon.svg (32x32)
Gold Shield Vision Target
The envisioned brand mark should evolve to:
- A bold, sovereign gold shield with depth and metallic finish
- Clean inner space with an embossed "$" or "WPM" monogram
- Represents global payment protection (shield = security, gold = premium value)
- Single-line wordmark with proper tracking and hierarchy
- Standalone icon variant for favicon, social avatar, app icon
- Horizontal and stacked (vertical) layout variants
- Dark background lockup with gold-on-navy treatment
Key principle: The shield must read as protection of value, not merely a decorative shape. Gold gradient should feel like precious metal, not generic amber.
Implementation Roadmap
Phase 1
Refine shield geometry, introduce luxury gold gradient, create standalone icon
Phase 2
Add horizontal + stacked lockups, dark/light variants, favicon overhaul
Phase 3
Brand guidelines complete, asset library delivered, all surfaces updated
02 Color Palette
The WebPayMe brand is built on a dark navy/slate foundation with a premium gold shield accent. Colors are selected for trust, security, and financial sophistication.
Primary Brand Colors
HEX
#0A0B10
Navy Base
Page background, primary dark canvas
HEX
#13141F
Navy Secondary
Cards, containers, header background
HEX
#1A1B2E
Slate Navy
Elevated surfaces, hover states
HEX
#F59E0B
Gold Primary
Shield fill, accents, highlights, CTAs
Gold Spectrum
HEX
#FEF3C7
Gold 50
Subtle backgrounds, hover glow
HEX
#FCD34D
Gold 200
Secondary gold, bright accent
HEX
#F59E0B
Gold 400
Primary gold — shield standard
HEX
#B45309
Gold 600
Deep gold, shadow, dark variant
Text & Interface Colors
HEX
#F0F2F8
Text Main
Body text, headings
HEX
#8B92A5
Text Muted
Secondary text, metadata, labels
HEX
#3B82F6
Accent Blue
Interactive links, buttons
HEX
#10B981
Accent Teal
Success states, positive indicators
Accessibility Notes
- Text on dark backgrounds: #F0F2F8 on #0A0B10 achieves a contrast ratio of ~14.5:1 (WCAG AAA).
- Gold (#F59E0B) on dark (#0A0B10): Ratio ~6.8:1 (WCAG AA for large text). Do not use gold as body text color.
- Gold on white: Avoid using gold (#F59E0B) on white backgrounds for body text. Use only for decorative/display elements.
- Muted text (#8B92A5) on dark (#0A0B10): Ratio ~5.2:1 (WCAG AA). Acceptable for secondary text ≥14px.
03 Typography
Inter is the sole brand typeface. Clean, highly legible, and digitally native. No secondary or fallback font families should be introduced.
Typeface Specification
Inter
Designed by Rasmus Andersson • Variable font
Thin 100
Light 300
Regular 400
Medium 500
Semi-Bold 600
Bold 700
Extra-Bold 800
Black 900
Heading & Body Scale
| Element | Weight | Size | Line Height | Letter Spacing | Sample |
|---|---|---|---|---|---|
| H1 | 700 (Bold) | clamp(2.5rem, 5vw, 4rem) | 1.2 | -0.02em | The quick brown fox |
| H2 | 700 (Bold) | clamp(2rem, 3.5vw, 2.5rem) | 1.2 | -0.02em | The quick brown fox |
| H3 | 600 (Semi-Bold) | 1.25rem | 1.3 | -0.015em | The quick brown fox |
| H4 | 600 (Semi-Bold) | 1.1rem | 1.4 | -0.01em | The quick brown fox |
| Body | 400 (Regular) | 1rem (16px) | 1.6 | Normal | The quick brown fox jumps over the lazy dog. |
| Body Large | 400 (Regular) | 1.125rem (18px) | 1.6 | Normal | The quick brown fox jumps over the lazy dog. |
| Small / Meta | 400 (Regular) | 0.8rem (13px) | 1.5 | Normal | The quick brown fox jumps • Metadata • 12 Apr 2026 |
| Caption / Tiny | 500 (Medium) | 0.7rem (11px) | 1.4 | +0.02em | UPPERCASE CAPTION TEXT |
Usage Guidelines
Do
- Use Inter exclusively across all brand surfaces
- Apply H1 gradient treatment only on hero sections (white-to-blue-purple, or gold-to-amber)
- Maintain generous whitespace around headings
- Use font-weight 700 for all primary headings
- Set body text at 16px minimum on desktop
Don't
- Do not use font-weight 300 (Light) for body copy
- Do not mix font families (no Georgia, serif, etc. except in SVG logos)
- Do not use all-caps for body text
- Do not reduce letter-spacing below -0.03em
- Do not set font sizes below 11px for any interface text
04 Logo Usage Rules
Consistent application of the WebPayMe logo protects brand recognition. These rules apply to the current logo and the future gold shield mark.
Logo Variants
Primary Logo (Horizontal) — logo.svg
Compact Logo (Single Line) — logo-alt.svg
Inverted variant — For gold/gradient backgrounds
Icon / Favicon — favicon.svg (32x32)
Clear Space / Minimum Size
Clear Space
The minimum clear space around the logo on all four sides is equal to the height of the wordmark’s uppercase "W" character. No other graphic elements, text, or UI components may intrude on this space.
Clear Space
= W height
= W height
LOGO
Clear Space
= W height
= W height
Minimum Size
| Surface | Min Width |
|---|---|
| Desktop / Web | 160px (horizontal lockup) |
| Mobile / Small screens | 120px (horizontal lockup) |
| Favicon / App icon | 32px x 32px |
| Social media avatar | 180px x 180px |
| Print / Letterhead | 1.5” (38mm) wide |
Do’s and Don’ts
✓
Do use the logo on dark backgrounds (navy, slate, black).
The gold shield and white wordmark are optimized for dark canvases.
The gold shield and white wordmark are optimized for dark canvases.
✗
Don’t place the logo on busy or photographic backgrounds without a dark overlay or container.
✓
Do use the inverted variant (white/light icon) when placing on gold or light backgrounds.
✗
Don’t recolor the logo. Always use official SVG files. Never change the gold gradient to another color.
✓
Do maintain proportional scaling. Always constrain width and let height auto-scale.
✗
Don’t stretch, skew, rotate, or apply drop shadows to the logo. Use only flat positioning.
✓
Do use the standalone shield icon for favicon, app icon, or social avatar.
✗
Don’t rearrange the wordmark or split it across multiple lines unless using the official alt variant.
05 Brand Voice & Tone
WebPayMe communicates as a professional, trusted partner in payment solutions. The voice is confident but never arrogant, direct but never cold.
Voice Pillars
Professional
Communicate with clarity and precision. Use industry-appropriate terminology. Avoid jargon for jargon’s sake, but don’t oversimplify to the point of vagueness. Write like a domain expert who can explain complex topics to a capable business owner.
"We assess businesses individually, ensuring long-term stable processing."
Trusted
Build confidence through specificity and transparency. Avoid hyperbolic claims. When you make a promise, back it with process details. Security and reliability are demonstrated, not asserted.
"Your application is securely handled and professionally assessed by specialized intake teams."
Solutions-Focused
Frame every message around the problem being solved. The audience is a merchant who has been rejected or restricted. Validate their frustration, then present the alternative. Outcome-oriented language wins.
"Rejected by mainstream providers? We specialize in alternative payment acceptance for hard-to-place merchants."
NOT Salesy
Avoid urgency tactics, pressure language, or over-the-top claims. Never use: "Act now," "limited time," "guaranteed approval," or "instant." The brand earns engagement through credibility, not conversion tricks.
"Get approved instantly! Limited spots available!"
Tone Spectrum
| Context | Tone | Example Phrasing |
|---|---|---|
| Homepage Hero | Confident, aspirational | "Alternative payment solutions for legitimate businesses." |
| Problem / Pain Point | Empathetic, validating | "Frustrated by sudden account closures or held funds?" |
| Solution Description | Direct, informative | "We specialize in alternative payment acceptance for hard-to-place merchants." |
| Form / Application | Clear, reassuring | "Submit your details securely to explore stable alternative processing options." |
| Error / Edge Cases | Calm, helpful | "Something didn’t go through. Please try again or contact support." |
| Internal / Admin | Concise, neutral | Data-driven labels. No marketing language in the admin panel. |
Words to Use & Avoid
Preferred
- Legitimate, compliant, lawful
- Alternative, specialized, tailored
- Review, assessment, intake
- Stable, sustainable, long-term
- Merchant-focused, partnership
- Hard-to-place (vs. high-risk)
Avoid
- Guaranteed, instant, unlimited
- High-risk, risky, shady
- Crazy, insane, mind-blowing
- Act now, limited time, last chance
- Unicorn, magic, revolutionary
- Cheap, free, discount (not a discount brand)
06 Visual Assets Inventory
Complete catalog of all current brand visual assets, their status, and the path to gold shield upgrade.
Logo & Icon Assets
| Asset | File | Dimensions | Status | Notes |
|---|---|---|---|---|
| Primary Logo | /logo.svg | 320x80 | Live | Two-line wordmark, amber gradient shield. Used on homepage, brand surfaces. |
| Alt Logo (Compact) | /logo-alt.svg | 360x80 | Live | Single-line wordmark with tagline. Used for compact layouts. |
| Favicon | /favicon.svg | 32x32 | Live | Simplified shield with “$”. Needs refresh for Phase 2 gold shield. |
| Gold Shield (Vision) | TBD — /assets/logo-gold-shield.svg | TBD | Vision | Phase 1 deliverable. Refined geometry, luxury gold gradient, standalone icon. |
| Stacked Logo (Vision) | TBD — /assets/logo-stacked.svg | TBD | Vision | Phase 2 deliverable. Shield above wordmark, vertical lockup. |
| Dark Variant (Vision) | TBD — /assets/logo-dark.svg | TBD | Vision | Phase 2 deliverable. For light/white backgrounds. |
Admin & Internal Assets
| Asset | Location | Status | Notes |
|---|---|---|---|
| Admin Dashboard | /admin/index.php | Live | Lead management with stats, trend chart, pagination. Dark theme. |
| Lead Detail | /admin/lead-detail.php | Live | Individual lead view with CRM status. |
| Lead Scoring | /admin/lead-scoring.php | Live | Lead scoring and prioritization. |
| Lead Status | /admin/lead-status.php | Live | Status management interface. |
| Score Leads | /admin/score-leads.php | Live | Batch scoring tool. |
| Brand Guidelines | /brand-guidelines.php | Live | Public-facing brand guidelines document. |
Site Assets
| Asset | Location | Status | Notes |
|---|---|---|---|
| Homepage | /index.php | Live | Includes hero, feature cards, application form. |
| Stylesheet | /styles.css | Live | Dark navy theme. CSS custom properties for colors. |
| Blog Index | /blog/index.php | Live | Resource articles for SEO and merchant education. |
| Social Preview | /social-preview.png | Missing | Referenced in OG tags but file does not exist. Needs creation. |
Assets Needed (Roadmap)
- Gold Shield Logo (Primary) — Refined shield geometry with luxury gold gradient, standalone icon + horizontal lockup.
- Gold Shield Variants — Stacked (vertical) lockup, inverted (white/gold for dark bg), monochrome (single-color) for small sizes.
- Social Preview Image — 1200x630px OG image with gold shield on dark background. Currently 404s.
- Email Signature Logo — Compact version for staff email signatures (approx. 200x50px).
- PPT / Deck Template — Branded slide template with gold shield, dark background, Inter typography.
- Letterhead / PDF Template — Print-ready brand template for formal correspondence.
- App Icon Set — iOS (1024x1024), Android, PWA manifest icons in gold shield style.
WebPayMe Brand Guidelines — v1.0
Published May 20, 2026 at 23:40 UTC
Part of the WebPayMe Design System