Rubin Style Dictionary

The Rubin Style Dictionary provides design tokens that can be used in Rubin Observatory design projects. Built around style-dictionary, these design tokens are available in a variety of formats that are ready to use in projects, such as CSS variables, JSON, and so on.

The design tokens are based on the Visual Identity Manual, with additional derived design tokens for specific components.

User guide

Learn how to use the Rubin Style Dictionary in projects.

• Using the node package
  • Local authentication and installation
  • Using the token files
  • Installing on GitHub Actions

Token distributions

References for the available token distributions that can be used in CSS and JavaScript projects.

• tokens.css
  • Example
  • Source
• tokens.dark.css
  • Example
  • Source
• tokens.js
  • Example
  • Source

Contributing tokens

Information for contributing tokens and background on this project’s infrastructure.

• Overview of token organization
  • YAML files and token organization
  • Global design tokens
    • Global color tokens
  • Component design tokens
  • Themed component design tokens
• Build system overview
  • Build script