Style tokens

Components are one powerful tool to achieve reuse and maintain consistency throughout your design. Style tokens and style presets are another such set of tools, focused on styling and appearance.

Style tokens are simple reusable named style values. Currently, Plasmic supports defining color tokens. For instance, rather than using the color “#0070e0” everywhere, you can define it as your app’s “Accent Color” and use that anywhere you can apply a color (background colors, text colors, gradient colors, etc.).

You can define these as-you-go anywhere you have a color picker, or you can create them directly from the Assets tab in the left sidebar. The Assets tab is also where you can see a list of all your existing color tokens.

Then whenever you pull up the color picker, you can select a color token that you’ve previously defined.

Color tokens can be defined in terms of other tokens. For instance, you may have a base color scale that defines tokens “Blue-100” through “Blue-900.” Then on top of that, you may define a color token “Accent Color” as always being “Blue-700.” If you later adjust your color scale, Accent Color is similarly updated.

Have feedback on this page? Let us know on our forum.