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.
• Multiword: Names should be most of the time multi-word, except for root App component: This prevents conflicts with existing and future HTML elements, since all HTML elements are a single word.
• Meaningful: Not over specific, not overly abstract.
• Short: Maximum of 2 or 3 words.
• Pronounceable: We want to be able talk about them.
• 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 multiword or otherwise compatible with existing and future HTML elements.

Naming Sizes

Vue Design System uses the following convention:

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

font_size_xx_large:
  value: "64px"
font_size_x_large:
  value: "48px"
font_size_large:
  value: "24px"
font_size_base:
  value: "16px"
font_size_small:
  value: "13px"
font_size_x_small:
  value: "11px"
font_size_xx_small:
  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”.