finx-design-system — Angular Component Library

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

3

fx-data-grid Enterprise table
fx-card Content container
fx-card-grid Card layout

Charts

6

Navigation

5

fx-sidebar Collapsible nav
fx-header-bar 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 --base-spacing

White-Label Brands

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

Authentic

Corporate

HSBC

Invesco

Lion

Lion 2

Example

Demo Application

5 full pages showcasing real-world financial services UI patterns.

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

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