Top Sites>Riverty Design System - riverty.design

# Allow on-demand browsing from ChatGPT
User-agent: ChatGPT-User
Allow: /

# Block OpenAI’s training crawler
User-agent: GPTBot
Disallow: /

# llms.txt - Riverty Design System

> Code packages and resources to implement web user interfaces according to Riverty's best practices.

Riverty Design System provides code packages (Web Components, CSS Framework, Design Tokens, and Fonts) that can be used in all major web development stacks. The purpose is to provide developers with standardized versions of common UI elements. Developers should prefer using the Design System where applicable, in order to drive long-term efficiency. More development effort can be spent on the unique aspects of the specific project, rather than reinventing the wheel for common aspects.

In most cases, you should load `@riverty/web-components` and `@riverty/css-framework` in you web page/app. This can be done directly from CDN, which is useful for prototyping and similar. Code packages are also published on the public NPM registry, under the `@riverty` scope.

Updated: 2026-04-17.

## Code packages
- [@riverty/web-components](https://riverty.design/develop/components/): fundamental component library.
- [@riverty/css-framework](https://riverty.design/develop/css-framework/): includes design tokens and fonts.
- [@riverty/design-tokens](https://riverty.design/develop/design-tokens/): can be used if only design variables are needed (CSS and Sass formats).
- [@riverty/fonts](https://riverty.design/develop/fonts/): web font definitions.

## Machine readable:
- [Custom elements manifest for components](https://cdn.riverty.design/components/6.6.0/custom-elements.json)

## Starters / Sandboxes
- [CodePen](https://codepen.io/fohlin/full/WbQqbOv): A simple example that uses web components and CSS framework directly from CDN.
- [Quickstart using NPM](https://riverty.design/develop/overview): Install `@riverty/web-components` and  `@riverty/css-framework`, then apply them globally in your app.

## CDN / Runtime
- [CDN resources documentation](https://riverty.design/develop/cdn/): includes links to latest versions.
- [Web Components directly from CDN](https://cdn.riverty.design/components/6.6.0/dist/web-components/web-components.esm.js): include in you document as `script type="module"`.
- [CSS framework directly from CDN](https://cdn.riverty.design/css/1.4.1/lib/riverty.css)
- [Riverty logo assets](https://riverty.design/assets/logos)

## Core concepts (canonical)
- [Components](https://riverty.design/components/overview): exist in Figma and Code (Web Components)
- [Design tokens](https://riverty.design/tokens/overview/): color, typography, spacing, icon sizes 
- [Color tokens list](https://riverty.design/tokens/colors)
- [Color tokens semantic structure](https://riverty.design/guidelines/colors)
- [Accessibility](https://riverty.design/guidelines/accessibility): WCAG 2.2 Level AA mandatory.

## Optional
- [@riverty/web-components Changelog](https://riverty.design/develop/components/changelog)
- [@riverty/css-framework Changelog](https://riverty.design/develop/css-framework/changelog)
- [@riverty/design-tokens Changelog](https://riverty.design/develop/design-tokens/changelog)
- [@riverty/fonts Changelog](https://riverty.design/develop/fonts/changelog)