Institutional Finance Design System

AI Skill Set

Forty repeatable, AI-assisted working methods for absorbing unfamiliar, C-level, cross-functional work quickly — while keeping the qualified professional in the loop. Each is downloadable as a Markdown skill file, grouped into eight domains and searchable below. Every one is a working method, not professional advice.

Runs in Claude ChatGPT Codex Gemini Antigravity Cursor Grok DeepSeek Qwen Figma MCP Hermes Agent OpenClaw NVIDIA Hugging Face Ollama n8n Dify ComfyUI Cline OpenCode Monica Z.ai

Each skill is a plain Markdown file — paste it into any assistant, load it as a Claude skill or agent brief, or serve it to a local open-weight model; nothing here is locked to one vendor. Logos identify third-party tools for context; no affiliation or endorsement is implied.

Eight concept applications

The catalog above isn't speculative. Every primitive is stress-tested across eight self-initiated concept applications spanning adjacent regulatory regimes — Reg BI, FINRA 2111, FATF, BSA, SEC 17a-4, SR 11-7, MiFID II, CSDR, FIX 4.4, SWIFT MT54x, T+1 settlement. One system, eight applications. Click any card to open the case study.

Beyond these eight concept applications, the same component contract is in shipped production at ACY Securities (150-component live system, 4 years, 100K+ traders, 0 material UX-tied findings), ACY Connect (FIX 4.4 institutional API, 12+ prime-broker clients), Finlogix Market Data (8 jurisdictions, 40+ markets), LogixTrader (4 audience types, multi-tenant OAuth widgets), and TradingCup (10K+ followers, 0 ASIC findings, ASIC RG 268 disclosure compliance). One catalog · eight concept stress-tests · five production deployments.

Beyond the enterprise — open-source engines

This catalog is built for regulated finance. But the discipline behind it — tokens-first, accessible by contract, machine-readable — is how I build everywhere. Three open-source tools, all MIT, all usable by a human and by an AI agent (MCP server + llms.txt): a design-system API, a creative animation engine, and a React component registry. The point is range: I don't only design rigid institutional surfaces — I think, design, and ship across the whole spectrum, in the open.

// All four are git clone-able and npx-runnable today — and every one ships an MCP server, so an AI agent can use it without reading a line of docs. Human-editable, machine-operable. The same hand that builds a regulated trading surface built these.

About this system

An editorial stance — why this catalog exists, who it's for, and what it isn't.

AI-Native Development

One machine-readable contract. A designer, a front-end engineer and an AI agent all read it — and none of them can invent a hex code or drop a disclosure.

A gallery is a deliverable. This is a contract — tokens as CSS / JSON / Tailwind, every component carrying its usage rules, props, a11y notes and the regulation it serves, served live over MCP. The speed comes from the agent. The correctness comes from the system, not from hoping the model gets it right.

The decisive gap

One token, every layer

Change a token once and it threads through every layer the agent touches — the same value, no drift. Here is --accent expressed simultaneously across the stack:

One contract, three consumers

A designer, a front-end engineer and an agent are not three workflows. They are three doors onto the same bytes.

The design system is the MCP server

Not documentation an agent reads. Tools an agent calls — and that can answer no. Click a tool.

The machine layer — fetchable, not described

This page spends a lot of words claiming an agent can read the system. So here is the system, as two files an agent can actually GET.

The contract, served as JSON

251 categories · 9 domains · 122 registers · 84 cite a regulation · 20 frameworks · 64 tokens × 2 themes

eds/tokens.json →

Every design token, both themes, exactly as the page resolves them. Not a copy that will drift — it is parsed out of the stylesheet this page renders with.

eds/components.json →

Every category, its domain, and — where it has one — the four cells: when to use, when not to, the a11y contract, and the regulatory anchor. Counts are read off the live page, never typed in.

Readable by whatever you already run

Claude OpenAI Codex Gemini Antigravity Cursor Figma Grok DeepSeek Qwen Hermes OpenClaw

Logos identify third-party tools; no affiliation or endorsement is implied. The point is not the list — it is that plain JSON over HTTP needs no integration at all. Anything that can fetch a URL is already a client.

Direct fetch works today

No server, no SDK, no install. Two GETs and the agent has the whole contract.

