Riverty Design System: Design Tokens

Riverty, your flexible Payment Companion. 25+ million users, 1+ billion secure transactions.

Riverty Design System: a design and development toolkit tailor-made for Riverty teams and collaborators.

→ designsystem.riverty.com

Contributing

We welcome contributions to the Design Tokens package! Design tokens are the foundation of our design system.

Development Setup

cd packages/design-tokens
npm install
npm run build  # Generate tokens

Token Structure

Tokens are organized in JSON files:

tokens/
├── base_tokens.json          # Primitive values (core colors, base sizes)
├── color_tokens.json         # Color system (semantic colors)
├── typography_tokens.json    # Typography scale
├── spacing_tokens.json       # Spacing system
└── ...

Editing Tokens

1. Edit JSON files in the tokens/ directory:

{
  "color": {
    "primary": {
      "value": "#0066CC",
      "type": "color",
      "description": "Primary brand color"
    }
  }
}

2. Build to generate outputs:

   npm run build

   This generates:

   • lib/tokens.css - CSS custom properties
   • lib/tokens-base.scss - SCSS variables
   • Other formats

3. Test in dependent packages:

   • @riverty/css-framework
   • @riverty/web-components

Naming Conventions

Follow Style Dictionary naming:

• Primitive tokens: base-color-blue-500
• Semantic tokens: color-primary, spacing-md
• Component tokens: button-padding-horizontal

Best Practices

• Use semantic names for application tokens
• Reference primitive tokens in semantic tokens
• Document the purpose of each token
• Consider dark mode when adding color tokens
• Maintain consistency across token categories
• Test generated outputs

Token Types

• Color: Brand colors, semantic colors, state colors
• Spacing: Margin, padding, gap values
• Typography: Font families, sizes, weights, line heights
• Border: Radius, width
• Shadow: Box shadows, elevation
• Animation: Durations, easings

Testing Changes

After modifying tokens:

1. Build design tokens: npm run build
2. Build dependent packages (CSS, components)
3. Check visual regression in Storybook
4. Document breaking changes

For complete contribution guidelines, see CONTRIBUTING.md in the repository root.