10th October 2023

UX/UI Design in Capital Markets #4: Unveiling the Mechanics: A Technical Intro to Adaptive’s UI Starter Kit

Part of the new blog series: Exploring UX/UI Design in Capital Markets

A Technical Intro into Adaptive’s UI Starter Kit

We previously discussed how to create successful products and the crucial role of Design Systems and UI Kits in Financial System design. Now, let’s dive into the Mechanics of the Adaptive UI Starter Kit.

What is the UI Starter Kit?

The Adaptive UI Starter Kit is a tokenized design system template developed and used by Adaptive to seed projects, start designing workflows, and scale design system implementations at speed.

Designers begin with a curated collection of UI components in their prototyping tool. The same components are wired into the best-of-breed, front-end build tooling for developers – coupled in implementation by design tokens. These tokens describe every detail of the styling implementation, from the color palette to the spacing.

How does it work?

A design system can be thought of as a collection of design decisions encapsulated in code. The code is responsible for mapping core design elements, like brand color or font family, to other system elements, like contrast text color or theme based shading. In our systems, each decision is applied as a design token, or as a mapping of a token or collection of tokens. This brings a hierarchy and scalability to the system – one base color is capable of providing all alternate shades and accessibility compliant contrast text shades for example.

Those tokens are then mapped to a set of components we can split into two basic categories:

1) finance-specific components, and

2) core components.

Core components are necessary elements of an application such as display text, basic inputs, or buttons. Finance-specific components include elements we are called upon regularly to create a new frontend. These include data grids, notional inputs, and charting elements. Typically this mapping is done in React and Typescript, though the practices could of course be adopted for other frameworks.

Benefits of modern design principles

By mapping our components to design tokens, the entire process of implementing or modifying designs changes for the better. To start off a project, brand requirements drive themes to define new token values. These tokens update the components to a fresh look and feel, and developers can get working on functionality. As feedback comes in, designers can modify at any level – a components token set, a token value, or even a base color – to update styles with any level of granularity.

The real power shows when we export these design tokens from the design tool to our application code. With this JSON, we create a Typescript object to consume in frontend code. Now, implementation parity exists not only in the final visuals, but in the actual mapping of tokens to an element. Not to mention type checking and IntelliSense as huge developer productivity boosts. True source code integration is possible as well. In our team’s work, we connect our design tools directly to our source code in Github, allowing designers to open PRs, kick off CI/CD, and preview the build.

This does a great deal to bridge communication between design and development teams. When teams collaborate, change is less costly and just more exciting. This is some of the derivative acceleration we capture in the processes seeded by the UI Starter Kit.

Change is good, in frontend delivery

One place you do not want to be with your frontend is unable to change. Acceleration is good, but if you are rushing to a place from where you can no longer innovate it likely wasn’t worth it. With many low code frontend platforms, it is only a matter of time before every bit of the UI has been replaced by custom code. That process is more bug ridden and painful than many stubborn ones.

The UI Starter Kit aims to help design and development teams maintain velocity. Being able to overhaul a screen or rebrand for a new release without overhead is a powerful solution. If a low-code platform is the temporary ramp you put in place to transport materials over a waterway, the UI Starter Kit is the first set of holes and pillars you put in place to start laying a real bridge.

Much of the confidence in the speed of delivery comes from the governance built into the design system itself. By embedding things like contrast text calculation, we can embed ADA compliance into the process from the start. If a design system is a capture set of decisions, think of our UI Starter Kit as those decisions wrapped in experiences.

So how does this all apply to the real world? Our next blog dives into a simple example: The Making of a Button!