Welcome to the Finastra design system repository. You will find here all the assets and ressources to build applications quickly and consistently. It will also help you easily applying Finastra branding and UX best practices.

🌍 For web

Web theme

@finastra/fds-theme

Our web theme is built over modern CSS standards and provides all foundations (colors, typography, elevations, spacings) to apply Finastra branding. It provides light/dark mode support out of the box and target WCAG AA accessibility rating.

Learn more

Web components

This implementation of the Finastra design system is framework agnostic (i.e can be used with any major framework: React, Vue, Angular, Svelte...). It's our futureproof solution for adopting Finastra branded components in your financial app. It uses the web theme.

Learn more

🅰️ For Angular

Angular theme

@finastra/angular-theme

A CSS implementation of our foundations specifically made for Angular.

Learn more

Angular components

@finastra/angular-components

An angular implementation of the Finastra design system components. It provides all the necessary components to make fast and cohesive financial apps.

Learn more

📦 Other ressources

UI kit on Figma

It all starts here for designers. The source of thruth for foundations and components. Useful for developers when looking for accurate specifications. Finastra UX & Design team provides also other ressources on Figma such as ideation tools.

Learn more

Power BI theme

A Microsoft Power BI theme specified in JSON.

Learn more

💌 Want to help?

Want to file a bug, contribute some code, or improve documentation? Excellent! Consider reading our contribution guidelines.