https://github.com/finastra/finastra-design-system

The Finastra Design System provided as a theme and components library
https://github.com/finastra/finastra-design-system

components css design-system design-tokens finance fintech sass theme ui ux-design web-components

Last synced: 5 days ago
JSON representation

The Finastra Design System provided as a theme and components library

• Host: GitHub
• URL: https://github.com/finastra/finastra-design-system
• Owner: Finastra
• License: mit
• Created: 2019-07-04T07:45:13.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-12-08T08:04:26.000Z (15 days ago)
• Last Synced: 2024-12-16T00:05:40.740Z (7 days ago)
• Topics: components, css, design-system, design-tokens, finance, fintech, sass, theme, ui, ux-design, web-components
• Language: TypeScript
• Homepage: https://design.fusionfabric.cloud/
• Size: 65.7 MB
• Stars: 124
• Watchers: 12
• Forks: 44
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
![](./.github/assets/banner_home.png)

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](./packages/fds-theme-web/README.md)

## 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](https://finastra.github.io/finastra-design-system/) in your financial app. It uses the web theme.

[Learn more](./packages/fds-components-web/README.md)

# 📦 Other resources

## 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](https://www.figma.com/@finastra)

## Power BI theme

A Microsoft Power BI theme specified in JSON.

[Learn more](./packages/fds-theme-powerbi/README.md)

# 💌 Want to help?

Want to file a bug, contribute some code, or improve documentation?

Excellent! Consider reading our [contribution guidelines](./CONTRIBUTING.md).