Colors

About

The UI color system is a fundamental aspect of Riverty’s design framework. The color palette is crafted with simplicity and usability in mind and offers a palette chosen to ensure consistency and coherence across our digital platforms.

UI color palette

Brand colors

Riverty brand colors are used to reinforce the brand. In product UI they’re commonly used for elements like the logotype, illustrations, or background sections. The brand colors should have a neutral meaning, therefore they should not be mixed up with status colors.

Functional colors

The neutral brand color palette are mainly used for functional elements, backgrounds, texts, interactive components and their states.

Status colors

To indicate a status, like an error or sucess state, we’re using status specific colors. These should be used to communicate a meaning, which makes them differ from the brand and neutral palette.

Color structure

To apply colors in our products we are using color tokens. A color token is a reusable representation of a specific color and serves as as standardized reference point for designers and developers.

The colors are structured in three different levels: raw values, base tokens and semantic tokens.

Raw value

The raw color value is in form of a HEX-code or an RGBA-value.

Base token

A base token is directly tied to a raw value, for example color-charcoal-400 represent the HEX code #282828. The goal with base tokens is to provide the design system with a set of predefined variables to choose from. The names of the base tokens should give a hint of what the color looks like.

1. Token type: The type of design attribute or style, such as color, size, or space.
2. Color name: This serve to differentiate one color set from another. In some instances, they are uniquely branded by Riverty, while others directly describe the color, such as “red” or “green”.
3. Lightness: The brightness or darkness of the color. Here we’re using a scale from 100-600, which goes from the brightest to the darkest variant of the color.

Semantic tokens

Semantic tokens tells about the usage of the color. This is the third layer of the color structure. A semantic token always represent a base token. This is the layer both designers and developers will mainly see and work with.

1. Token type: The type of design attribute or style, such as color, size, or space.
2. Property: The element the token is being applied to, such as background, text, border, or other properties.
3. Modifier: Additional details about the token’s purpose, such as role, emphasis, or interaction state.

Theming

The semantic color tokens allow us to change the value of a token depending on the environment. Below is an example of how different semantic tokens behave in light mode versus dark mode.

Using dark theme in your product

It is up to you to chooose to enable the dark theme in your application or website. It is fully opt-in, and the default light theme will be used unless otherwise specified.

Consider how a dark UI can benefit your end-users, and base the decision on that.

Implementing theming in web UIs

All code packages will use the light theme by default. There are several options to using the dark theme in your UI.

• Explicitly setting theme.
• Enabling automatic theme switching based on user preferences.
• Setting a theme in only some part of the UI.

Use the data-theme attribute to specify which theme to use. Set data-theme="dark" for dark colors, and set data-theme="light" to force light colors. Since light theme is the default, you only need to set it explicitly if it’s part of your product’s behavior (e.g. a user-facing theme switching toggle).

You can enable automatic theme switching by setting data-theme="auto". This will apply theme according to the standard prefers-color-scheme platform feature. In other words, auto respects what the user has configured on their phone or computer.

Often, the data-theme setting should apply to the whole UI, and be set on the root element (i.e., body). It is also possible to override the theme for a specific part of the UI. The following abbreviated HTML document is an example.

<style>
  p {
    color: var(--r-text-regular);
    background-color: var(--r-background-soft);
  }
</style>
<body data-theme="auto">
  <p>All paragraphs will switch theme as user changes color mode on their device.</p>
  <div data-theme="light">
    <p>But paragraphs in here will always use light theme.</p>
  </div>
</body>

At this point, we don’t offer any guidance on when it might be appropriate to use such ‘local theming’.

Color variables in Figma

The color varaibles that exists in Figma are 1:1 with the semantic tokens that are used in code. This makes the handover from design to development smoothly.

Start using color variables

Start by adding the library named “Color variables” to your Figma project. When this is added you can then find the variables collection in the Design panel to the right, where you earlier found the color styles.

Using color variables in your designs

What differ color variables from color styles is the naming and theming. The variables are named by their use area. A tip is to get familiar by the naming, you can always look into the complete list with color tokens to get an overview and see description of each colors areas of use.

Switch between modes

By working with variables you can instantly switch your designs between light and dark mode. Do this by selecting a layer and click on the variable icon on the Layer section in the Design panel. A great practice is to try out both light- and dark theme during the time you are designing to make sure the color setting works for both modes. If you are using components from the design system they are automatically updated with the correct color variables.