Nedbank Design Tokens
Role: Product design lead
Client: Nedbank RBB
Project date: 2021 – Ongoing
Nedbank Design Tokens
The implementation of design tokens across the persoan.nedbank.co.za design system and reusable components.
Role: Product design lead
Client: Nedbank RBB
Project date: 2021 – Ongoing
Project summary
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for colour or pixel values for spacing) to maintain a scalable and consistent visual system for UI development. This project involved the planning and implementation of a fully integrated design token system into the Nedbank.co.za design system, in which all existing and new components would consume
Project summary
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for colour or pixel values for spacing) to maintain a scalable and consistent visual system for UI development. This project involved the planning and implementation of a fully integrated design token system into the Nedbank.co.za design system, in which all existing and new components would consume
The challenge
A successful, enduring token architecture depends on specific grouping, ordering, classification and decision-making. This, coupled with aligning with the design team (including content and developers) on all components at every step, will also minimize the risk of any design dept going forward.
Solution
Tokens are an effective instrument for illustrating the path from one to the other. Organize your decisions to suggest their atomic basis: building from options to decisions and simple to complex. Start with but don’t stall with just colour & type. Expand your decisions to cover the myriad concerns of a design language. Adopt and tokenize scales and demonstrate how they apply across different scenarios. Make tokens a team endeavour, and (even if implicitly) designate a structured architectural mind to curate the collection. Encourage habits in design and development that park reusable decisions — token candidates — in a predictable place, such as the top of a text file or corner of design art. Take advantage of a token’s maintenance benefits, and use that as a selling point to your adopting team.
Solution
Tokens are an effective instrument for illustrating the path from one to the other. Organize your decisions to suggest their atomic basis: building from options to decisions and simple to complex. Start with but don’t stall with just colour & type. Expand your decisions to cover the myriad concerns of a design language. Adopt and tokenize scales and demonstrate how they apply across different scenarios. Make tokens a team endeavour, and (even if implicitly) designate a structured architectural mind to curate the collection. Encourage habits in design and development that park reusable decisions — token candidates — in a predictable place, such as the top of a text file or corner of design art. Take advantage of a token’s maintenance benefits, and use that as a selling point to your adopting team.
“A design system is basically the story of how an organization builds a digital product” ~ Brad Frost
138
Tokens developed
50
Mixins developed from Tokens
72
Components using design tokens