# the tokens, both themes curl https://edwson.com/eds/tokens.json # the component contracts, with anchors curl https://edwson.com/eds/components.json # then, in the agent: "Use only tokens from tokens.json. Before you place a component, read its register in components.json — and obey `whenNotTo`."

MCP server the runnable one

The static files are the contract. The server is the contract plus the verbs — it can scaffold, lint, and refuse.

// claude_desktop_config.json { "mcpServers": { "eds": { "command": "npx", "args": ["-y", "eds-mcp"] } } } // 29 tools · 65 contracts / 14 domains // zero deps · also an OpenAPI 3.1 REST API

The difference between the two files and the server is the word no. JSON can only be read. The server can be asked — and compliance_check can come back BLOCK. A contract an agent can read is useful; a contract an agent can be refused by is governance. eds-mcp on GitHub →

The 2026 build loop

1. Agent ingests the contract
   Human

   Points the agent at the token export + Storybook + MCP server.
   AI

   Loads tokens, component metadata, and the 4-state data contracts.
   System guarantees

   One source of truth — no scraping screenshots, no guessing.
2. Human states intent
   Human

   Plain language: “order ticket, ASIC risk warning, live price.”
   AI

   Maps intent to the right components by their usage metadata.
   System guarantees

   “When-not-to-use” rules stop the wrong component.
3. AI assembles from tokens
   Human

   Reviews the assembly, not the hex codes.
   AI

   Composes components referencing tokens — never raw values.
   System guarantees

   Token-only: a theme or rule change still propagates later.
4. Compliance is enforced
   Human

   Doesn't have to remember the rule — it's structural.
   AI

   Can't ship the surface without its required disclosure primitive.
   System guarantees

   Risk warnings & KYC gates can't be styled away.
5. Live data binds
   Human

   Supplies the stream endpoint; the contract does the rest.
   AI

   Wires the documented schema with loading / empty / error / stale states.
   System guarantees

   Real data streaming, not happy-path mocks.
6. Human signs off at the diff
   Human

   Approves a small, readable diff and owns the outcome.
   AI

   Surfaces exactly what changed and why.
   System guarantees

   SR 11-7 / SEC 17a-4 effective-challenge discipline on every commit.

How the whole build pipeline changes with AI

The component contract is one half. The other half is what AI does to the whole product pipeline. The classic flow is linear and finds problems late; with AI in the loop, every stage gains a draft-ahead and a predict-ahead layer, the stages overlap instead of queuing, and problems shift left — caught at design time, not discovered at QA/UAT where a fix costs the most.

Landing on a system you didn’t build

Most of the job is not designing the next screen. It is working out why the last one looks like that — fast, and without breaking anything.

The sprint, with the contract in the middle

Why the speed doesn't cost quality

Prompt → component

For the enterprise: lower AI cost, total consistency

The same contract that makes an agent accurate makes it cheap. Serving targeted, reference-based slices over MCP — instead of pasting CSS and screenshots into the agent every turn — cuts both input and output tokens, and the correctness of the contract collapses the correction loops that quietly burn most of the budget. A measured example: a single targeted token slice is 78% smaller than shipping the whole token file.

The second lever: model-tier routing & output discipline

The calculator above is the retrieval-side saving — hand the agent a targeted slice instead of pasting whole files. The generation side is a second, independent lever that compounds with it:

Auto-update & deploy

Change a token once; it reaches every consumer with no rebuild — because apps, docs, and agents all read the same contract and pull only the delta.

Consistency, guaranteed

Data residency — run the whole stack on-prem

When data can't leave the building — regulated finance, privacy-bound enterprises — the same MCP + agent stack runs entirely on your own hardware, not a vendor cloud.

How to drive it

Domain-Expert Orchestration Studio

Pick a client brief. Watch the right domain experts — and only the right ones — engage, call eds-mcp, and return a precise, quantified build plan. The point a recruiter should take away: I read a need from several angles and route it through a multi-agent team that pulls exactly the components, tokens and regulatory anchors the brief requires. Not a token dump. Not a generic answer.

Why it’s fast — the queue, not the typing

I am not typing faster. The dependency graph is shorter, and I am only in it at the gates.

Changelog & Version

SemVer · breaking changes called out · regulatory anchors per release.

Tokens · Code Export

Every foundation token in three formats — CSS custom properties, JSON, and Tailwind config. Copy whatever your stack needs.

Live Density Switcher

Color tokens · with WCAG contrast

