Craig ScheunCanberra, ACT, Australia
Social:LinkedIn
The token documentation site layered in perspective across four screens and a desktop monitor: spacing tokens, mixins, text-link and hover-shadow entries, each with the token set that produces it.

Client: Nedbank

Financial services

Nedbank Design Tokens

  • ClientNedbank
  • Year2021
  • Scope of workProduct Design Lead
  • LocationJohannesburg, South Africa

Building the token architecture underpinning Nedbank’s design system.

Component documentation built on the tokens: the commit button in its enter state, and the primary button with the sizing and height rules that its tokens and mixins encode.

Situation

Nedbank’s design system needed a scalable way to keep colour, spacing and type consistent across all existing and new components on personal.nedbank.co.za, rather than hard-coded values scattered per component.

Problem & stakes

A token system only holds up if the grouping, ordering and classification decisions are right from the start, and if design, content and engineering agree on every component: get it wrong and the design system accrues debt instead of preventing it.

My role

Product design lead responsible for the token architecture and its rollout across the design system.

What I led

Defined the token hierarchy starting from colour and type, then expanded it to cover spacing and other design-language concerns; established a decision-making process so token creation stayed a team activity rather than a single designer’s call; built in the habits (a predictable place to park "token candidate" decisions) that kept the system from drifting.

Collaboration

Aligned continuously with design, content and development on every component migrating onto tokens, treating token maintenance as a selling point to the adopting teams rather than a mandate.

Three pages of the token documentation laid out in perspective: the spacing scale with its breakpoint values, the type tokens naming LibreFranklin as the primary family, and a colour token entry for dotcoza.color.commit.grey.

Outcome

Shipped a token system in active use across the majority of the Nedbank.co.za component library.

138+
Tokens developed
50+
Mixins developed from tokens
72+
Components consuming the token system

What I learned

A token system’s durability comes from the governance around it (who decides, where decisions are recorded) more than from the tokens themselves.

The token documentation site itself, on the Tokens landing page: the five-level hierarchy in the sidebar, tokens (atoms), mixins (molecules), cells, components (organisms), page types and templates, beside the definition of design tokens and the setup steps for generating them with Style Dictionary.
Next projectNedbank DotCoZaNedbank2021