Examples

Color system

As an example, this section examines the color token system operating on this web resource. It is built upon a strictly structured nomenclature of color designations:

Base color token structure:
color-{type}-{category}-{variant}-({state})
Surface color token structure:
color-on-{category}-{variant}-{state}-{onType}-({onState})

This approach ensures high speed of verification and selection of the required color. The clear coding structure allows for instant determination of the functional purpose of a specific color by its name, which significantly improves source code readability in the context of styling. It also allows the digital product's color system to scale easily as it grows.

The use of a specialized on- prefix establishes a strict dependency between the color of an overlaid element and the color of the underlying surface (the identifier of which follows next). This color binding minimizes the likelihood of erroneously applying incompatible or incorrect colors during interface design.

The generation of derived (helper) color tokens is carried out automatically via the SCSS preprocessor. The algorithm for calculating derivative shades is based on the values of anchor colors (bg-…-primary) and is determined relative to the color parameters of the background space and main text content.

Base

Fundamental interface colors that determine the main background and base typography.

bg-base
bg-base-hover
bg-base-active
text-base-primary
The quick brown fox jumps over the lazy dog
border-base

text-base-secondary
The quick brown fox jumps over the lazy dog

text-base-tertiary
The quick brown fox jumps over the lazy dog

Brand

Brand colors used for core interface elements.

bg-brand-primary
- on-brand-primary-text
  The quick brown fox jumps over the lazy dog
- on-brand-primary-text-low
  The quick brown fox jumps over the lazy dog
text-brand-primary
The quick brown fox jumps over the lazy dog
border-brand-primary

bg-brand-secondary
- on-brand-secondary-text
  The quick brown fox jumps over the lazy dog
- on-brand-secondary-text-low
  The quick brown fox jumps over the lazy dog
text-brand-secondary
The quick brown fox jumps over the lazy dog
border-brand-secondary

Nav

Colors for navigation elements that help the user orient within the application structure.

bg-nav
- on-nav-text
  The quick brown fox jumps over the lazy dog
- on-nav-text-low
  The quick brown fox jumps over the lazy dog
- on-nav-border
bg-nav-hover
bg-nav-active
border-nav

Accent

Vibrant colors to draw attention to interactive elements and calls to action.

bg-accent-primary
- on-accent-primary-bg
- on-accent-primary-bg-active
- on-accent-primary-bg-hover
- on-accent-primary-text
  The quick brown fox jumps over the lazy dog
- on-accent-primary-text-low
  The quick brown fox jumps over the lazy dog
- on-accent-primary-border
bg-accent-primary-hover
bg-accent-primary-active
text-accent-primary
The quick brown fox jumps over the lazy dog
text-accent-primary-hover
The quick brown fox jumps over the lazy dog
text-accent-primary-active
The quick brown fox jumps over the lazy dog
border-accent-primary

bg-accent-secondary
- on-accent-secondary-bg
- on-accent-secondary-bg-active
- on-accent-secondary-bg-hover
- on-accent-secondary-text
  The quick brown fox jumps over the lazy dog
- on-accent-secondary-text-low
  The quick brown fox jumps over the lazy dog
- on-accent-secondary-border
bg-accent-secondary-hover
bg-accent-secondary-active
text-accent-secondary
The quick brown fox jumps over the lazy dog
text-accent-secondary-hover
The quick brown fox jumps over the lazy dog
text-accent-secondary-active
The quick brown fox jumps over the lazy dog
border-accent-secondary

bg-accent-tertiary
- on-accent-tertiary-bg
- on-accent-tertiary-bg-active
- on-accent-tertiary-bg-hover
- on-accent-tertiary-text
  The quick brown fox jumps over the lazy dog
- on-accent-tertiary-text-low
  The quick brown fox jumps over the lazy dog
- on-accent-tertiary-border
bg-accent-tertiary-hover
bg-accent-tertiary-active
text-accent-tertiary
The quick brown fox jumps over the lazy dog
text-accent-tertiary-hover
The quick brown fox jumps over the lazy dog
text-accent-tertiary-active
The quick brown fox jumps over the lazy dog
border-accent-tertiary

Surface

Background colors for surfaces and cards.

bg-surface-primary
- on-surface-primary-text
  The quick brown fox jumps over the lazy dog
- on-surface-primary-text-low
  The quick brown fox jumps over the lazy dog

bg-surface-secondary
- on-surface-secondary-text
  The quick brown fox jumps over the lazy dog
- on-surface-secondary-text-low
  The quick brown fox jumps over the lazy dog

bg-surface-tertiary
- on-surface-tertiary-text
  The quick brown fox jumps over the lazy dog
- on-surface-tertiary-text-low
  The quick brown fox jumps over the lazy dog

Success

Colors used to indicate successful operations.

bg-success-primary
- on-success-primary-bg
- on-success-primary-bg-active
- on-success-primary-bg-hover
- on-success-primary-text
  The quick brown fox jumps over the lazy dog
- on-success-primary-text-low
  The quick brown fox jumps over the lazy dog
- on-success-primary-border
bg-success-primary-hover
bg-success-primary-active
text-success-primary
The quick brown fox jumps over the lazy dog
border-success-primary