Core palette in dark mode. Each pair carries its computed contrast ratio against --bg = #0a0a12. AA = ≥4.5 normal text · AAA = ≥7.0.

:root {
  /* Core surfaces (dark mode) */
  --bg:        #0a0a12;
  --surface:   #12121e;
  --surface2:  #1a1c2e;
  --border:    #1e2030;
  --border2:   #2a2d42;

  /* Text */
  --text1:     #e8eaf0;
  --text2:     #8c95a6;
  --text3:     #5a6678;

  /* Brand + signal */
  --accent:    #6495ed;
  --accent2:   #7aabff;
  --accent-fg: #0a0a12;

  /* Semantic */
  --green:     #16825d;
  --red:       #c5303f;
  --gold:      #C9A959;
  --purple:    #7b1fa2;
}

{
  "color": {
    "bg": "#0a0a12",
    "surface": "#12121e",
    "surface2": "#1a1c2e",
    "border": "#1e2030",
    "border2": "#2a2d42",
    "text": {
      "1": "#e8eaf0",
      "2": "#8c95a6",
      "3": "#5a6678"
    },
    "accent": "#6495ed",
    "accent2": "#7aabff",
    "accentFg": "#0a0a12",
    "green": "#16825d",
    "red": "#c5303f",
    "gold": "#C9A959",
    "purple": "#7b1fa2"
  }
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        bg:       '#0a0a12',
        surface:  '#12121e',
        surface2: '#1a1c2e',
        border:   '#1e2030',
        border2:  '#2a2d42',
        text: {
          1: '#e8eaf0',
          2: '#8c95a6',
          3: '#5a6678',
        },
        accent:    '#6495ed',
        accent2:   '#7aabff',
        accentFg:  '#0a0a12',
        green:     '#16825d',
        red:       '#c5303f',
        gold:      '#C9A959',
        purple:    '#7b1fa2',
      }
    }
  }
}

Typography tokens

7-step modular scale (1.25× ratio). System fonts for body, monospace for market data and code.

:root {
  /* Family */
  --font:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:  'SF Mono', 'Fira Code', 'Courier New', monospace;

  /* Size scale (1.25× ratio) */
  --text-xs:      0.75rem;   /* 12px · captions, kbd */
  --text-sm:      0.875rem;  /* 14px · UI default */
  --text-base:    1rem;      /* 16px · body */
  --text-lg:      1.125rem;  /* 18px · H3 */
  --text-xl:      1.5rem;    /* 24px · H2 */
  --text-2xl:     2rem;      /* 32px · H1 */
  --text-display: 3rem;      /* 48px · hero */

  /* Weight */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line-height */
  --leading-tight:   1.2;
  --leading-snug:    1.45;
  --leading-relaxed: 1.7;
}

{
  "font": {
    "family": {
      "sans": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
      "mono": "'SF Mono', 'Fira Code', 'Courier New', monospace"
    },
    "size": {
      "xs": "12px",
      "sm": "14px",
      "base": "16px",
      "lg": "18px",
      "xl": "24px",
      "2xl": "32px",
      "display": "48px"
    },
    "weight": {
      "light": 300,
      "regular": 400,
      "semibold": 600,
      "bold": 700
    },
    "leading": {
      "tight": 1.2,
      "snug": 1.45,
      "relaxed": 1.7
    }
  }
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
        mono: ['SF Mono', 'Fira Code', 'Courier New', 'monospace'],
      },
      fontSize: {
        xs:      ['0.75rem',  { lineHeight: '1.45' }],
        sm:      ['0.875rem', { lineHeight: '1.45' }],
        base:    ['1rem',     { lineHeight: '1.7'  }],
        lg:      ['1.125rem', { lineHeight: '1.45' }],
        xl:      ['1.5rem',   { lineHeight: '1.2'  }],
        '2xl':   ['2rem',     { lineHeight: '1.2'  }],
        display: ['3rem',     { lineHeight: '1.2'  }],
      }
    }
  }
}

Spacing tokens · 4px base grid

Every gap, padding, and margin maps to this scale. Multiplier of 4 means 1px shifts compound predictably.

:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
}

{
  "space": {
    "1": "4px",
    "2": "8px",
    "3": "12px",
    "4": "16px",
    "5": "24px",
    "6": "32px",
    "7": "48px",
    "8": "64px",
    "9": "96px"
  }
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        1: '4px',
        2: '8px',
        3: '12px',
        4: '16px',
        5: '24px',
        6: '32px',
        7: '48px',
        8: '64px',
        9: '96px',
      }
    }
  }
}

