BalanceReckon Design System

Introduction

Reusable solutions, components, and guidelines for common problems in Reckon applications.

Patterns are solutions consisting of documentation, components and guidelines intended to be used to solve common, recurring problems in Reckon apps.

This shared vocabulary is evolutionary and the basis of our design system, which exists to enable UI consistency, improve development efficiency and provide clear guidance for creating our products.

Some patterns are meant to be used as drop-in recipes whereas others are meant to be used as general guidelines when creating certain interfaces.

Illustration of Balance components composed together, creating small interfaces

Recipes

The patterns in this section are aimed at providing a copy/paste solution to common requirements and problems in Reckon apps. The code in these recipes is not expected to change much between apps, if it does then the recipe should be revised to include any new or changed use cases.

App header

Combobox with tags

General

General patterns that apply to design and development.

View accessibility : Guidelines to enable people with impairments and disabilities.

View forms : Guidelines for inputting data and configuring options.

View component composition : Guidance for composing Balance components flexibly within design-system constraints.

View test IDs : Use Balance core utilities to assign predictable test IDs for automated tests.

On this page