Design System

Color

The color system supports visual hierarchy, accessibility, and product differentiation. All tokens respond to light/dark theme toggle.

Core Palette

Semantic Colors

Accessibility: Color-Blind Safe

Typography

A clear type hierarchy optimized for financial data density. System fonts for performance; monospace for market data.

Spacing

A 4px base grid ensures consistent rhythm across all components. Spacing tokens scale from 4px to 96px.

Elevation

Elevation communicates hierarchy and interactivity. Shadows scale from subtle borders to prominent overlays.

Iconography

Tabler-based SVG icon system — 5 semantic categories, 3 density sizes, consistent 2px stroke weight. Every icon is inline SVG for full colour control and zero network requests. Click any icon to copy its SVG.

Button

Buttons trigger actions. Variants communicate importance hierarchy from primary CTA to ghost actions.

Variants

Sizes

States

With Icons

Input

Form inputs for financial data entry. States communicate validation status for compliance workflows.

Toggle & Checkbox

Selection controls for settings and multi-choice forms.

Badge & Tag

Status indicators and categorical labels for financial workflows.

Card

Cards group related content and data. Hover states signal interactivity.

Alert & Toast

Feedback patterns for system messages, confirmations, and compliance notifications.

Inline Alerts

Toast Notifications

Data Table

Sortable data tables for portfolio holdings, transaction history, and compliance logs.

Progress

Progress indicators for onboarding flows, file uploads, and multi-step compliance processes.

Modal & Dialog

Modals for confirmations, signatures, and compliance acknowledgments. Focus-trapped with keyboard navigation (WCAG 2.1 AA).

Tooltip

Contextual hints for data points, regulatory terms, and abbreviations. Accessible via keyboard focus.

Avatar

User identity indicators for RM profiles, client accounts, and team displays.

Skeleton

Loading placeholders that maintain layout structure while data fetches. Reduces perceived latency.

Disclosure

Regulatory disclosure patterns for SEC, FINRA, and ASIC requirements. Expandable by default to meet visibility mandates while preserving UI cleanliness.

Risk Disclosure (ASIC)

Consent Flow

Stepped consent patterns for GDPR, COPPA, and financial services agreements. Consent is recorded with timestamp for audit trail compliance.

KYC Stepper

Multi-step Know Your Customer onboarding. Progressive disclosure collects all AML/FINRA-required information across 5 validated steps — Identity, Source of Wealth, Entity Structure, Investment Policy, and Compliance Review.

Risk Warning

Contextual risk indicators for leveraged products, margin calls, and position sizing. ASIC and ESMA mandated visibility at point of action.

Suitability

FINRA Rule 2111 suitability assessment components. Captures risk tolerance, investment horizon, and financial situation for compliance-grade audit trails.

Session Timeout

Session management for authenticated financial portals. Preserves in-progress state and provides graceful re-authentication (WCAG 2.2.1 Timing Adjustable).

Accordion

Expandable content panels for FAQ, regulatory disclosures, and progressive information architecture.

Tabs

Content segmentation for multi-view interfaces. Active tab maintains keyboard focus for WCAG compliance.

Breadcrumb

Navigation trail for deep hierarchies. Provides context within multi-level information architecture.

Pagination

Page navigation for transaction logs, audit trails, and large data sets.

Divider

Visual separators for content sections. Horizontal and labeled variants.

Dropdown

Action menus and selection lists with keyboard navigation support.

Spinner

Loading indicators for asynchronous operations. Sizes scale with density mode.

Banner

Page-level announcements for system maintenance, regulatory updates, and critical alerts.

Empty State

Placeholder content when data is unavailable. Provides context and actionable next steps.

Drawer

Slide-out panels for detail views, filters, and secondary content without leaving context.

File Upload

Document upload for KYC verification, tax forms, and compliance documentation.

Textarea

Multi-line text input for notes, descriptions, and compliance remarks.

Chip Select

Multi-select chips for filtering, tagging, and categorical selection.

Timeline

Chronological event display for audit trails, trade history, and compliance logs.

