Senior UI Designer · Aegon UK
AXLE Design System
A scalable, accessible design system for one of the UK's leading financial services providers. Built from the ground up after their rebrand.
What came out of it
60%
of the design system components. I contributed across the majority of core patterns.
45%
I owned from start to finish, from tokens right through to the docs.
2
Tokens Studio workshops to support adoption of the new workflow across design and engineering.
The challenge
Aegon had completed a rebrand, but the existing design system could not support consistent delivery across products and co-branded experiences. Teams were duplicating patterns, handoffs were inconsistent, and there was no shared token language for colours, spacing, or typography.
As Senior UI Designer, I led the definition and implementation of AXLE with UX, engineering, and brand stakeholders. The aim was to establish a tokenised system and governance approach that improved consistency, reduced rework, and made iteration safer at scale.
What we set out to achieve
- Consistency across co-branding and products, so design and dev stay aligned
- Faster iteration with reusable components, centralised styles, and clear documentation
- Accessibility by default. WCAG-compliant components out of the box
- Smoother collaboration. Shared tokens, developer-ready specs, aligned workflows
- Efficient scaling. Brand updates without manual component rework
- Coherent experiences. Components validated through UX use cases and AI-driven testing
How we approached it
I structured delivery across three parallel streams: token architecture, rebrand validation in real product contexts, and component modernisation. We validated token decisions in live UI scenarios before broader roll-out, aligned naming conventions with engineering, and introduced governance so the system could evolve without fragmenting.
Design Tokens
Core, semantic, and component-level tokens so design and engineering share one language. Co-branding = swap values, keep names.
Rebranding
Stress-tested the new palette in real product screens (login, dashboard, icons) to see what worked for task-focused UI.
Component Redesign
Redesigned form inputs, cards, and more. All token-driven, fully documented, and built for both customers and the internal UX team.
Token workflow
We needed a structure that worked for both design and engineering. Design needed core, semantic, and component-level sets with clear ownership. Engineering needed stable token names; only the values change for co-branding. Here's the workflow we followed:
Audit + scope
List what needs tokens now vs later (colour, type, spacing, radius, shadow, motion).
Token taxonomy + naming
Define core, semantic, and component tokens. Align naming between dev and design.
Build foundations
Create core tokens first, map semantic tokens, add component tokens for high-use components.
Set up modes/themes
Add light/dark and brand A/B modes. Validate contrast per mode for WCAG.
Code + DS sync
Export tokens to JSON and variables library.
Apply to components
Update components to reference only tokens. Document token usage per component.
Governance & change flow
Request → impact assessment → approve → version + release notes.
Adoption + QA
Pilot in a product, address gaps, rollout, monitor usage and drift.
The result was a Token Document that defined everything from border radius and breakpoints to core colours and theme values.
Rebranding explorations
I ran UI explorations on the login page (customer, adviser, employer), dashboard layouts, and duo-colour icons. The aim: see how the new brand palette held up in real product screens.
Key result
The full marketing palette wasn't suitable for the product as-is. We needed to restrict colour usage and define colourways per user role. Bright primary colours work best as accents in task-focused UI. Saturation and contrast were the main constraints.
The duo-colour icon idea wasn't adopted by the brand team, but it helped us understand how to treat functional UI elements differently from marketing assets.
Component redesign
This was the most hands-on part of the work. I redesigned form inputs and cards with full token integration, clear states, and developer-ready specs. Each component doc listed every token it used.
Form inputs
Token-driven, all states documented, specs ready for dev. The variable library and token structure were validated through these components.
Cards
Aegon's cards are information-dense and used across many journeys. I abstracted them to a simple base structure with sections, then defined nested component groups. Result: cards that work for customers (clear structure, accessibility) and for the UX team (flexible, not over-complicated).
I also designed for future updates. The system can evolve without breaking.
What I led and delivered
- Led system strategy from token definition through implementation alignment with engineering.
- Drove cross-functional decisions on co-branding, accessibility, and component standards.
- Introduced governance and workflow improvements that increased delivery consistency over time.
- Designed reusable components for data-heavy financial contexts while preserving accessibility quality.
- Balanced immediate rebrand needs with long-term scalability of the design system.
Impact & team feedback
By the end of my contract, engineering had adopted the token structure into delivery without implementation friction. I contributed to 60% of the component set (45% as sole contributor) and introduced branching, early AI-assisted testing, and clearer design workflows that improved team confidence and maintainability.
What the team said
“Thank you Petia for a really interesting session on Tokens Studio. You (and Ross) have been instrumental in creating an architecture for our tokens and design systems. Your quick thinking and problem solving along with your investigative work has laid the foundation for a solid token structure that is forever moving and evolving.”
“Thank you Petia for all your patience and guidance on setting up components and variables. I am learning so much from you and my knowledge of Figma increases every day with your help. You are always so thorough in your approach and an inspiration.”
“Thank you Petia for all your support on the work we are doing with tokens. Your problem solving and investigation skills have been fantastic at helping us overcome challenges quickly and efficiently.”