Tokens

Tokens are Orbit's reusable values to provide a common language between developers and designers.

Usage

Tokens can be used as style props values:

<Div backgroundColor="alias-accent-faint">...</Div>

Or CSS variables:

.item {
    background-color: var(--o-ui-bg-alias-accent-faint);
}

Aliased tokens

Those tokens are named for their use case, rather than their value. For example alias-alert is named to indicate the appropriate background color for an error message background, as opposed to red-5 which is less specific and could be used in a number of ways depending on the context.

This makes their intended use clear and intentional, and allows us to develop a scalable and consistent visual language while also being the building block of Orbit's theming.

Values

Background Colors

Border Colors

Box Shadows

Durations

Easings

Only usable as CSS variables

Icon Colors

Font Sizes

Font Weights

Line Heights

Radii

Sizings

Spacings

Text Colors