Tradeaholiks

Brand & UI

Brand & UI Style Guide

A unified visual system for our website, software, and marketing materials.

Professional Data Driven Reliable Innovative
DashboardChartsReportsSettings
18,907.25
+152.75 (0.81%)

Logo

FULL WORDMARK

The Tradeaholics logo is a modern, finance-inspired mark designed to represent market activity, growth, and trading performance. At its core are three vertical candlestick-style bars, a visual reference to financial trading charts, symbolising data, strategy, and market movement.nnThe bars are enclosed within a circular ring, representing continuity, stability, and the connected nature of financial markets. The upward extension of the central purple bar subtly reinforces themes of growth, ambition, and progress.n
The colour palette combines:n
- Purple u2013 representing expertise, i

ovation, and strategic thinking.
- Green u2013 symbolising growth, profitability, and success.
- Red u2013 acknowledging market movement, risk, and opportunity.
- Blue u2013 conveying trust, reliability, and professionalism.
Logo

Colour Palette

Logo Primary

LOGO
Logo
#1E68AC
rgb(30, 104, 172)
cmyk(83%, 40%, 0%, 33%)
LOGO
Logo
#68B6D7
rgb(104, 182, 215)
cmyk(52%, 15%, 0%, 16%)
LOGO WORDMARK
Logo Wordmark
#050000
rgb(5, 0, 0)
cmyk(0%, 100%, 100%, 98%)

Logo Accent

RED BAR
Red Bar
#F16667
rgb(241, 102, 103)
cmyk(0%, 58%, 57%, 5%)
RED BAR SHADOW
Red Bar Shadow
#ED1C24
rgb(237, 28, 36)
cmyk(0%, 88%, 85%, 7%)
PURPLE BAR
Purple Bar
#62479C
rgb(98, 71, 156)
cmyk(37%, 54%, 0%, 39%)
PURPLE BAR SHADOW
Purple Bar Shadow
#442F74
rgb(68, 47, 116)
cmyk(41%, 59%, 0%, 55%)
GREEN BAR
Green Bar
#8CC63E
rgb(140, 198, 62)
cmyk(29%, 0%, 69%, 22%)
GREEN BAR SHADOW
Green Bar Shadow
#006738
rgb(0, 103, 56)
cmyk(100%, 0%, 46%, 60%)

Backgrounds used on App

DARK CHARCOAL
Dark Charcoal
#0E131B
rgb(14, 19, 27)
cmyk(48%, 30%, 0%, 89%)
DARK BLUE
Dark Blue
#121626
rgb(18, 22, 38)
cmyk(53%, 42%, 0%, 85%)
BLUE
Blue
#111A2E
rgb(17, 26, 46)
cmyk(63%, 43%, 0%, 82%)

App Accent

RED
Red
#EC4544
rgb(236, 69, 68)
cmyk(0%, 71%, 71%, 7%)
GREEN
Green
#23B681
rgb(35, 182, 129)
cmyk(81%, 0%, 29%, 29%)
PURPLE
Purple
#4E7ABD
rgb(78, 122, 189)
cmyk(59%, 35%, 0%, 26%)
CYAN
Cyan
#00B5D4
rgb(0, 181, 212)
cmyk(100%, 15%, 0%, 17%)
YELLOW
Yellow
#F39E1E
rgb(243, 158, 30)
cmyk(0%, 35%, 88%, 5%)
DARK GREEN
Dark Green
#0F504A
rgb(15, 80, 74)
cmyk(81%, 0%, 7%, 69%)

Semantic

MONEY SPENT, BREACHED STAGE
Money Spent, Breached Stage
#EC4544
rgb(236, 69, 68)
cmyk(0%, 71%, 71%, 7%)
MONEY EARNED, FUNDED STAGE
Money Earned, Funded Stage
#23B681
rgb(35, 182, 129)
cmyk(81%, 0%, 29%, 29%)
EVAL
Eval
#4E7ABD
rgb(78, 122, 189)
cmyk(59%, 35%, 0%, 26%)
EVAL PASS
Eval Pass
#00B5D4
rgb(0, 181, 212)
cmyk(100%, 15%, 0%, 17%)
NEWS DATE, SOME HEADINGS
news date, some headings
#F39E1E
rgb(243, 158, 30)
cmyk(0%, 35%, 88%, 5%)
CALENDAR
Calendar
#0F504A
rgb(15, 80, 74)
cmyk(81%, 0%, 7%, 69%)

Data Colours

#00C8FF
rgb(0, 200, 255)
cmyk(100%, 22%, 0%, 0%)
#A371F7
rgb(163, 113, 247)
cmyk(34%, 54%, 0%, 3%)
#F0883E
rgb(240, 136, 62)
cmyk(0%, 43%, 74%, 6%)
#FF7B72
rgb(255, 123, 114)
cmyk(0%, 52%, 55%, 0%)

Text

#E6EDF3
rgb(230, 237, 243)
cmyk(5%, 2%, 0%, 5%)
#8B949E
rgb(139, 148, 158)
cmyk(12%, 6%, 0%, 38%)
#6E7681
rgb(110, 118, 129)
cmyk(15%, 9%, 0%, 49%)

Typography

Aa
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
H1 Heading 1 32px / Bold
H2 Heading 2 24px / Semi Bold
H3 Heading 3 20px / Semi Bold
H4 Heading 4 16px / Medium
Body 1 Body Text 14px / Regular
Body 2 Small Text 12px / Regular
Caption Caption 11px / Regular

UI Components

Buttons

Form Elements

Tabs

Active Inactive Inactive

Alerts

✓
Success

i
Info

!
Warning

✕
Error

Data Table

SymbolLastChangeChange %Volume
NQ 06-24 18,907.25 +152.75 +0.81% 245,123

Chart Styles

Candlestick charts use red/green for bearish/bullish. Line charts use the primary accent colour. Indicator panels use secondary palette.

Trading UI Elements

Order Entry

NQ 06-24 ✕
Limit ▾
−1+
18,910.00

Positions

NQ 06-24 1 $152.75
ES 06-24 -2 -$45.50

Risk

Account Risk 1.25%
Daily Loss Limit $1,500.00
$650.25

PDF / Reporting Style

Orientation: Portrait

Strategy Performance Report

April 2024

Inside Pages

Contents Page
CONTENTS PAGE
Standard Page
STANDARD PAGE
Data / Table Page
DATA / TABLE PAGE
Back Page
BACK PAGE

Light / Dark Modes

LIGHT MODE
Aa
Primary Text
DARK MODE
Aa
Primary Text

Icons & Spacing

Icon Set

Line icons u2014 24u00d724px, 1.5px stroke
Lucide / Tabler / Heroicons

Spacing System (8px Grid)

Base unit: 8px

8px
16px
24px
32px
40px
48px
64px

Custom Section

Add content to this section in the editor.