Color

To maintain consistency throughout D-system digital interfaces, we must apply guidance concerning colour usage. A set of foundational concepts govern this application.

Colour palette
The colour palette unifies D-system digital products and interfaces, giving them a consistent look and feel.

D-system uses colour to signpost the function of elements throughout the interface. This creates recurrent patterns that users can recognise, making the product more predictable and easier to navigate.

Theming & tokens

D-system uses a theming system based on palettes and tokens. Depot always uses tokens instead of direct references to hex values.

The 4 palettes

Full, Brand, App and Component, specific with the following inheritance system:

Full palette*

This is the full Trainline colour palette, with enough variants to cover most cases. These should only populate Brand, Application or Component specific elements, and should never applied directly to the UI.

Brand*

This is the palette where brand colours are specified. This intermediary step lets D-system support themes for business partners (who have a need to use their own colour scheme and have it propagate throughout the UI).

Application (App)*

Here, we declare colour tokens based on their high-level, semantic use in our application. These tokens are not yet component specific.

Component-specific (Comp)*

Here, we declare colour tokens based on how they are used within components considering different states.

* see Library Tab

Color anatomy

D-system’s default themes are derived from the Full palette. The neutral grey family is dominant in the default themes. Variations in value organise content into categories.

The core Full palette serves as the primary library across all D-system products and experiences. Additional colours are used sparingly and purposefully... And for a very good reason!

Depot’s default core & Full palette colours

Core colours follow our branding guidelines.


Mid is the midpoint colour that sits between light and dark shades. Sometimes core is the same as mid, but that isn’t always true for all colours.

Also see Backdrop

Implementing color

D-system uses tokens and themes to manage color. Tokens are role-based, and themes specify the color values that serve those roles in the UI.

Themes

Themes serve as an organizational framework for color in D-system, with each theme based on a specific primary background color. And they actually get their names from their background color. There a default light theme and a default dark theme.

The light theme is based on White background, and the dark theme use black background. Within each theme, the values for the universal color tokens use the primary background color as the base of its layering model.

Tokens

Tokens are method of applying color in a consistent, reusable, and scalable way. They help us abstract how we use color from the values themselves. They are used in place of hard coded values, like hex codes. Tokens allow for value changes to be made at scale, making design language changes easy to implement, as well as making possible color functionalities like inline theming and light or dark mode.

Each token is assigned a role and a value. The role determines what element to apply a token too and the value is the actual color (hex code) that appears in the assigned theme. Color token names and roles are the same across themes, only the assigned value will change with the theme. For example, under the hood the $text_base token can dynamically map to Gray 70 or Gray 30 depending on the theme.

Token names

For quick reference, the role of a token is represented in the token name itself to help you correctly apply tokens. The first part of the token name references the general UI element the color is being applied to, like background, text, or border. The second part of token name will specify its unique role within the element group like $border-subtle or $text-primary. Additionally, some tokens include aninteraction state at the end, like $background-hover.

Core tokens

Color tokens that can be applied across components are called core tokens. There are ten main groups of core color tokens. They are grouped by the common UI element that they are applied to. Token groups makes it easier to find and apply color tokens. Interaction state tokens are included in the group along side their enabled state tokens.

Component tokens

Some components have their own specific color tokens, known as component tokens. They represent the properties associated with a particular component. They are not global tokens like the core tokens and should never be used for anything other than their own component.

These are:

• Button
  

• Tag
  

• Navigation
  

Interaction states

The color layering model for interaction tokens is as follows:
For values between Black and Gray 100, interaction gets lighter.
For values between Gray 90 and White, interaction gets darker.

Hover

Hover is a subtle visual change that appears when a mouse cursor moves over an interactive element. Hover states have their own tokens and are identified by -hover added to the end of the base token name, such as $background-hover.

In the D-system themes, hover states token values are “one step” between two adjacent colors on the Full core color palette steps.

These values fall inside of the Full core color palette steps. Hover colors should not be used for anything other hover states.

For values between Black and Grey 120, the hover state is one step lighter.

For values between Grey 90 and White, the hover state is a one step darker.

Elements like text or icons that use secondary colors for their enabled state, will change to the primary color on hover, giving them a subtle emphasis. Most of the time, this shift in color (on the text or icon element) will be accompanied by a background hover color shift as well.

Active

The active state can be used to indicate a click, tap or down press of a button. Active tokens are identified by -active added after the base token name, such as $button-primary-active. Active state values are two full steps lighter or darker on the Full core color scale. For example, the Blue 60 active state is Blue 80.

For values between core and 120, the active state is two full steps lighter.

For values between 50 and 90, the active state is two full steps darker.

Selected

Selected states indicate item(s) or option(s) that have been chosen in the UI by the user through any input method. Selected tokens are identified by the -selected added after base token name, such as $layer-selected-01.

The color logic for selected state is either one full step lighter or darker on the Full core color scale. For example, the Gray100 selected state is Gray 90.

For values between darkest and 120, the selected state is one full step lighter.

For values between lightest and 90, the selected state is one full step darker.

Focus

The focus state draws attention to the active element on a page when using the keyboard or voice to navigate. In D-system, the focus of an element is most commonly indicated by a 2px border around the element. In order to make it easy to identify and locate on a page, most focus states use only one color per theme controlled through the $focus color token.

In the light themes, the focus state usually appears as an indigo 120 border. In the dark themes, the focus state usually appears as a White border.

Focus states are required on all interactive elements and must pass 3:1 color contrast accessibility.

Disabled

A disabled state is applied to a component when the user is not allowed to interact with the component due to either permissions, dependencies, or pre-requisites. Disabled states completely remove the interactive function of a component and therefore don’t receive hover or focus.

Disabled state styling is not subject to WC3 contrast compliance standards and is intentionally de-emphasized in a faded fashion.

Disabled elements are always styled in the Gray family no matter its base color. A component’s specific styling will depend on the elements within it and what layers they are placed on. Some tokens have their own specific disabled tokens, while other elements are grouped together and share a disabled token.

For the light and dark themes, use the disabled color values.