Framer uses Color Styles as its design token system for colors. Each Color Style is a named value that you apply to elements, and changing the style updates every instance. This is the design system model, and PaletteRx exports the named color values that populate it.
Framer's Color Style System
In Framer, Color Styles live in the Assets panel under the Color Styles section. Each style has a name, a hex value, and an optional description. When you apply a Color Style to a frame's background or text, it creates a live reference — not a copy of the hex value.
Exporting from PaletteRx
Select Framer from the Design Tools section in PaletteRx's export step. The output includes a hex reference card plus a JSON token structure with each color named by its PaletteRx slug and described by its role. The JSON format can be used with Framer's design token import capabilities.
Creating Color Styles
In Framer, open the Assets panel and navigate to Color Styles. Click the "+" button to create a new style. Name it according to the PaletteRx export label (Primary, Secondary, Light Base) and paste the hex value. Add the role description for documentation.
Once created, these Color Styles appear in every color picker throughout your Framer project. Selecting a style instead of typing a hex value ensures consistency and enables global updates.
Code Components and Tokens
If you use Framer's code components, you can reference Color Styles as CSS variables. The PaletteRx JSON token output also provides the structured format that code components can consume for programmatic color access.