MasterTrading
Brand Guidelines & Design System
Version 1.0 — January 2026Brand Colors
Navy represents stability and trust, gold conveys value and expertise, and teal adds a calming therapeutic element.
Brand Navy
Primary brand color, headers, accents
HEX: #161d2f HSL: 225° 32% 14% Brand Navy Light
Sidebar, muted backgrounds
HEX: #1e293b HSL: 215° 40% 20% Brand Navy Dark
Main background, deepest surfaces
HEX: #0a0f1c HSL: 220° 50% 8% Brand Gold
Primary actions, highlights, CTAs
HEX: #c9a96e HSL: 39° 45% 61% Brand Charcoal
Cards, elevated surfaces
HEX: #1B2129 HSL: 220° 25% 14% Brand Off-White
Text, foreground, light backgrounds
HEX: #f5f5f0 HSL: 60° 11% 96% Brand Teal
Secondary accent, therapeutic elements
HEX: #4a7c7e HSL: 181° 26% 39% Semantic Color Tokens
CSS custom properties used throughout the application for consistent theming.
Background
--background Foreground
--foreground Primary
--primary Secondary
--secondary Accent
--accent Muted
--muted Card
--card Destructive
--destructive /* Example usage */
.button { background: hsl(var(--primary)); }
.card { background: hsl(var(--card)); }
/* Tailwind classes */
className="bg-primary text-primary-foreground"
className="bg-card text-card-foreground" Typography
Inter
Primary Typeface • Google Fonts • Variable Weight 300-900
Type Scale
Display
3rem / 48px
H1
2.25rem / 36px
H2
1.875rem / 30px
H3
1.5rem / 24px
H4
1.25rem / 20px
Body Large
1.125rem / 18px
Body
1rem / 16px
Small
0.875rem / 14px
Caption
0.75rem / 12px
Tone & Voice
MasterTrading speaks with the voice of an experienced, empathetic trading coach.
Professional & Expert
We speak with authority on trading psychology, referencing proven techniques like EMDR and bilateral stimulation.
Empathetic & Understanding
We recognize the emotional struggles of trading. No judgment, only support.
Direct & Actionable
Clear, no-fluff communication. Tools that work, steps you can take now.
Private & Secure
Emotional work is deeply personal. Privacy is paramount.
Calm & Grounding
We're the antidote to market chaos, providing a stable anchor.
Growth-Focused
Every trader can improve. We celebrate progress and encourage practice.
Writing Examples
Key Terminology
| Term | Usage |
|---|---|
| EMDR Tool | The core bilateral stimulation feature. Always capitalize EMDR. |
| Trader Archetype | The AI-generated psychological profile (e.g., "The Impulsive Gunslinger"). |
| Coaching Plan | The personalized 12-week development program. |
| Session Scenario | Pre-defined emotional contexts (FOMO, Fear, Revenge, etc.). |
| Voice Reminder | Scheduled AI-generated audio affirmations. |
| Trading Journal | Emotional journaling with AI reflection, not trade logging. |
Theme Modes
Dark theme for the authenticated portal (calming, focused) and light theme for public marketing pages.
Portal Theme (Dark)
Used throughout the authenticated application. Reduces eye strain and creates a calm, focused environment.
Background: #0a0f1c • Text: #f5f5f0
Website Theme (Light)
Used on public marketing pages. More approachable and professional for first-time visitors.
Background: #ffffff • Text: #161d2f
Logo & Wordmark
The MasterTrading wordmark uses the Inter font at 700 weight.
Gold on dark — Primary
Navy on light — Website
White on dark — Alternate
Gold on navy — Featured
Clear Space
Maintain a minimum clear space equal to the height of the "M" around all sides of the wordmark.
Don'ts
- • Don't stretch or distort the wordmark
- • Don't use unapproved color combinations
- • Don't add effects like drop shadows or gradients
- • Don't place on busy backgrounds