Naming of Things

We use the names to communicate about Tokens, Elements, Patterns and Templates. Hence, they must be short, meaningful and pronounceable. Each name must be:

• Verb Rather Than Noun: To understand the purpose, focus on what it does rather than what you think it is. This helps us broaden potential use cases as well as define its purpose more accurately.
• Meaningful: Not over specific, not overly abstract.
• Short: Maximum of 2 or 3 words.
• Pronounceable: We want to be able talk about them.
• Capitalized: We recommend naming components with a capital letter, so that they are not mistaken for an HTML tag.
• Custom element spec compliant: Don’t use reserved names. Reserved names include:

 * annotation-xml      * color-profile
 * font-face           * font-face-src
 * font-face-uri       * font-face-format
 * font-face-name      * missing-glyph

Prefixing Names

There are a few rules around prefixing things, that you’ll want to follow to keep the system consistent:

• Tokens: Token names always start with a category name and a hyphen. For example color- or space-. If you have subcategories, include them in the naming as well and separate with hyphen, Example: color-primary- or color-secondary-.
• Element, Pattern & Templates: Names don’t have a prefix, but should be compatible with existing and future HTML elements and start with a capital letter.

Naming Sizes

Vue Design System uses the following convention:

• Default: The default unit is always called medium (m).
• Smaller than default: When you want to define a size that is smaller than medium it should be named either small (s), x-small (xs), xx-small (xxs) and so on.
• Larger than default: When you want to define a size that is larger than medium we use large (l), x-large (xl), xx-large (xxl) and so on. A concrete example of this looks like:

size_xxl:
  value: "64px"
size_xl:
  value: "48px"
size_l:
  value: "24px"
size_m:
  value: "16px"
size_s:
  value: "13px"
size_xs:
  value: "11px"
size_xxs:
  value: "8px"

Naming Colors

Vue Design System uses the following convention:

• Default: The default base color is always called color-{name}.
• Darker than default: When you want to define a shade, use either color-{name}-dark, color-{name}-darker or color-{name}-darkest.
• Lighter than default: When you want to define a tint, use color-{name}-light, color-{name}-lighter, color-{name}-lightest and so on. A concrete example of this looks like:

color_red_darker:
  value: "hsla(7, 83%, 33%, 1)"
color_red_dark:
  value: "hsla(7, 83%, 43%, 1)"
color_red:
  value: "hsla(7, 83%, 53%, 1)"
color_red_light:
  value: "hsla(7, 83%, 63%, 1)"
color_red_lighter:
  value: "hsla(7, 83%, 73%, 1)"

Read also Terminology section which is closely tied to “Naming of Things”.