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

Installation

npm install @riverty/design-tokens

Package Contents

• lib/tokens.css: CSS custom properties for direct browser usage.
• lib/tokens-base.scss: shared SCSS token maps.
• lib/tokens-light.scss: light theme SCSS token maps.
• lib/tokens-dark.scss: dark theme SCSS token maps.

Usage

CSS

@import url('@riverty/design-tokens/lib/tokens.css');

.example-element {
  background-color: var(--r-background-soft);
}

SCSS

npm install -D sass

@use '@riverty/design-tokens/lib/tokens-light' as tokens;

.example-element {
  background-color: tokens.$r-background-soft;
}

CDN Usage

Released versions are available on the Riverty CDN.

HTML <link> tag:

<link rel="stylesheet" href="https://cdn.riverty.design/tokens/{version}/lib/tokens.css">

CSS @import:

@import url('https://cdn.riverty.design/tokens/{version}/lib/tokens.css');

(Note: Replace {version} with the desired version of the tokens package).

Agent Skills

This package includes an agent skill (rty-design-tokens-usage) that describes token behavior, usage rules, and application context. It helps AI agents understand how to correctly use Riverty Design tokens in an application.

Installation

You can automatically sync the bundled skill from your node_modules:

npx skills experimental_sync

You can also install the skill locally using the GitHub CLI (installs for GitHub Copilot by default). You can use the --agent flag to specify a different AI assistant (e.g., claude-code):

gh skill install node_modules/@riverty/design-tokens/skills/rty-design-tokens-usage --from-local

Alternatively, since the skill is bundled in this npm package, you can manually copy it into your project's AI context directory (e.g., .agents/skills):

cp -r node_modules/@riverty/design-tokens/skills/rty-design-tokens-usage .agents/skills/