Brand & Theme Guide for AI Generation

This document outlines the visual identity, color palette, and tone of voice for The Ecom Way. Use these specifications when generating UI designs, marketing assets, or styling new components.

1. Visual Identity & Design Philosophy

Our design aesthetic is Modern, Energetic, and Data-First. We build tools for e-commerce sellers, so the interface must feel professional enough for business use but vibrant enough to keep users engaged.

• Style: Material Design influenced, with clean lines and generous whitespace.
• Surface: High usage of "Cards" (Paper surfaces) to group data.
• Vibe: Trustworthy, Efficient, Profit-Oriented.

2. Color Palette

The color scheme is high-contrast, leveraging the psychological association of Orange (Amazon/Buying) and Dark Blue (Professionalism/Trust).

Primary Colors

• Action / Brand Color: #FF9900 (Vivid Orange)
  • Usage: Main Call-to-Action buttons, distinctive headers, active states, loading spinners.
• Secondary / Depth Color: #131921 (Charcoal Blue)
  • Usage: Navigation bars, secondary headers, footer elements, high-contrast text backgrounds.

Neutral & Functional Colors

• Background: #FFFFFF (White) or #F5F7FA (Very Light Grey) for app backgrounds to let data pop.
• Surface: #FFFFFF (White) with subtle shadows for cards/modals.
• Text Primary: #111111 (Almost Black) - For maximum readability.
• Text Secondary: #555555 (Mid Grey) - For labels and supporting text.
• Borders: #E0E0E0 - Subtle dividers.

Status Colors

• Success: #2E7D32 (Green) - For profit indicators, positive margins, successful uploads.
• Error: #D32F2F (Red) - For negative margins, losses, errors.
• Warning: #ED6C02 (Dark Orange) - For alerts or attention items.

3. Typography

• Font Family: League Spartan, Arial, sans-serif.
• Characteristics: Geometric, modern, and highly legible.
• Hierarchy:
  • H1 (Page Titles): Bold (700), Large (2.5rem), often in Brand Orange #FF9900.
  • H2 (Section Headers): Semi-Bold (600), Charcoal Blue #131921.
  • Body: Regular (400), clean and spacious line height (1.6).
  • Buttons: Semi-Bold, Sentence case (not all caps).

4. Tone of Voice & Wording

The content should be Empowering, Direct, and Solution-Focused.

Key Principles

1. Benefit-Driven: Don't just list features; explain the value.
   • Bad: "Profit Calculator Tool"
   • Good: "Master Your Margins" or "Stop Guessing Your Profits"
2. Encouraging: Use positive reinforcement.
   • Examples: "Sit back and relax," "One more step to go," "Success!"
3. Clear & Concise: E-commerce sellers are busy. Get to the point.
   • Avoid: "The system is currently processing the data you have uploaded..."
   • Use: "Processing your orders... This will just take a moment."
4. Professional: Maintain accuracy in terminology (e.g., "Settlement," "Referral Fee," "Net Margin").

Keywords to Use

• Action Verbs: Calculate, Optimize, Scale, Automate, Generate, Master.
• Nouns: Margins, Profit, ROI, Efficiency, Growth, Accuracy.
• Descriptors: Precise, Instant, Comprehensive, Smart, Professional.

5. UI Components to Emulate

• Cards/Containers: Rounded corners (8px - 12px), light drop shadows.
• Buttons: Pill-shaped or slightly rounded (8px), solid fill for primary actions.
• Modals: Clean, centered, with clear "Dismiss" or "Confirm" actions.
• Tables: Spacious cells, clear headers, zebra striping or hover effects for readability.

---

Use this guide to ensure all generated content and designs feel native to The Ecom Way ecosystem.