Mahmoud Ahmed — Lead Product Designer
Mahmoud Ahmed Lead Product Designer
Speculative · Self-Initiated

ArcLight Capital Risk Command Center

A real-time risk monitoring dashboard concept for a fictional $4.82B AUM asset management firm. The brief was self-set: make the entire portfolio state readable in under 10 seconds, with drill-down that doesn't break context.

Type Speculative / Self-Initiated
Platform Desktop · Web
Tags Financial Dashboard · Data Visualization · Information Architecture · Dark UI · Fintech
Domain Fintech · Risk Operations
arclight.internal/risk
ArcLight Capital Risk Command Center main dashboard
. . .

The Problem

Design a real-time risk monitoring dashboard for a fictional asset management firm (ArcLight Capital) that handles $4.82B AUM across equities, derivatives, fixed income, commodities, crypto, and FX simultaneously.

. . .

Information Architecture

Information Hierarchy

A risk dashboard fails when it treats all information as equal the interface has to encode severity structurally, not just visually. The hierarchy was defined as three tiers: portfolio-level health (5 metric cards), pattern recognition (intraday P&L chart + asset class breakdown), and exception-driven action (alerts feed + positions table).

Semantic Colour

Colour carries semantic weight throughout every hue maps to a risk level and stays consistent across badges, exposure bars, chart fills, and alert borders. The drill-down view (position detail) was designed to feel like a continuation of the same mental model, not a context switch same sidebar, same severity system, same clock, deeper data.

Three-tier information hierarchy
Portfolio health (5 metric cards) → Pattern recognition (intraday P&L + asset breakdown) → Exception-driven action (alerts feed + positions table)

Surface System

The dark theme is not aesthetic preference. High-density financial interfaces are used across long sessions under varied lighting. Dark backgrounds reduce eye fatigue, and the layered surface system stepping from near-black root through sidebar, chip overlays, and cards creates depth without borders, letting content group itself spatially.

. . .

Screens

Two high-fidelity Figma screens covering the full monitoring surface: the Command Center for portfolio-wide state, and the Position Detail for single-position drill-down.

Design System
Typography Space Grotesk for all headings, labels, nav, and buttons. JetBrains Mono for every number, price, P&L, timestamp, and Greek value. Inter for the sticky action bar position title only.
Surface System Five surface levels stepping from near-black root through sidebar, chip overlays, cards, and subtle buttons each layer darker than the last, creating spatial depth without relying on borders.
Semantic Colour Layer Six semantic roles critical red, high orange, medium yellow, warning amber for over-limit values and adverse P&L, CTA yellow for active nav and primary actions, and green for live market and online status. Every hue maps to a meaning and stays consistent across badges, bars, chart fills, and alert borders.
Craft Animated SVG charts with draw-on-load, live clock ticking from market open, count-up animations on all numeric values every interaction detail designed to production spec.