Angular 19 Design System

finx-design-system

Production-ready component library for financial services applications. Themeable, white-label ready, built for enterprise.

47+ Components
37 Stories
5 Themes
7 White-Labels
6 Chart Types
Open Storybook Launch Demo App Launch Client Demo
Live Theme Preview

CSS Custom Properties

Fully themeable via standard CSS variables. No build step required to switch themes.

White-Label Ready

10 pre-built brand themes with logo, palette, typography, and shape tokens.

OKLCH Colors

Perceptually uniform color pipeline for consistent, accessible palettes.

Shape Tokens

Configurable border-radius, elevation, and spacing via design tokens.

Angular 19

Built with latest Angular, standalone components, and signals-ready architecture.

Component Catalogue

47+ components organized by function, all prefixed with fx-

Form Controls

12
  • fx-input-box Text input with masks
  • fx-textarea-box Auto-height textarea
  • fx-select-box Searchable dropdown
  • fx-checkbox-box Checkbox + indeterminate
  • fx-radio-box Radio groups
  • fx-switcher-box Animated toggle
  • fx-toggle-button Button toggle
  • fx-typeahead-box Autocomplete
  • fx-calendar-box Date/range picker
  • fx-datepicker Calendar views
  • fx-timepicker Time selection
  • fx-form-field-box Field wrapper

Buttons

4
  • fx-button Flat, outline, ghost
  • fx-flat-button Filled variant
  • fx-outline-button Outlined variant
  • fx-button-group Exclusive selection

Data Display

2
  • fx-card Content container

Charts

6
  • fx-bar-chart Horizontal bars
  • fx-line-chart Multi-series lines
  • fx-area-chart Area / stacked
  • fx-pie-chart Pie / donut
  • fx-radar-chart Spider chart
  • fx-stacked-bar-chart Stacked bars

Navigation

5
  • fx-sidebar Collapsible nav
  • fx-header-bar-box App header
  • fx-tab-container Dynamic tabs
  • fx-tab-panel Sticky header panel
  • fx-breadcrumbs Navigation path

Feedback

5
  • fx-snackbar Toast notifications
  • fx-modal Dialog overlays
  • fx-banner Alert banners
  • fx-notification-banner Notifications
  • fx-badge Labels & counts

Layout

4
  • fx-stepper Multi-step wizard
  • fx-visual-stepper Progress indicator
  • fx-orders-status-bar Status display
  • fxMargin / fxPadding Spacing directives

Utilities

4
  • fx-icon SVG icon registry
  • fxFont Font directive
  • session-timeout Idle detection
  • fxTooltip Hover tooltips

Theming & White-Label Support

Runtime theme switching via CSS custom properties. OKLCH color pipeline for perceptually uniform palettes.

CSS Themes

Apply a class to your root element to switch themes instantly. Click to preview.

Default
Blue
Green
Violet
Yellow
--brand-primary   --brand-secondary
--ui-primary   --ui-secondary
--system-signal-error | success | info
--accent-1 .. --accent-7
--radius-xs | sm | md | lg | xl | full
--shadow-raised   --shadow-card
--font-primary  

White-Label Brands

Full brand configurations with logo, palette, typography, and shape tokens.

Authentic
Corporate
HSBC
Invesco
Lion
Lion 2
Example

Demo Application

Current demo app plus a standalone client demo that uses the finx library with its own local theme.

Market Pulse Dashboard

/

Portfolio overview with KPI cards, liquidity charts, activity stream, and live orders table. Includes theme switcher.

Cards Stacked Bar Chart Data Grid Badge

Orders

/orders

Multi-step order placement form with instrument selection, sizing, and review. Recent orders status table.

Stepper Input Box Select Box Banner

Audit

/audit

Audit findings management with severity ratings, KPI summary cards, date pickers, and multi-step audit form.

Datepicker Badge Modal Cards

Reports

/reports

Report browser with collapsible sidebar filters, card grid results, preview modal, and run history table.

Sidebar Card Grid Modal Data Grid

Activity Monitor

/activity-monitor

System monitoring with collapsible sidebar nav, KPI cards, performance charts, event log, and workflow stepper.

Sidebar Area Chart Bar Chart Visual Stepper

Client Demo

/client-demo/

Standalone client-facing app with a local theme provider and finx outlined primary button.

Custom Theme Button Standalone App

Quick Start

Get up and running in three steps.

1

Clone & Install

Install dependencies with npm workspaces.

npm install
2

Build Library

Compile the design system library.

npm run lib:build
3

Launch

Run Storybook and library watch concurrently.

npm run dev