How to use SLDS Design Tokens in LWC

Design tokens are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain your design is consistent, and even easier to update it as your design evolves.

To use standard salesforce design tokens in your lwc. 

background-color : var(--lwc-colorBackgroundButtonBrand);

Here "var" is a CSS function used to access the token, "--lwc-" is a prefix you need to use and "colorBackgroundButtonBrand" is the token name.

you can find all SLDS design tokens here. Use Global Access(GA) support tokens only. In the document, all design tokens look like this $color-background, but we have to changes this to a camel case.

Ex: $color-background to colorBackground

usingDesignTokens.html

<template>
    <lightning-card title="Using Design tokens" icon-name="utility:custom_apps">
        <div class="slds-m-around_medium">
            <div>This is Sample Text, without any class</div>
            <div class="myClass">This is Sample Text, with custom CSS class with design tokens</div>
        </div>
    </lightning-card>
</template>

usingDesignTokens.js

import { LightningElement } from 'lwc';

export default class UsingDesignTokens extends LightningElement {}

usingDesignTokens.css

.myClass{
    color: var(--lwc-colorTextRequired); 
    background-color: var(--lwc-colorBackgroundRowNew); 
}

usingDesignTokens.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Also found above code in Tech Shorts Git repo

Source:
https://www.lightningdesignsystem.com/design-tokens/