One system for reading risk at a glance.

2.1Brand primitives

Sourced directly from the Journal Trading mark (Journal.svg): deep navy as the grounding surface, its exact 246.81° gradient — #009AC8 to #1BB980 — as the single primary action color, and magenta reserved exclusively for AI/Coach surfaces so assistant content is always identifiable at a glance.

2.2P&L & status — fixed, validated, never themed

The good/critical pair below is run through automated CVD (color-vision-deficiency) simulation — deuteranopia and protanopia — and passes adjacent-pair separation in both light and dark. These four hexes are constants: they never shift with brand theming and are never reassigned to a chart series.

Status colors ship with an icon and/or label — never color alone — per §7 Accessibility.

2.3Chart categorical palette

For multi-strategy comparison, equity curves and backtest overlays. Order is the safety mechanism: hues are assigned in this fixed sequence and never cycled or reassigned when a filter changes the series count — validated against both light and dark chart surfaces with worst-adjacent-pair ΔE ≥ 8 (OKLab). Scatter/bubble/small-multiple forms that show all pairs at once are capped at the first 3 slots.

2.4Neutrals & ink

IBM Plex Sans for interface text — a humanist grotesque with real character that avoids the "safe default" faces (Inter, Space Grotesk) common to templated fintech UI. IBM Plex Mono for every number, ticker, price and code value — its terminal lineage suits a product built around reading figures fast.

4px base unit. Layout gaps and paddings are drawn only from this scale — never arbitrary values.

Dashboard grid: 12 columns, 24px gutter, 1280px content max-width, 16px page margin on mobile. Widgets snap to a 4×4 minimum cell.

Radius: 6px controls, 10px cards, 12px chat bubbles and modals, 100px pills. Shadows stay shallow — density is expressed with hairline borders (1px, --border-hairline) before reaching for elevation.

Live data (price ticks, KPI updates) never animates position or triggers layout shift — only the value and a brief color flash (120ms) on the cell background communicate the change. Chart redraws crossfade, they never jump-cut. All motion respects prefers-reduced-motion.

One primary action per screen. Text sits in white, bold, on --brand-gradient-ui — a deepened derivative of the mark's 246.81° gradient tuned so white clears 4.5:1 at both ends (5.7:1 cyan end, 5.4:1 green end). The exact mark gradient reads as low as 2.5:1 with black text and 2.5–3.2:1 with white, which is why it never carries a text label — it's reserved for the logo and thin, textless accents.

The primary dashboard unit. Value first, delta second, trend third — in that visual weight order. Every P&L value carries an explicit sign.

Tables sit on a fixed white surface (--table-bg) in both themes — the one deliberate exception to the dark-first rule — so a dense grid of numbers stands apart from the navy app chrome, the same way the source product's trade cards do. Rows highlight on hover with a brand-cyan wash; the header stays pinned while the body scrolls. Monospace tabular figures right-aligned, colored P&L with an explicit sign.

Daily P&L calendar — a signature Journal Trading pattern. Intensity is fixed per state (win/loss/flat), not scaled by magnitude, so the grid stays scannable rather than turning into a second heatmap encoding.

All charting is rendered by TradingView (the Advanced Chart / Lightweight Charts widget), not built from scratch — so the chart canvas keeps TradingView's own dark theme rather than being re-skinned into the app's surfaces. Two of TradingView's defaults are overridden at the widget config level: candle up/down colors are mapped to the app's own validated P&L pair, not TradingView's stock teal/red, so green and red mean the same thing on a candle as they do on a KPI tile.

The primary chart surface, styled to match the embedded TradingView widget: dark canvas regardless of app theme, price axis on the right, time axis on the bottom, an OHLC legend that updates on hover, and a crosshair with axis-anchored value labels.

Thin candle bodies with 1.5px wicks, a muted grid (--tv-grid) that never competes with price action, a right-anchored price tag on the crosshair, and a volume subpanel at 55% opacity. Colors come from the app's own --status-good / --status-critical pair, not TradingView's stock palette.

Summary before detail: KPI row on top, charts and recent activity below. Nothing requires a scroll to answer "how am I doing."

Backtest output pairs a compact metrics table with the equity curve and trade distribution, so statistical performance (Sharpe, expectancy, max DD) sits next to its visual shape rather than in a separate tab.

Magenta is used nowhere else in the system, so any assistant-authored content — the tag, the accent — is identifiable at a glance as AI, not human-entered journal content. Structured findings (a scored trade, a stat) render as a data card inside the bubble rather than prose alone.