Design Tokens (JSON)

Every color, size, spacing step, and shadow GravityView uses is published as a JSON file. Import it into a design tool and you get GravityView's palette without retyping hex codes, or feed it into a build step that generates CSS to restyle your Views.

The file is rebuilt whenever GravityView changes, so it never goes stale. If you just want to change some colors on a View, you don't need any of this — see Theming.

Get the file

css-tokens.tokens.json is the one you want. It follows the Design Tokens Community Group format, which Figma, Style Dictionary, Terrazzo and Tokens Studio all read.

There is also css-tokens.json, a plain list of every token with its exact CSS value. Reach for it when you want the raw values rather than something a design tool understands.

One thing to watch out for

A token's name in the file is not its CSS variable name. The token at gravityview.border.entry_color is the variable --gv-entry-border-color — the words are rearranged. Generate CSS from the names and you'll produce variables GravityView ignores, and nothing will change on your site.

Every token carries its real variable name, so use that instead. You'll find it at $extensions["com.gravitykit.tokens"].cssVar.

Generating CSS with Style Dictionary

The transform below tells Style Dictionary to use GravityView's variable names:

import SD from 'style-dictionary';

const EXT = 'com.gravitykit.tokens';

SD.registerTransform({
  name: 'name/gv-cssvar',
  type: 'name',
  transform: (t) => t.$extensions[EXT].cssVar.replace(/^--/, ''),
});

const sd = new SD({
  source: ['css-tokens.tokens.json'],
  platforms: {
    css: {
      prefix: '',
      transforms: SD.hooks.transformGroups.css.map((t) =>
        t === 'name/kebab' ? 'name/gv-cssvar' : t,
      ),
      files: [{ destination: 'gravityview-tokens.css', format: 'css/variables' }],
    },
  },
});

await sd.buildAllPlatforms();

If your animation timings come out as [object Object], that's a known gap in Style Dictionary 5. Register this transform too and add 'duration/css-dtcg' to the list above:

SD.registerTransform({
  name: 'duration/css-dtcg',
  type: 'value',
  transitive: true,
  filter: (t) => t.$type === 'duration' && typeof t.$value === 'object',
  transform: (t) => `${t.$value.value}${t.$value.unit}`,
});

Other tools

Terrazzo reads the file as-is. It will warn that GravityView's token names use underscores rather than dashes; set its core/consistent-naming rule to { format: "snake_case" } to quiet that.

Figma and Tokens Studio import the file directly, no configuration needed.

A few tokens aren't in there

The format can't describe certain CSS, such as widths set in percentages or values that adapt to the screen size. Those tokens still appear in the file with their description and their CSS, but without a value, so design tools skip past them rather than importing something wrong.

A handful of others are calculated from another token — text sizes, for instance, are multiples of the base font size. The file records what they work out to at GravityView's defaults, and says so in the token's description. Change the base size on your site and those numbers will no longer match.

Both groups are listed inside the file under $extensions["com.gravitykit.tokens"], and the plain list linked above always has the exact CSS.