I have a visualforce page that uses <apex: slds/> to leverage lightning design system.

I'm trying to set background color on an element using the $color-background-backdrop-tint global variable listed in design tokens on slds documentation.

If I hard-code the hex value, it works fine.

<div class="slds-card__body" style="background-color : #fafaf9;">

If i use the global variable, it does not work.

<div class="slds-card__body" style="background-color : $color-background-backdrop-tint;">

I assume this means that these standard design tokens cant be used in visualforce, and can only be used with lightning components? Or is there something I'm missing?

1 Answer 1


Lightning uses a CSS preprocessor to convert the styles that you present into the CSS that will eventually be recognized by the browser. As such, you can use tokens in Visualforce, but not directly.

Here's how'd you use tokens in Visualforce.


First, go install Sass.

Get Token Bundle

Next, go get the Sass Token Bundle from the Lightning Design System Downloads page.

Write Sass Locally

Write a .sass file that contains the styling you want, and imports the tokens. Note: I don't know anything about Sass, but it's got documentation.

Compile Sass to CSS

Compile the .sass sources into CSS. At this point, your tokens will have been incorporated.

Upload Static Resource

Upload the file as a Static Resource in Salesforce.

Import CSS

Import the CSS with apex:stylesheet.

<apex:stylesheet url="{!URLFOR($Resource.myCompiledCSS)}" />

Use CSS Classes

Use the CSS classes that were built as part of compiling your Sass sources. For example, the compiled CSS might result in you writing code like this:

<div class="slds-card__body vf-backgound-color-tint">
  • hard-coding suddenly seems like quite an efficient approach. but thank you for this, i look forward to digging into it.
    – gorav
    Jun 12, 2018 at 22:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .