iTrades Design System

Design Direction

iTrades should feel like a modern professional trading application without the visual density of a traditional trading terminal.

The interface should prioritize clarity, data readability, and fast navigation.

Visual Characteristics

• Dark-first interface
• Clean typography
• High information clarity
• Minimal decorative elements
• Subtle borders
• Moderate corner radius
• Limited shadows
• Clear profit/loss visualization
• Consistent spacing

---

Semantic Colors

Profit

Used for:

Positive P&L Winning trades Profitable calendar days

Loss

Used for:

Negative P&L Losing trades Losing calendar days

Neutral

Used for:

No-trade days Zero P&L Secondary information

Accent

Used for:

Selected navigation Primary actions Links Focused controls

Exact colors will be selected during UI development.

---

Typography

Hierarchy should include:

Page Title

Section Title

Card Metric

Body

Secondary Text

Caption

Numeric financial data should be especially easy to scan.

---

Core Components

Button

IconButton

Card

MetricCard

Input

Select

DatePicker

Modal

Table

Badge

Tabs

Dropdown

Tooltip

EmptyState

LoadingState

AccountSelector

PnlValue

---

Responsive Behavior

Desktop is the primary trading workspace.

Tablet and mobile must remain fully functional.

Navigation may collapse on smaller screens.

Data tables should adapt intentionally rather than simply shrink.

---

P&L Display Rules

Positive: +$1,250.00

Negative: -$425.00

Zero: $0.00

Color should supplement the value but never be the only indication of profit or loss.