Atoms are the basic building blocks of all matter. Each chemical element has distinct properties, and they can’t be broken down further without losing their meaning. (Yes, it’s true atoms are composed of even smaller bits like protons, electrons, and neutrons, but atoms are the smallest functional unit.)

ColorKit is a set of resources for using and implementing color. It consists of a color picker in DesignKit and color palettes for the macOS and other applications.

Component is an umbrella term for any UI element (Atoms, Molecule, Organisms, Templates), usually created as a React component.

A deisgn system is a collection of shared design patterns and practices that allow our team to build quality consistent interfaces. Patterns are the repeating, reusable parts of the interface, such as buttons, colors, and icons. Practices are how we create, organize and share those patterns.

A design token represents a design decision commonly using CSS (or preprocessor) variables. They are not variables. For further information, read the article Architecting Tokens

DesignKit is desktop tool for making design resources readily available and searchable. It is available via Optimizely Self-Service.

Functional patterns are the technical aspects of components and work together with perceptual patterns.

Molecules are groups of two or more atoms held together by chemical bonds. These combinations of atoms take on their own unique properties, and become more tangible and operational than atoms.

Organisms are assemblies of molecules functioning together as a unit. These relatively complex structures can range from single-celled organisms all the way up to incredibly sophisticated organisms like human beings.

Pages are specific instances of templates that show what a UI looks like with real representative content in place.

Perceptual patterns are the visual aspects of the design system. Colors, shapes, icons. fonts, animations, and illustrations all form the visual representations of functional patterns (components).

Templates are where components come together in the context of a full page layout.