/ Overview
I supported the migration of an enterprise design system from GEL 2.1 to GEL 4.0, working closely with the internal design team at AEMO to modernise components, token structures, and interaction patterns. A key focus was introducing compact and comfortable density modes using Figma variables, primitives, and semantic tokens. Real-time energy market operators had flagged that comfortable layouts were too spaced for high-frequency workflows where fast scanning and decision-making are critical. The goal was to reduce manual design effort, improve cross-product consistency, and give the system enough flexibility to support different user contexts without requiring layout rebuilds.
/ Problem
GEL 2.1 had accumulated inconsistencies across components, spacing rules, and layout behaviours. Designers relied on manual overrides to adjust density, which created duplication and made the system harder to maintain at scale.
Feedback from real-time operators highlighted a more specific gap. Comfortable layouts used too much vertical and horizontal space for operational dashboards where large volumes of data needed to be visible at once. The system had no structured way to switch between density contexts, forcing teams to manage layout adjustments manually for each product screen.
/ My role
I worked as a UI/UX Designer within the design systems team, focusing on component auditing, token architecture, density modelling, and Figma variable structuring.
I collaborated with other designers to test and refine density modes across real product layouts, and aligned with engineering to ensure variables and component structures translated clearly into implementation. I also contributed to documentation and adoption guidance to support consistent uptake across teams.
/ Approach
Audit and system mapping
I reviewed existing GEL 2.1 components, spacing rules, and layout behaviours to identify inconsistencies, duplication, and areas requiring restructuring. This created a clear migration path aligned with GEL 4.0 standards.
Token architecture
I helped map primitive tokens into semantic variables, enabling spacing, sizing, and layout behaviour to be controlled at a system level rather than through manual overrides.
Density modelling
I defined compact and comfortable modes by adjusting spacing, component sizing, and layout density.
Compact mode supported high-density, information-heavy workflows. Comfortable mode prioritised readability and accessibility.
Both modes were structured through Figma variables, allowing designers to switch contexts without rebuilding layouts.
Density logic
As a team, we aligned on a general rule that compact values should reduce to roughly 50% of comfortable values where appropriate. This gave the system a predictable baseline across spacing, sizing, and component density.
Collaboration and adoption
I worked alongside designers to ensure the updated system was intuitive to use, and prepared documentation and usage guidance so teams understood when and how to apply each mode.
/
Design workflow
I worked closely with designers and aligned with existing system constraints to ensure the migration was both scalable and adoptable.
Audit existing components
I reviewed GEL 2.1 patterns, identified inconsistencies and duplication, and mapped what needed restructuring to align with GEL 4.0 standards.Map primitive and semantic tokens
I defined how base values connected to meaningful design decisions across spacing, density, sizing, and component behaviour.Build and test density modes
I created compact and comfortable configurations, then tested how spacing, hierarchy, and readability performed across real product screens.Resolve edge cases and exceptions
I identified where systematic rules broke down, such as optical alignment in button padding, and documented where semantic tokens needed raw value overrides.Support adoption and handover
I prepared usage guidance, component notes, and migration examples so designers and engineers could apply the updated system consistently.
Toggling density modes updates spacing and component behaviour instantly through semantic variables.
/ Challenges & Solutions
Comfortable layouts did not meet operator needs
By introducing compact and comfortable density modes controlled through semantic variables, this enables the system to adapt to different user contexts through a single toggle rather than manual overrides.
Optical misalignment in compact button padding
Defining button padding through semantic tokens with adjusted raw values where needed, maintaining the compact-to-comfortable density relationship while correcting optical balance.
Reducing manual effort without disrupting existing workflows
Structured the token and variable system so changes could propagate at a system level. This way, our design team could adopt updated components and switch density modes without reworking layouts, reducing migration friction.
/ Outcome & next steps
The migration shifted density from a manual, screen-level task to a system-level capability. Switching between compact and comfortable layouts became instant through variable-driven modes, replacing work that previously required hours of manual adjustment.
The updated system improved component consistency, reduced reliance on overrides, and created a more maintainable foundation for future product work. Designers within the team noted a significant reduction in effort when working across different layout contexts.
Next steps include validating compact density modes with real-time operators, focusing on how the layouts perform in high-frequency scanning and decision-making workflows. Insights from testing will inform further refinements before broader product adoption across the organisation.
