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.
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.
Brand colors come in different shades, and we follow the naming convention of
1000, 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
Vanguard is Riverty’s signature green.
Riverty’s signature orange. A complementary color suitable for drawing attention and infusing energy.
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.
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.
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.