All Design Tokens

This page contains the complete list of all design tokens available in the Gstock Design System. For a more detailed description of each category, visit the main tokens page.

Overview

Design tokens are organized into the following categories:

• Background: Tokens for background colors and surfaces
• Border: Tokens for borders and outlines
• Color: Tokens for brand and state colors
• Elevation: Tokens for shadows and elevation
• Motion: Tokens for animations and transitions
• Spacing: Tokens for spacing and layout
• Typography: Tokens for typography and text

Accessing Tokens

To access the complete documentation for each token and their values, check the following sections in the main tokens page:

• Color Tokens
• Spacing Tokens
• Typography Tokens
• Elevation Tokens
• Motion Tokens
• Border Tokens

Implementation

Tokens are available as CSS custom properties and can be imported into your project via:

@import '/dist/themes/gstock.css';

For more information on how to implement and use design tokens, check our installation guide.