Docs

Colors

Foundations

Colors

Layers

Elevation

Foundations

Colors

Layers

Elevation

Our design system uses color palettes to manage and apply color in a flexible, scalable way. This system provides default palettes while offering designers the freedom to create custom ones, all built on a foundation of managed color tokens.

Palette structure

By default, the system provides three main color scales:

Palette 1 (Primary): The main brand color used for key actions and components.
Palette 2 (Secondary): A supporting brand color, often used to create contrast or visual interest.
Neutral: A grayscale palette, primarily used for backgrounds, borders, and text.

Each palette is a gradient of color tones from light to dark. The range of tones provide the designer with some flexibility while staying on-brand.

Range: Tones are identified by a number from 050 (lightest) to 900 (darkest).

Default tone: A specific tone within the scale is designated as the default color to use for general application.

On-tone: Text on surfaces

On-tones refer to the color of the text or iconography placed on top of a surface or background tone. The on-tone color ensures maximum readability and AA accessibility at each step in the palette.

Text opacity for emphasis

To control the visual hierarchy of text, Recursica uses different opacity values for the on-tone color: high- and low-emphasis.

Status colors

These colors convey the status of an action or piece of information.

Alert

Used for serious errors or actions that could be destructive. It signals a problem that needs attention.

Success

Indicates that an action was completed without any problems.

Warning

Used for informational alerts that aren't critical but are important for the user to be aware of.

By some miracle, that was successful.

Oops! That didn’t go well but we'll fix it.

Let’s just move on with all this.

Flexibility and abstraction

While the system provides starter palettes, it is fully extensible—designers can create as many custom scales as needed. All colors must be sourced from a centralized Tokens File to ensure consistency and easy updates.

This layered approach creates a powerful level of abstraction:

Tokens File: Raw hex values are converted into friendly names (e.g., #DD2C56 becomes "ruby-red").
Brand File: These friendly token names are then mapped to the various tones across your Primary, Secondary, and custom Color Scales.

The designers can communicate in terms of friendly color names. The developers can speak in terms of "primary" or "secondary" without concern for the actual color. These abstractions match the communication preferences of each person with full traceability back to the original hex value.

Tokens File: Raw hex values are converted into friendly names (e.g., "ruby-red").
Brand File: These friendly token names are then mapped to the various tones across your Primary, Secondary, and custom Color Scales.

While the system provides starter palettes, it is fully extensible—designers can create as many custom scales as needed. All colors must be sourced from a centralized Tokens File to ensure consistency and easy updates.

This layered approach creates a powerful level of abstraction: