Banco ABC Brasil's investment app and internet banking platform were built by different teams over different timelines. The result: inconsistent spacing, mismatched components, and no shared design language between products. The task was to build a component library and layout framework that would bring both platforms into alignment.
Why Material Design as the foundation
The decision to build on Material Design was practical, not trendy. The development team already knew the system, which meant faster implementation and fewer miscommunications between design and code. It also gave us a documented baseline for accessibility and interaction patterns — things we'd otherwise have to define and maintain ourselves. The trade-off: less brand differentiation out of the box, which required custom color, typography, and component behavior rules specific to ABC's financial context.
Why 8px spacing and 12 columns
The 8px grid wasn't arbitrary. Financial interfaces are data-dense — tables, charts, form fields, and status indicators all compete for space. An 8px base unit provided enough granularity for tight layouts (like transaction lists) without creating visual noise. It also aligned cleanly with standard screen rendering, avoiding sub-pixel issues that made earlier designs look blurry on certain displays.
The 12-column layout served a specific need: the internet banking platform had to work across desktop and tablet, with components that rearranged without breaking. Twelve divides into halves, thirds, quarters, and sixths — covering every layout variation we encountered without requiring custom overrides.
One result of this foundation: responsiveness came almost for free. The combination of Material Design's adaptive patterns and the 12-column grid meant interfaces scaled across devices without per-breakpoint redesigns. Maintenance became faster too — shared components reduced the cost of adding features or updating existing ones.
What made this harder than a typical design system
The system standardized both products under a single visual and interaction language. Pages loaded more consistently because shared components reduced redundant code. But the real challenge wasn't technical — it was trust.
Banking products carry expectations that other categories don't. Every component had to communicate reliability before usability. That meant being conservative with animation (motion that feels dynamic in a consumer app feels reckless in banking), using color with discipline (red only for errors, never for decoration), and making sure information hierarchy was immediately legible without exploration.
The constraint that shaped this project: a design system for banking can't prioritize visual flair over trust and predictability. Every component choice had to balance brand personality with the conservative expectations of users who are, rightly, cautious about where they put their money.