Motion tokens · duration + easing

Four durations, three easings. Respect prefers-reduced-motion via the --motion-allow guard.

:root {
  /* Duration */
  --duration-fast:    120ms;  /* hover · focus */
  --duration-base:    200ms;  /* default UI */
  --duration-slow:    320ms;  /* drawer · modal */
  --duration-slower:  500ms;  /* page transitions */

  /* Easing */
  --ease:        cubic-bezier(.2, .8, .2, 1);   /* default */
  --ease-out:    cubic-bezier(0,  0,  .2, 1);   /* enters */
  --ease-in:     cubic-bezier(.4, 0,   1,  1);  /* exits */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-base:   0ms;
    --duration-slow:   0ms;
    --duration-slower: 0ms;
  }
}

{
  "motion": {
    "duration": {
      "fast":   "120ms",
      "base":   "200ms",
      "slow":   "320ms",
      "slower": "500ms"
    },
    "easing": {
      "default": "cubic-bezier(0.2, 0.8, 0.2, 1)",
      "out":     "cubic-bezier(0, 0, 0.2, 1)",
      "in":      "cubic-bezier(0.4, 0, 1, 1)"
    }
  }
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      transitionDuration: {
        fast:   '120ms',
        base:   '200ms',
        slow:   '320ms',
        slower: '500ms',
      },
      transitionTimingFunction: {
        DEFAULT: 'cubic-bezier(0.2, 0.8, 0.2, 1)',
        out:     'cubic-bezier(0, 0, 0.2, 1)',
        in:      'cubic-bezier(0.4, 0, 1, 1)',
      }
    }
  }
}

Elevation tokens · 4-step shadow ladder

Subtle gold-tinted shadows on dark surfaces for institutional warmth without losing data legibility.

:root {
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.45);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.40), 0 0 0 1px rgba(201,169,89,0.04);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.55), 0 0 16px rgba(201,169,89,0.08);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.65), 0 0 24px rgba(201,169,89,0.12);

  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-pill: 9999px;
}

{
  "shadow": {
    "sm": "0 1px 2px rgba(0,0,0,0.45)",
    "md": "0 4px 12px rgba(0,0,0,0.40), 0 0 0 1px rgba(201,169,89,0.04)",
    "lg": "0 12px 32px rgba(0,0,0,0.55), 0 0 16px rgba(201,169,89,0.08)",
    "xl": "0 24px 64px rgba(0,0,0,0.65), 0 0 24px rgba(201,169,89,0.12)"
  },
  "radius": {
    "sm": "4px",
    "DEFAULT": "8px",
    "lg": "12px",
    "pill": "9999px"
  }
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        sm: '0 1px 2px rgba(0,0,0,0.45)',
        md: '0 4px 12px rgba(0,0,0,0.40), 0 0 0 1px rgba(201,169,89,0.04)',
        lg: '0 12px 32px rgba(0,0,0,0.55), 0 0 16px rgba(201,169,89,0.08)',
        xl: '0 24px 64px rgba(0,0,0,0.65), 0 0 24px rgba(201,169,89,0.12)',
      },
      borderRadius: {
        sm:   '4px',
        DEFAULT: '8px',
        lg:   '12px',
        pill: '9999px',
      }
    }
  }
}

Color

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

Core Palette

Live Theme Switcher

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.

Stock Split

Forward-split notice: the ratio, the record and payable dates, and the before/after that proves position value is unchanged.

Reverse Split

Consolidation notice with the fractional-share cash-in-lieu term and the listing-compliance reason stated, not implied.

Dividend Declaration

The four dates that govern a dividend — declaration, ex, record, payable — with per-share amount, yield, and tax character.

Dividend Payout

The settled credit: gross, withholding, and net stated in words — plus the reinvestment (DRIP) alternative and its price.

Ex-Dividend Timeline

The corporate-action lifecycle as an ordered, labelled sequence — declaration to payable — with the current stage marked in text.

Rights Issue

A rights offering: entitlement ratio, subscription price, the deadline, and what lapses if the holder does nothing.

Corporate Action Election

A voluntary election between options — cash or stock — with the deadline, the default if the holder is silent, and the irrevocability stated.

Motion

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