bg-success-secondary
- on-success-secondary-bg
- on-success-secondary-bg-active
- on-success-secondary-bg-hover
- on-success-secondary-text
  The quick brown fox jumps over the lazy dog
- on-success-secondary-text-low
  The quick brown fox jumps over the lazy dog
- on-success-secondary-border
bg-success-secondary-hover
bg-success-secondary-active
text-success-secondary
The quick brown fox jumps over the lazy dog
border-success-secondary

bg-success-tertiary
- on-success-tertiary-bg
- on-success-tertiary-bg-active
- on-success-tertiary-bg-hover
- on-success-tertiary-text
  The quick brown fox jumps over the lazy dog
- on-success-tertiary-text-low
  The quick brown fox jumps over the lazy dog
- on-success-tertiary-border
bg-success-tertiary-hover
bg-success-tertiary-active
text-success-tertiary
The quick brown fox jumps over the lazy dog
border-success-tertiary

Warning

Colors for warnings regarding potential errors or requiring attention.

bg-warning-primary
- on-warning-primary-bg
- on-warning-primary-bg-active
- on-warning-primary-bg-hover
- on-warning-primary-text
  The quick brown fox jumps over the lazy dog
- on-warning-primary-text-low
  The quick brown fox jumps over the lazy dog
- on-warning-primary-border
bg-warning-primary-hover
bg-warning-primary-active
text-warning-primary
The quick brown fox jumps over the lazy dog
border-warning-primary

bg-warning-secondary
- on-warning-secondary-bg
- on-warning-secondary-bg-active
- on-warning-secondary-bg-hover
- on-warning-secondary-text
  The quick brown fox jumps over the lazy dog
- on-warning-secondary-text-low
  The quick brown fox jumps over the lazy dog
- on-warning-secondary-border
bg-warning-secondary-hover
bg-warning-secondary-active
text-warning-secondary
The quick brown fox jumps over the lazy dog
border-warning-secondary

bg-warning-tertiary
- on-warning-tertiary-bg
- on-warning-tertiary-bg-active
- on-warning-tertiary-bg-hover
- on-warning-tertiary-text
  The quick brown fox jumps over the lazy dog
- on-warning-tertiary-text-low
  The quick brown fox jumps over the lazy dog
- on-warning-tertiary-border
bg-warning-tertiary-hover
bg-warning-tertiary-active
text-warning-tertiary
The quick brown fox jumps over the lazy dog
border-warning-tertiary

Danger

Colors used to indicate errors and critical actions.

bg-danger-primary
- on-danger-primary-bg
- on-danger-primary-bg-active
- on-danger-primary-bg-hover
- on-danger-primary-text
  The quick brown fox jumps over the lazy dog
- on-danger-primary-text-low
  The quick brown fox jumps over the lazy dog
- on-danger-primary-border
bg-danger-primary-hover
bg-danger-primary-active
text-danger-primary
The quick brown fox jumps over the lazy dog
border-danger-primary

bg-danger-secondary
- on-danger-secondary-bg
- on-danger-secondary-bg-active
- on-danger-secondary-bg-hover
- on-danger-secondary-text
  The quick brown fox jumps over the lazy dog
- on-danger-secondary-text-low
  The quick brown fox jumps over the lazy dog
- on-danger-secondary-border
bg-danger-secondary-hover
bg-danger-secondary-active
text-danger-secondary
The quick brown fox jumps over the lazy dog
border-danger-secondary

bg-danger-tertiary
- on-danger-tertiary-bg
- on-danger-tertiary-bg-active
- on-danger-tertiary-bg-hover
- on-danger-tertiary-text
  The quick brown fox jumps over the lazy dog
- on-danger-tertiary-text-low
  The quick brown fox jumps over the lazy dog
- on-danger-tertiary-border
bg-danger-tertiary-hover
bg-danger-tertiary-active
text-danger-tertiary
The quick brown fox jumps over the lazy dog
border-danger-tertiary

Highlight

Colors for emphasizing active content or important text fragments.

bg-highlight-primary
- on-highlight-primary-bg
- on-highlight-primary-bg-active
- on-highlight-primary-bg-hover
- on-highlight-primary-text
  The quick brown fox jumps over the lazy dog
- on-highlight-primary-text-low
  The quick brown fox jumps over the lazy dog
- on-highlight-primary-border
bg-highlight-primary-hover
bg-highlight-primary-active
border-highlight-primary

bg-highlight-secondary
- on-highlight-secondary-bg
- on-highlight-secondary-bg-active
- on-highlight-secondary-bg-hover
- on-highlight-secondary-text
  The quick brown fox jumps over the lazy dog
- on-highlight-secondary-text-low
  The quick brown fox jumps over the lazy dog
- on-highlight-secondary-border
bg-highlight-secondary-hover
bg-highlight-secondary-active
border-highlight-secondary

bg-highlight-tertiary
- on-highlight-tertiary-bg
- on-highlight-tertiary-bg-active
- on-highlight-tertiary-bg-hover
- on-highlight-tertiary-text
  The quick brown fox jumps over the lazy dog
- on-highlight-tertiary-text-low
  The quick brown fox jumps over the lazy dog
- on-highlight-tertiary-border
bg-highlight-tertiary-hover
bg-highlight-tertiary-active
border-highlight-tertiary