Naming convention examples
Based on the best practices you considered in the previous page, here are some naming convention examples. Note how the naming taxonomy flows right through design and development, from the sketch file name through to the design tokens to provide consistency across both functions.
Color / Layer Style Example
| Taxonomy | Sketch Name | Token(s)* |
| category–type–variation | brand/primary/base |
fill: brand.primary.base |
Text Style Example
| Taxonomy | Sketch Name | Token(s)* |
| use–variation–alignment | button/default/left |
font: text.primary size: button.default weight: text.heavy color: text.color.default spacing: ls.button |
Component / Pattern Example
| Taxonomy | Sketch Name | Token(s)* |
| category–type–variation–state | button/primary/icon/default |
components would likely be styled by classes / collections of tokens |
