All of the Patterns source is organized into four directories: Elements, Components, Objects, and Utilities. This naming convention is influenced by “[BEMIT: Taking the BEM Naming Convention a Step Further](https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/).” Our four buckets included Elements, Components, Objects, and Utilities. If you are familiar with Brad Frost’s [Atomic Design Methodology](http://atomicdesign.bradfrost.com/chapter-2/), this structure will sound very familiar. All patterns are based on design tokens that define visual properties on a micro scale.  ## Tokens Design Tokens are the variables that store visual properties such as color, spacing, typography styling, etc. They are shared from JavaScript to Sass files. They are also passed to the Utility configuration for customization of CSS utilities. ## Elements Elements are the smallest building blocks and include colors, icons, buttons, links, layouts, and more. They can be seen within Components and Utilities. They are often customized default HTML tags (``, ``, `

`, ``, etc.). They require smaller amounts of markup and styling to customize. ## Components Components are smaller patterns that require more complex markup and styling than elements. They may appear more than once in a single view. Often, they include multiple elements such as buttons, lists, links, etc.. Component CSS classes are denoted with the `.c-` prefix. ## Objects Objects are the most complex patterns and require more custom styling, markup, and JavaScript to function. They may only appear once in a single view. They can be global elements (`