Designing Consistency: ATCO’s Internal Apps Design System
Architected IDES, ATCO’s internal design system, using Flutter’s default component set as the foundation for a scalable UI framework.
4 min read • 2021 - 2022 • ATCO.com
Intro
ATCO is known as a publicly-traded Canadian engineering, logistics, and energy holding company based in Calgary, Alberta. ATCO's subsidiaries include electric utilities, natural gas production, and distribution companies, and construction companies.
As ATCO expands its digital capabilities, the need for consistent, scalable design practices has grown. Previously, designers had to create a new design foundation for each project—often while juggling multiple initiatives, which led to duplicated work and inconsistent user experiences across products.
The IDES ATCO Design System, built in Figma, was created to solve these challenges by providing a unified and reusable design foundation. My approach focused on building strong master components rather than producing separate variations for every need. This ensures scalability, consistency, and easier maintenance as guidelines, branding, and accessibility requirements evolve.
With master components, updates can be made once at the source and automatically applied across all instances, enabling teams to work more efficiently and maintain a cohesive experience throughout ATCO’s digital ecosystem.
Development
At ATCO, most of our digital projects have been developed using Flutter since 2020. Flutter is a free and open-source UI framework from Google that enables developers to build applications for iOS, Android, and responsive web interfaces from a single codebase. Because many Material Design components are built directly into Flutter, teams can work efficiently across multiple projects with a consistent visual foundation.
Flutter provides a wide range of “out-of-the-box” components that require minimal customization. As a team, we prioritize keeping our implementations simple and streamlined, making only the adjustments necessary to support our design guidelines and maintain product consistency.
Given that both developers and designers often work on several projects simultaneously, this approach allows us to focus our time where it matters most. By minimizing custom work while still protecting the user experience, we maintain a balance between efficiency, consistency, and high-quality execution across ATCO’s digital ecosystem.
Design
The IDES ATCO Design System was developed using Figma as its primary design platform. Figma provides a powerful environment for designing interfaces, creating wireframes, documenting patterns, and collaborating across teams in real time.
In building the component library, my approach focused on establishing a strong foundation of master components. By prioritizing master components over dozens of isolated variations, we ensure a scalable and future-proof system. As design standards, business needs, and digital trends continue to evolve, our guidelines will naturally adapt over time.
Using master components allows us to apply updates in a centralized, efficient manner, modifying a single source component instantly reflects across all related instances. This not only reduces maintenance effort but also supports consistency, accuracy, and long-term sustainability of the design system.
Atoms & Mollecules
Our design system is structured around two primary categories: Atoms and Molecules.
Atoms represent the fundamental building blocks of the system. These are the smallest, indivisible elements, such as typography, color, spacing, and basic shapes, that serve as the foundation for all higher-level components.
Molecules are more complex components created by combining multiple atoms into functional UI elements. For example, typography styles and color tokens come together with shapes and interaction states to form a checkbox component. Each molecule inherits the characteristics of the atoms that compose it.
By organizing components in this hierarchical way, we ensure a consistent visual language, simplify decision-making, and make the system easier to maintain. This structure allows teams to build interfaces more efficiently while keeping the user experience unified across all products and platforms.
Typography
Flutter’s typography options remain somewhat limited when working strictly with the built-in Material 3 styles.
Material 3 provides a predefined set of text styles that are easy to customize; however, one constraint is that text colors must still be defined at the theme level rather than directly within each component.
The advantage is that Material 3 offers improved theming capabilities, allowing us to specify different color roles for light and dark modes, ensuring consistent contrast, accessibility, and brand alignment across themes. While the typography system is more flexible than previous versions, it still requires thoughtful configuration to maintain consistency across projects.
Colours
A primary color is the core color used throughout an application. It appears most frequently across screens and components and serves as the foundation of your product’s visual identity. The primary color palette is applied to key interactive elements such as CTAs, links, input fields, active states, and other high-visibility UI components.
In our system, the 500 tint represents the primary color for each color range, providing a balanced and accessible default tone.
A variant (secondary) color offers additional flexibility to introduce accents and subtle emphasis within the interface. While optional, variant colors should be used thoughtfully and sparingly to maintain visual harmony. Variant colors for each range are represented by the 200 and 700 tints, allowing designers to choose lighter or darker accents depending on the context.
Variant colors are ideal for:
-
Floating action buttons
-
Selection controls such as sliders and switches
-
Highlighting selected text
-
Progress indicators
-
Links, call-to-action states (hover and focus), and section headlines
Using this structured approach to color ensures consistency, strengthens visual hierarchy, and supports an accessible and cohesive experience across the entire product ecosystem.
Grids with 'Flutter'
-
Paginated Data Table
Flutter’s Paginated Data Table widget allows developers to display tabular data with built-in pagination. A page indicator is located at the bottom-right corner, and developers can set a maximum number of rows per page. If the number of columns exceeds the screen width, horizontal scrolling is supported, ensuring all data remains accessible.
-
Responsive Layouts
Flutter’s Responsive widget enables flexible layouts across different screen sizes. Since each project and screen may have unique requirements, components can be customized for specific breakpoints to ensure optimal display on any device.
-
Card Width Control
Flutter allows developers to define the maximum width of each card. For example, if three cards are intended for a desktop layout, but the user’s screen exceeds the original Figma artboard width (1440px), the layout can automatically adjust to display four cards.
-
Cards per Row per Breakpoint
Developers can also define the number of cards per row for each breakpoint. For instance, if three cards are specified for a desktop layout and the user’s screen is larger than the original design width, the layout will maintain three cards per row. The cards will expand proportionally to fill the available space while preserving margins, ensuring a consistent and visually balanced design.
