Anfisa Pocovi°

(11)Design Systems

BusinessPad Design System

The component library behind every BusinessPad screen: Material UI, rebuilt around BusinessPad’s visual language, workflows and edge cases.

Company
AVK Consulting
Role
Product Designer
Year
2023–2025
Type
Design Systems
Library cover: BusinessPad, MUI and Figma logos, the title «MUI for BusinessPad», «Material UI 2024», and BP, v6.1.0 and Pro labels

01Overview

BusinessPad is a large ERP with many dense, data-heavy screens. Designing each one from scratch didn’t scale, so the product needed one shared library. It lives in Figma as one page per component, with names that match the code.

55
Component pages
9
Type styles
7
Input states
12
Status chip colours

Counted from the Figma file.

02My role

Product Designer

  • Tokens for colour, type and elevation
  • Components and their full state matrices
  • Table patterns
  • The AI “Magic” layer
  • Documentation on each component page

03The challenge

The library had to cover everything from buttons to process canvases, keep design and code describing the same thing, and give the AI assistant a visible place on the same components people already use.

  1. 01Most work happens in tables
  2. 02States are often designed too late
  3. 03AI-filled data must be recognisable

04Approach

4.1

One library for every BusinessPad screen

The UI kit is the component library the product is built from. It starts from Material UI and adapts it to BusinessPad: colour, type and elevation as tokens, then buttons, inputs, alerts, chat and tables, each with its full set of states.

MagicPad does not get a separate set of components. Anything the assistant fills or suggests uses Magic tokens on the components people already know. The same library is what the desktop product, the mobile app and CPQ are assembled from.

05Key flows

5.1

Foundations

Colour, type and elevation are tokens. Colours follow MUI’s palette with separate tokens per state; pastel colours are kept for statuses; some shadows are named after where they’re used.

Typography page: nine styles from h1 (32/40, 600) to badge_small (10/10, 400) with font size, line height, weight and letter spacingOpen full size
Typography
Colour tokens: primary and secondary with their states, common, grey, text, error, success, warning, info, background, action, neutral, special, pastel and additional violet palettes with hex and RGB valuesOpen full size
Colours
Elevation tokens: three general levels plus named shadows for SML, dropdown, drag and drop, toggle and active stage, with examplesOpen full size
Elevation

5.2

The AI layer

Anything MagicPad fills in or suggests uses Magic tokens: a blue-violet scale, gradients and their own states. Existing components get a magic variant instead of separate AI components.

Magic colour tokens: a blue-violet scale from Magic/800 to Magic/50, three magic gradients, magic outline and contained states, and magic backgroundsOpen full size
Magic colours

5.3

Components

Each component page shows the full matrix of types, sizes and states, followed by notes on when to use each variant.

Button matrix: primary, secondary, ghost and magic update buttons in contained, outlined and text variants, across default, hovered, focused, pressed and disabled states in large, medium and small sizesOpen full size
Buttons
Input matrix: default, comment, date and stepper inputs and their magic versions across default, hovered, focused, disabled, error, filled and read-only states, plus date range inputsOpen full size
Inputs
Alert page: info, success, error and warning alerts with title or description, closable and static, with usage notesOpen full size
Alerts
Bubble message component: my message, user message and AI message in text, documents, answer, system and forward types, with reactions, role badges and action buttonsOpen full size
Chat

5.4

Table patterns

Sorting, columns, rows, quick filters, inline editing, bulk actions, expandable rows and hover, documented and used in the product.

Table pattern: applied and available sorting in column headers, a column menu with pin and sort, and sort labels for numbers, text and datesOpen full size
Sorting
A process instance screen built from the library: section tabs, a finance table grouped into income and expenses with progress, dates, amounts and a hovered rowOpen full size
In the product

06Design decisions

  • MUI as the base

    Components keep Material UI names, so design and code describe the same thing.

  • States are part of the component

    Hover, focus, error, disabled and read only are designed with the default.

  • AI gets its own layer

    Magic tokens and variants mark what the assistant filled or suggested.

  • Documented on the page

    What it’s for, then variants, then usage notes.

07Outcome

The library grew into 120+ reusable components that BusinessPad, its mobile app, CPQ and MagicPad are built from.