Stat / Metric

Key performance indicators and summary metrics for dashboards and reports.

Key-Value

Structured data display for account details, transaction records, and compliance metadata.

Link

Navigational links with accessible focus indicators. External links include visual indicator per WCAG.

Step Indicator

Compact horizontal step tracker for multi-step flows.

Price Display

Real-time price rendering with directional indicators, color coding, and flash-on-change animation.

Order Entry

Trade execution form with buy/sell toggle, order type selection, and pre-trade risk check.

Position Card

Active position display with real-time P&L, entry price, and allocation weight.

Trade Ticket

Confirmation receipt for executed trades with compliance-grade audit metadata.

P&L Display

Profit and loss rendering with directional formatting, color coding, and arrow indicators.

Watchlist Row

Compact instrument display for watchlists with sparkline area, last price, and change.

Sparkline

Inline mini-charts for trend visualization within table rows, cards, and compact displays.

Depth Indicator

Order book depth visualization showing bid/ask volume at each price level.

Heatmap Cell

Color-intensity cells for market sector performance, correlation matrices, and risk grids.

Order Book

Full bid/ask price ladder with quantity, cumulative depth bars, and spread highlight. Designed for HD-density trading terminals.

Instrument Header

Full instrument identity strip — symbol, name, exchange, asset class, currency, and live session status. Used at the top of charts and order panels.

Leverage Selector

Interactive leverage input with risk-level color gradient and maximum allowed indicator. Risk disclosure updates dynamically per ASIC/ESMA regulatory constraints.

Margin Panel

Account margin overview with used/available balance, margin level percentage, and warning thresholds. Color shifts to amber at 150% margin level and red at 110% (margin call zone).

Order Status

State badges and inline status rows for the full order lifecycle. Each state maps to a deterministic UI color and icon to support rapid scanning in high-volume queues.

SL / TP Config

Stop Loss and Take Profit configuration with pip distance, price equivalence, and estimated P&L impact. The dual-input layout reduces cognitive load by showing both absolute price and distance simultaneously.

Volume Bar

Volume histogram showing today's trading activity relative to the 20-day average. Above-average bars are highlighted in accent color to signal unusual activity.

Time & Sales

Live execution tape showing individual trades with timestamp, aggressor side, price, and size. Color coding distinguishes buyer-initiated (green) from seller-initiated (red) trades.

Economic Calendar

Event row with impact tier indicator, consensus vs. previous values, and countdown. High-impact events trigger pre-event risk warnings in connected order entry components.

Session Clock

Multi-timezone market session display showing open/closed status for major exchanges. Critical for institutional traders managing positions across jurisdictions.

Allocation

Visual portfolio allocation breakdown across asset classes. The bar-based approach is preferred over pie charts in high-density trading UIs for accurate proportional comparison at small sizes.

Spread Display

Bid/ask spread visualization with pip value and cost-per-lot calculation. Tight spreads are shown in green; widening spreads during low liquidity shift to amber with a visual indicator.

Risk Matrix

Two-dimensional risk grid mapping position size against market volatility. Each cell's background intensity communicates aggregate risk level at a glance — designed to surface tail-risk concentrations without requiring mental arithmetic.

Alert Config

Price alert configuration with condition logic, notification channel selection, and expiry. Supports absolute price, percentage move, and crossover triggers for professional traders managing multiple instruments.

Trade History

Closed position history row with entry/exit prices, duration, and realized P&L. Color-coded P&L with directional indicators enables rapid performance scanning across hundreds of historical trades.

Candlestick

OHLC candle display with body, wicks, and data annotation. The side panel shows Open / High / Low / Close values with directional color. Used in chart tooltips, trade review panels, and daily summary cards.

Screener

Instrument scanner with filter chips and ranked results. The chip-based filter pattern reduces the form footprint compared to dropdowns while keeping all active criteria visible — critical for traders who run multiple simultaneous scans.

Funding Rate

Perpetual swap funding rate display with next payment countdown, annualized rate, and long/short cost indication. Positive rates mean longs pay shorts; negative rates reverse the flow.

