Contents x
    Naming convention examples
    • 31 Jan 2023
    • 1 Minute to read
    • Dark
      Light
    Contents

    Naming convention examples

    • Updated on 31 Jan 2023
    • 1 Minute to read
    • Dark
      Light
    Article Summary

    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

    Was this article helpful?
    What's Next