ε Elements

Elements are the graphical user interface (GUI) elements used by operating systems to offer a consistent visual language to interact with software and technology. These elements use a visual convention to represent information based on the OS it's on. These individual interface building blocks are used to build the components in the design system. Each element has their unique properties, such as typeface, color, size, and spacing, which make up the styles used in the design system.

Φ Primitives

Simple interface objects that are used to construct elements are considered primitives. These are objects that can't be broken down further. On their own primitives don't really accomplish much, but when combines with other primitives and elements they become functional pieces of our design system. As an example, a single radio button acts as primitive element in the design, as it can’t be broken down further. It can toggle on and off, carries a few properties, but being such a simple object, it doesn't accomplish much on its own. But, when combined with other primitives and elements like a Label it then starts to gain value as a functional part of the design system.

We've set up a Kitchen Sink application that isolates all elements and components into their own screens to show the different variations of each.

Note: The difference between an element and a component is that elements do not handle the spacing between elements, where components account for spacing, scaling, and breakpoint.