ACI Worldwide Biller Design System

Complete Design alignment at every touchpoint for Browser & mobile.

DARK MODE VERSION

This complete design system was created to bring clarity, consistency, and scalability to a complex fintech platform. It combines a comprehensive UI kit with a robust style guide, carefully defining everything from color, typography, and spacing to reusable components and interaction patterns. Built for ACI’s Biller's workflows, the system ensures visual consistency, accelerates product development on screens The Skins Factory didn’t design, and enables teams to deliver trustworthy, accessible, and resilient experiences across web applications at scale. By designing both the application and its design kit, future screens can be created using the same components, patterns, and standards, ensuring consistency and cohesion as the product evolves. Built using Sketch.

The Design System

The Design System includes a full color palette with primary, secondary, neutral, semantic, and gradient colors, each defined for consistent usage across UI states and contexts. Typography is standardized using Source Sans Pro with clearly defined hierarchy, weights, and sizes for desktop and mobile, ensuring readability and visual rhythm. The system also documents core layout components, including desktop and mobile panels, section backgrounds, base containers, titles, icons, and status indicators, all with precise spacing, elevation, and shadow rules.

These Design System sections below provide detailed specifications for buttons, text buttons, and icon buttons across all states, along with size, typography, color, and elevation rules to ensure consistent behavior and accessibility. Form controls are fully standardized, including text fields, dropdowns, search patterns, tooltips, checkboxes, radio buttons, and toggles, each shown in multiple states with associated icons and validation feedback.

The system also includes structured patterns for notifications, info pop-ups, and security prompts, as well as navigational elements such as menus, date pickers, and wallet/payment selection menus optimized for both desktop and mobile. Together, these components form a robust, production-ready UI kit that enables predictable interactions, reduces design debt, and ensures a cohesive user experience (UX) across the entire billing application.

These sections capture advanced navigation, data presentation, and system feedback patterns. They define higher-order components such as tab bars, sliders, tree views, breadcrumbs, and list styles, establishing consistent navigation cues and hierarchical clarity across complex billing flows.

The system also standardizes labels, status indicators, payment icons, and a comprehensive icon library designed for desktop, mobile, and slide-in panels, ensuring semantic clarity and visual consistency at every touchpoint. In addition, these sections offer full-page table layouts for both light and dark navigation contexts, along with slide-in panels, overlays, and dialog boxes used for confirmations, warnings, errors, and transactional actions. Together, these patterns demonstrate how foundational UI elements scale into complete, production-ready page layouts, enabling predictable interactions, clear data visualization, and a cohesive enterprise user experience across the entire application.