API Credential

API key management card with reveal/conceal toggle, one-click copy, environment badge, and expiry indicator. Designed for the ACY Connect institutional B2B onboarding flow — credential issuance is the final step before a counterparty can connect their trading system.

Quote Comparison

Multi-broker quote comparison for best execution analysis. Highlights the tightest spread and lowest slippage per column. Used in institutional prime brokerage dashboards to satisfy best execution obligations under MiFID II.

Motion

Animation timing functions for transitions, micro-interactions, and loading states. Click each card to preview.

Accessibility

WCAG 2.1 AA baseline with Finance-Specific Accessibility (FSA) protocols for institutional environments.

Luminance Tapering

Color-Blind Safe Mode

Density

Components adapt across three density modes. HD for trading terminals, MD for dashboards, LD for client portals.

Infrastructure & State

API-driven UI architecture for high-concurrency financial environments. We design the data lifecycle, not just the visual layer.

Real-time State Orchestration

In institutional platforms like TradeX, the UI must handle 10,000+ data updates per second across 8-monitor setups. Our design system extends into the state machine layer to ensure consistency and performance.

Error & Liability Management

We categorize system failures into high-fidelity error states mapped to SEC/FINRA auditing requirements.

Figma Libraries

Source Figma files for the complete Zerologix component library and brand system.

Component Library

Brand System

Date Picker

Date and date-range selection for transaction filtering, reporting periods, and regulatory filing deadlines. Essential for compliance date queries and historical data analysis.

Select / Combobox

Three variants: a native styled Select for simple lists, a fully keyboard-navigable Combobox with type-ahead for instrument search, and a Multi-Select Tag input. All support grouped options and ARIA roles. Keyboard: ↑↓ navigate, Enter select, Esc dismiss.

Radio Group

Exclusive choice selection for order type, account tier, and risk classification. Supports both horizontal and vertical layouts with descriptive labels for compliance contexts.

Range Slider

Dual-handle range input for price filters, allocation percentages, and risk tolerance bands. Visual range display with real-time value updates for portfolio rebalancing.

OTP Input

One-time password entry field for two-factor authentication, wire transfer confirmation, and sensitive admin actions. Secure digit-by-digit input with auto-focus between fields.

Command Palette

Keyboard-driven command interface (Cmd+K) for power users navigating instruments, executing trades, and accessing settings. Type-ahead command search with grouped action categories.

Bottom Sheet

Mobile-first panel for order confirmation, filter selection, and quick actions. Dismissible sheet with drag handle and smooth scroll behavior for touch devices.

Resizable Panel

Drag the divider handle to resize panel areas. Used in trading workspaces for chart/order-book splits and multi-panel layouts. Supports both horizontal and vertical orientations with min/max constraints.

Sticky Header

Persistent context bar for instrument identity, account status, and active session info. Remains visible during scroll for quick reference to critical data.

Sidebar Navigation

Collapsible left sidebar with grouped navigation links, notification badges, and active state indicators. Supports deep nesting for multi-level information architecture.

Data Grid

Sortable, filterable, and paginated data grid for holdings, transaction history, and compliance logs. Column-based layout with sort indicators and selection checkboxes for bulk actions.

Tree View

Hierarchical account and portfolio structure with interactive expand/collapse, keyboard navigation, and optional checkbox selection. Used for fund-of-funds, sub-account hierarchies, and permission scopes.

Kanban Board

Workflow visualization for compliance task tracking, trade lifecycle states, and review pipelines. Drag-and-drop card management with status column organization.

Calendar View

Event calendar for earnings announcements, regulatory filings, dividend dates, and economic events. Visual event markers with details on hover or click.

Code Block

Syntax-highlighted code display for API documentation, FIX protocol messages, and WebSocket payload examples. Copyable code with line numbers and language identifier.

const order = {
  symbol: 'TYPESCRIPT',
  quantity: 250,
  type: 'LIMIT',
  price: 3421.50,
  timeInForce: 'GTC'
};

