This article on tokens frameworks is a summary of my views in 2022 based on previous work:
- Aviva framework design system without tokens
- Coursera Design system - co-creating a simple token model with Majd and
- Checkout.com design system - co-creating a full token framework with design intent and composite tokens with Geri Reid
What tokens promise
Models types
- Ramps
- simple names
- names with intnet
Ramps
Model with ramps + examples showing them used
- users need to know the rules and access a11y and cohesion each time
Simple
A simple model eg.bg/primary doesn't really change the negatives
Intent
Model with intent does, although you need to bake in extensions
Show with examples in Figma
Include references form Curtis and Anssana + the other medium article
References
- Naming Tokens in Design Systems by Nathan Curtis: The token bible that appears to be the foundation for all token frameworks and articles since. My views for sure link back to this
- Three articles really helped me and Geri re-frame grouping terminologies into words we could connect with:
- Designing Hazel’s Accessible Color System (Part 2) by Francis Wu
- Naming design tokens by Lukas Oppermann
- Design Tokens on Asana's Design Systems Team - Jina Anne, Ainsley Wagoner, Ivy Wang (Schema 2021) from Figma’s 2021 Schema event
- Understanding the scale from Radix-UI: Very scalabne and I assume a predictable system that bakes in use cases to each ramp value. It could easily be modified to ensure ramp combinations meet colour contrast