Animation Types

A motion taxonomy for production UI: entrance, exit, feedback, loading, data-change, and spatial transitions. Each pattern names its duration, easing, risk, and reduced-motion fallback.

Animation (SaaS)

Five complete interaction studies for SaaS product moments — command execution, plan upgrade, inbox triage, integration handshake, and workspace provisioning. Pure CSS + vanilla JS, state-driven (data-state), token-themed for both themes, with prefers-reduced-motion fallbacks. Motion here is product feedback, not decoration: every study animates a moment where the user needs confirmation that the system heard them.

Animation (Media)

Five interaction studies for media products — player morph, chapter scrubbing, karaoke captions, story rings, and waveform mood states. Same contract as every animation in this system: pure CSS + vanilla JS, data-state driven, dual-theme tokens, reduced-motion safe. Media motion has one extra duty: it carries the content's emotion without upstaging it.

Count-Up Numbers

Animated number reveal for stats and KPIs — requestAnimationFrame with an ease-out curve and tabular numerals so the layout never jitters. Under prefers-reduced-motion the final value renders instantly.

Easing Playground

The same 320px journey under five easing functions — linear, ease-out, ease-in-out, spring, and bounce — implemented in pure JS (rAF) so spring physics aren't faked with keyframes. Watching the difference is the fastest way to teach motion taste.

Toast Queue (Live)

A working toast manager, not a static mock: spawn, stack (max 3, oldest evicted), auto-dismiss with a visible progress bar, pause-on-hover, manual close — and a split aria-live strategy (polite for info/success, assertive for critical).

Pointer Tilt Card

A 3D tilt that tracks the pointer with damped rotation and a radial glare that follows the cursor — pure JS transforms, springs back on leave, and switches itself off for touch devices and reduced-motion users.

Magnetic Button + Ripple

Two press-feedback classics done with restraint: a magnetic pull capped at 6px that eases the button toward the cursor, and a ripple from the press point. Both are decoration on top of a fully functional, keyboard-perfect button.

Stagger Text Reveal

Character-level entrance for display headlines: JS splits the line into spans, each rises and settles with a 28ms cascade. The original string stays in the DOM for assistive tech; the animated copy is decorative.

Typewriter Reveal

Types a headline out character by character behind a blinking caret — JS appends one glyph at a time while the full sentence stays in the DOM for assistive tech. The animated copy is decorative.

Decode / Scramble

A cipher that resolves left-to-right: each position cycles random glyphs, then locks to its real character — the “decrypting” register, done with restraint.

Word Fade-Up (blur)

Reveals a line word by word, each rising out of a soft blur into focus — a calmer, more legible cascade than per-character motion for longer headlines.

Mask Wipe

The whole line is revealed by a hard-edged wipe sweeping left to right via animated clip-path — no character splitting, so the text stays selectable and natively readable.

3D Char Flip

Each character flips up on its X-axis from flat to upright with a staggered cascade — a dimensional cousin of the stagger reveal for high-impact hero moments.

Contrast Checker (Interactive)

Pick any foreground and background: the checker computes the WCAG relative-luminance ratio live and grades it against AA and AAA for normal and large text, plus the 3:1 non-text minimum. The math is the spec formula, not an approximation.

Focus Trap (Dialog Pattern)

A live dialog focus trap done right: Tab and Shift+Tab cycle inside, Escape closes, and focus returns to the trigger that opened it. The trap is the easy half — the restore is the half everyone forgets.

Live Region Announcer

Status messages that screen readers actually hear: a polite region for ambient updates and an assertive region for must-know-now — with a visible log so sighted reviewers can verify what was announced and when.

Form Error Summary

On failed submit: focus moves to a summary box that names every error as a link; each link jumps to its field; each field carries aria-invalid and an aria-describedby message. The pattern that turns 'something is wrong' into a fixable list.

Skip Link

The first Tab press on a page should offer a way past the navigation. Visually hidden until focused, then unmissable — try it: click into the demo and press Tab.

Touch Target Size

24px icons feel fine with a mouse and fail with a thumb. Toggle the overlay to see each control's true hit area against the 44×44 reference — and how padding grows the target without growing the icon.

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+ reference-grade design systems — from institutional finance (institutional terminals, Stripe) to government compliance (Gov.uk, USWDS). Below: what each reference taught us and how it shaped component decisions.

Financial & Institutional