// Submit order to exchange
client.submitOrder(order)
  .then(response => {
    console.log('Order ID:', response.orderId);
  });

Notification Center

Aggregated notification feed for price alerts, compliance deadlines, and system messages. Categorized and dismissible notifications with priority indicators.

Confirmation Dialog

High-stakes action confirmation for trade execution, wire transfers, and account changes. Modal dialog with warning icon, destructive action button, and cancel option.

Context Menu

Right-click action menu for chart annotations, watchlist management, and quick trade execution. Floating menu with grouped actions and keyboard shortcuts.

Drag & Drop

Reorderable lists for dashboard widget arrangement and watchlist prioritization. Visual feedback during drag operations with drop zone indicators.

Keyboard Shortcuts

Keyboard shortcut reference panel for trading terminal hotkeys. Organized by category with searchable help modal for power users.

Design System Reference Map

This system was built by studying 8+ world-class design systems — from institutional finance to government compliance. Below: what each reference taught us and how it shaped component decisions.

Financial & Institutional

Enterprise & Data

Government & Regulatory

What This System Does Differently

MiFID II Suite EU 2014/65/EU

MiFID II (Markets in Financial Instruments Directive II) mandates pre-trade transparency, post-trade reporting, best execution disclosure, and transaction cost reporting. These components encode those requirements as interactive UI patterns — not PDF documents.

Pre-Trade Transparency — Best Execution Venues Art. 27

Investment firms must take all sufficient steps to obtain the best possible result for clients. This panel surfaces venue-level data so PMs can verify routing decisions before order submission.

Post-Trade Confirmation Art. 59 & 60

Investment firms must send trade confirmations no later than the first business day after execution. This confirmation component encodes all MiFID II-required fields.

Transaction Cost Disclosure Art. 24(4) & RTS 28

ESMA / FCA Risk Warning

ESMA (European Securities and Markets Authority) and FCA (Financial Conduct Authority) mandate specific risk warnings for retail CFD clients, including the percentage of retail investors who lose money. These are legally required — not optional copy.

Mandatory CFD Risk Warning ESMA 2018/796

Required at point of sale and on all marketing materials. The loss percentage must be calculated from the firm's own client data over the preceding 12 months and updated quarterly.

ESMA Leverage Caps by Asset Class ESMA 2018/796 Art. 4

Jurisdiction Simulator

The same Order Entry component renders differently across regulatory jurisdictions. Switch between EU (MiFID II/ESMA), UK (FCA post-Brexit), Australia (ASIC), and US (CFTC/FINRA) to see how compliance requirements alter the interface — warnings, leverage caps, disclosures, and required fields all adapt automatically.

What Changes Per Jurisdiction

Best Execution MiFID II Art. 27 / RTS 27 & 28

Investment firms must demonstrate best execution — the best possible result for clients considering price, costs, speed, likelihood of execution, size, and market impact. This panel shows the Smart Order Router's venue decision in real-time.

FCA CASS — Client Money CASS 7 & 7A

The FCA's Client Assets Sourcebook (CASS) requires firms to segregate client money from firm money. This panel surfaces client money status for both the end-client view and the RM operational view — distinct audiences, distinct information needs.

Client View — Account Safety

RM View — CASS Operational Status

Filter Bar

Chip-based active filter display with search, date range picker, and status toggles. Used in data grids, trade blotters, and compliance logs to surface active filter state clearly.

Split Button

Primary action button with a dropdown chevron for variant actions. Used for order entry (Buy / Buy Limit / Buy Stop), export (CSV / PDF / JSON), and report generation actions.

Audit Trail

Immutable chronological log of system events, user actions, and compliance decisions. Required for MiFID II best execution reporting, SOX audit support, and internal controls. Each entry is cryptographically linked to prevent tampering.

Live Data Integration

Design components consuming real production APIs — zero mock numbers. Every price, rate, and filing shown here is fetched live. Demonstrates loading skeletons, stale-data detection (72-second window), error boundaries with last-known-good cache, and WebSocket reconnection with exponential backoff.