IDEATE & PLAN
DESIGN & DEVELOP
Corporate account services
Corporate virtual accounts
Spot rate booking
Finastra design system is flexible enough to support theming. It comes by default with an accessible light version suitable for most needs. Theming gives you control over colors and typography. For intensive app usage you may opt for the dark version of the theme.
You can create custom themes when your application needs to adapt to a different branding. By applying new primary, secondary and background colors, your application will already feel integrated. If necessary, you can go further and override every UI element and component styles.
Using the generated custom theme
With applications using Finastra's Design System
The generated custom theme is intended to provide the best developer experience for our Design System's users.
If that is your case, export the theme in CSS:
Then, it's only a matter of adding this style into a css file or into a <style> attribute.
With applications NOT using Finastra's Design System
If your application is not using our Design System, don't worry, you're still welcome ! 🤗
However, the name of our CSS Variables may not match your application, so we recommend using the Metadata export:
You now have a set of variables and associated color value. The goal is to set those values so that they impact your application.
There are several ways to do so depending on your context and constraints, but we would recommend using CSS Variables whenever possible.
It will then be as easy as iterating over the previously generated json and setting the relevant property for your application:
As described on Mozilla's documentation