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 for naming different sizes:

• 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 or tiny.
• Larger than default: When you want to define a size that is larger than base we use medium, large, x-large, xx-large and so on. A concrete example would looks like this:

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_tiny:
  value: "11px"