Table of Content

Design tokens

Design tokens are fundamental values used to define user interfaces. A single design token assigns a value to a name, for instance that the color #527a42 should be called color-green-vanguard. The whole set of design tokens then becomes a common palette to design and implement with.

It is better to use design tokens rather than hardcoded values:

Promotes consistency between teams and functions by providing a shared vocabulary.
Reduces work and chance of error when copying values manually.
Minimizes ambiguity by communicating the intention of using a shared token.

Usage

Development

Design tokens are published as code package, @riverty/design-tokens, and automatically included in @riverty/css-framework.

Figma

You will find design tokens libraries published from the Riverty Design System team within Figma. All employees will have access by signing in to Figma using their company email.

Semantic color tokens

Text

Token
Used in hover and active state of text button	--r-charcoal-600	--r-neutral-white
Used as the primary text color	--r-charcoal-400	--r-haze-200
Used as the secondary text color	--r-charcoal-300	--r-charcoal-200
Used for placeholder texts in input fields	--r-charcoal-200	--r-charcoal-300
Used for text on regular and strong backgrounds	--r-neutral-white	--r-charcoal-400
	--r-charcoal-400	--r-charcoal-400
Used for text that reinforces the brand	--r-vanguard-400	--r-dark-vanguard-400
Used for text above the brand background	--r-neutral-white	--r-neutral-white

Link

Token
Used for external links in enabled state	--r-azure-400	--r-azure-400

Icon

Token
Use as the primary icon color	--r-charcoal-400	--r-haze-200
Use as the secondary icon color	--r-charcoal-300	--r-charcoal-200
Used for icons on regular/strong backgrounds	--r-neutral-white	--r-charcoal-400
	--r-charcoal-400	--r-charcoal-400
	--r-vanguard-400	--r-dark-vanguard-400
	--r-charcoal-400	--r-charcoal-400

Border

Token
Used for borders and dividers that needs extra high emphasis	--r-charcoal-600	--r-neutral-white
Used for borders and dividers that needs high emphasis	--r-charcoal-400	--r-haze-200
Used for borders and dividers that needs medium emphasis	--r-charcoal-300	--r-charcoal-300
Used as a default color for dividers and borders in form components	--r-charcoal-200	--r-charcoal-300
	--r-haze-400	--r-charcoal-200
Used for elements in focused state	--r-focused-400	--r-focused-400
Used for the outlined border on focused elements to support accessibility on different kind of background colors	--r-neutral-white	--r-neutral-white
	--r-neutral-white	--r-charcoal-400
	--r-vanguard-400	--r-dark-vanguard-400

Background

Token
Used as the main background color for Riverty consumer app	--r-haze-200	--r-charcoal-500
Used as the main background color in Riverty web portals	--r-neutral-white	--r-charcoal-400
	--r-charcoal-400	--r-haze-200
Used as an overlay on the main background below modals	--r-charcoal-600-alpha-48	--r-charcoal-600-alpha-80
Used as the background color of modals	--r-haze-200	--r-charcoal-400
	--r-vanguard-400	--r-dark-vanguard-400
	--r-vanguard-100	--r-vanguard-100
	--r-neutral-white	--r-neutral-white

Background interactive

Token
Used for primary buttons in pressed state	--r-charcoal-600	--r-haze-500
Used for primary buttons in enabled state and secondary buttons in hovered state	--r-charcoal-400	--r-haze-200
	--r-haze-400	--r-charcoal-600
Used as background for form components and primary button in hovered state	--r-neutral-white	--r-charcoal-400
Used for hovered state in all interactive components except button	--r-charcoal-400-alpha-04	--r-haze-200-alpha-04
Used for pressed state in all interactive components except button	--r-charcoal-400-alpha-12	--r-haze-200-alpha-12
Used as the background for an activated or selected state	--r-charcoal-400-alpha-08	--r-haze-200-alpha-08

Status

Token
Used to communicate error or critical information. Mostly used for borders, text and icons.	--r-red-400	--r-dark-red-400
Used to communicate error or critical information. Mostly used for backgrounds.	--r-red-100	--r-dark-red-400-alpha-2
Used to communicate caution. Mostly used for borders, text and icons.	--r-orange-400	--r-dark-orange-400
Used to communicate caution. Mostly used for backgrounds.	--r-orange-100	--r-dark-orange-400-alpha-2
Used to communicate a success or a favorable outcome.Mostly used for borders, text and icons.	--r-green-400	--r-dark-green-400
Used to communicate a success or a favorable outcome.Mostly used for backgrounds.	--r-green-100	--r-dark-green-400-alpha-2
Used to communicate neutral information.Mostly used for borders, text and icons.	--r-blue-400	--r-dark-blue-400
Used to communicate neutral information.Mostly used for backgrounds.e	--r-blue-100	--r-dark-blue-400-alpha-2

Riverty logotype

Token
Used for Riverty logotype in neutral color	--r-charcoal-400	--r-haze-400
Used for Riverty logotype in neutral color above strong/regular backgrounds	--r-haze-400	--r-charcoal-400
Used for Riverty logotype in Vanguard color	--r-vanguard-400	--r-vanguard-400
Used for Riverty logotype in Ember color	--r-ember-400	--r-ember-400

Spacing

A set of defined spacing helps with creating consistent user interfaces. For spacing under 48 px a 4 px incrament is used. The spacing is applicable for both horizontal and vertical spacing.

Token	Value	Example
	`0.25rem`
	`0.5rem`
	`0.75rem`
	`1rem`
	`1.25rem`
	`1.5rem`
	`1.75rem`
	`2rem`
	`2.25rem`
	`2.5rem`
	`2.75rem`
	`3rem`
	`3.5rem`
	`4rem`
	`4.5rem`
	`5rem`

Icon sizing

Icons are sized based on our spacing and grid scale to achieve a coherent apperance of icons in our products. When pairing icon size with text or other elements, aim for keeping a natural balance between icon and text.

Token	Value	Example
	`16px`
	`24px`
	`32px`