Oombla DocsMenuoombla.com


Color design tokens

The color design tokens are exported from Figma’s color styles. The token names are converted for each platform directly from the style name and hierarchy is always preserved relevant to the platform structure. Content in the description is included as a code comment with to the token’s name and value.

Figma UI with color style panel active showing color value, color name of light / blue / 500 and description

For example, the Figma color style shown above would be converted to the following code for the CSS platform:

/* color.css */

:root {
  --light-blue-500: #2c75ff; /* base button color */

Color values

Fully opaque colors are transformed to standard hex values for all platforms. Colors with transparency are transformed to rgba() format.

:root {
  --blue: #0000ff;
  --blue-transparent: rgba(0, 0, 100, 0.5);

All colors are stored in a single file following the format and structure of each platform.