Kaptio Forma

Foundations

Token Reference

Every Forma token in one place. The canonical source is forma.json — CSS and TypeScript files are generated from it automatically.

How It Works

1

Edit forma.json

The single source of truth. Add, change, or remove tokens here.

2

Run generate-tokens

npm run generate-tokens reads the JSON and produces forma.css and tokens.ts.

3

Commit all three files

Push to GitLab. CI rebuilds. Figma Tokens Studio syncs from the JSON.

Export Formats

forma.json

Figma Tokens Studio format. The canonical source.

{
  "forma": {
    "primary": {
      "400": {
        "value": "#056F82",
        "type": "color",
        "description": "Links, icons, interactive"
      }
    }
  }
}

forma.css

CSS custom properties. Drop into any web project.

:root {
  --forma-primary-400: #056F82;
  --forma-yellow-400: #FFBC42;
  /* ... */
}

tokens.ts

TypeScript export. Used by the Forma site components.

import { primaryColors } from './tokens';
// primaryColors.colors[0].hex => '#056F82'

Figma Integration

  1. 1. Install Tokens Studio plugin in Figma
  2. 2. Connect to GitLab: kaptio1/platform-and-services/edge/kaptio-forma
  3. 3. Set token file path: src/tokens/forma.json
  4. 4. Pull tokens — all colors, fonts, spacing appear in Figma
  5. 5. Edit tokens in Figma, push back to GitLab — CI regenerates everything