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:

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.

Colors

Brand colors come in different shades, and we follow the naming convention of 01000, going from light to dark. 0 would be the lightest possible, and 1000 would be the darkest possible. This is also how font-weight is specified in CSS. A color shade of 400 signifies the primary color — again similar to how a font-weight of 400 signifies normal.

Vanguard

Vanguard is Riverty’s signature green.

TokenValueExample

Charcoal grey

TokenValueExample

Haze white

TokenValueExample

Orange

Riverty’s signature orange. A complementary color suitable for drawing attention and infusing energy.

TokenValueExample

Neutrals

TokenValueExample

Semantic

Semantic colors give us a consistent palette for communicative user interface elements. These are distinct from our brand colors, and would appear in places like warning och error messages.

TokenValueExample

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.

TokenValueExample
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.

TokenValueExample
16px
24px
32px