How to Hand Off Color Tokens to a Developer

A screenshot leaves the developer guessing at values. A CSS file gives the values but may leave their uses unclear. A useful handoff combines both kinds of information: exact tokens and a short map of the text and backgrounds they serve.

Settle the values and order

Confirm the four colors and their order in the builder. Reordering changes which value becomes --color-1, so settle the sequence before connecting numbered tokens to semantic roles.

Export the CSS token file

:root {
  --color-1: #152C57;
  --color-2: #F6F8FD;
  --color-3: #315CCC;
  --color-4: #B7CAE9;
}

These variables hold the raw palette values. Download the CSS and compare each value and its position with the table. The developer can then assign names such as body-text in the project stylesheet.

Include editable JSON

{
  "schemaVersion": 1,
  "name": "Cobalt Porcelain",
  "colors": [
    {
      "id": "swatch-1",
      "hex": "#152C57"
    },
    {
      "id": "swatch-2",
      "hex": "#F6F8FD"
    },
    {
      "id": "swatch-3",
      "hex": "#315CCC"
    },
    {
      "id": "swatch-4",
      "hex": "#B7CAE9"
    }
  ],
  "standard": "opaque-sRGB"
}

The JSON includes schemaVersion 1, the palette name, stable swatch IDs, hex values and the opaque-sRGB marker. It can be re-imported. Keep temporary locks, working labels and role notes alongside it because the portable format leaves them out.

Add a role map

Add the intended text and background for each role, plus the size and contrast criterion. For example, assess 16 px regular body text as AA normal. Reusing cobalt for a small link on another panel adds a new pair to check.

Reopen the exported palette

• Download the palette JSON.
• Import it and compare all four values and their order.
• Check the three recorded role pairs in the matrix.
• Regenerate CSS and SVG if anything changed during review.

Re-importing catches stale exports, reordered swatches and edits that were never downloaded. You can do this without an account. If browser storage is unavailable, download the current palette directly.

Name the revision and open questions

Use a recognizable revision name and a short change note. Say which color changed, which roles use it and what needs review. Include only real review names and dates, tied to the files being shared.

List open questions such as focus rings, disabled states or text over images. The developer can implement the agreed roles without mistaking a text-contrast pass for a complete component review.