> For the complete documentation index, see [llms.txt](https://docs.elentra.org/ejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elentra.org/ejs/design-system/taxonomy/ui-taxonomy.md).

# UI Taxonomy

## Overview

![Elentra JS UI Taxonomy](/files/-LmoFyWhx61movQjFeZr)

The layers that comprise the **User Interface Taxonomy** all pertain to the visual, interactive portion of the application, and include all of the tangible things that developers will be using to create interfaces through the development process. 

This is in contrast to the [**User Experience Taxonomy**](/ejs/design-system/taxonomy/ux-taxonomy.md), whose layers are more concerned with how (and *why*) the **User Interface** layers are combined together to create a positive experience for users.

## 1. Styles

In the EJS taxonomy, **Styles** are defined as the global design building blocks at the root of the system that are used by every other layer of the taxonomy. Each of these building blocks typically maps to a corresponding variable in the system, and each of these variables is contained within its categorized `.SCSS` partial in the `elentra-2x-js` repository, under the `src/styles/variables` directory.

{% hint style="info" %}
**Example:** `src/styles/variables/_typography.scss` contains the **Style** variables that pertain to typography. This `.scss` partial includes individual variables for type families, weights, and sizing. Other **Styles** partials include:

* `_border.scss`
* `_breakpoints.scss`
* `_colors.scss`
* `_iconography.scss`
* `_spacing.scss`
  {% endhint %}

## 2. Elements

**Elements** are the second smallest re-useable parts of the system (after the **Styles)**. These include (but are not limited to) the common HTML elements such as `<button>`, `<p>`, `<hr>`, and so on. **Elements** typically make use of and are visually constructed with **Style** variables.

{% hint style="info" %}
**Example:** a `<button>` is a good showcase for an **Element** that relies on **Styles** to define it's apearance. `border` and `border-radius` properties on a `<button>` are both set with the variables `--ejs-border-width---d` and `--ejs-border-radius---d` respectively, which sets those CSS properties to their EJS defaults (defaults are always indicated by a variables ending with a trailing `---d`). \
\
Aside from base **Styles**, further variables may also be added to **Elements** contextually. A `<button>` for a positive or confirmation action will have it's background fill color set to the `--ejs-color-interact--confirm` variable (which is internally mapped to the `--ejs-color-state--success` variable).&#x20;

For a delete `<button>`, the **Style** variable would be `--ejs-color-interact--delete`.
{% endhint %}

## 3. Components

**Components** are defined as the more advanced parts of the UI that are comprised of more than one element.

{% hint style="info" %}
**Example:** An excellent example of a **Component** is `<SingleLineInput>`, which lives in the **Component** library at`/src/components/SingleLineInput/SingleLineInput.vue`. \
\
The `<SingleLineInput>` **Component** defines it's own necessary props and template code, but it also includes several smaller **Elements**, including an `<input>` and a `<label>`.
{% endhint %}