Toolbox

Token layer rules

Lock application code to semantic tokens: 25 testable rules, DTCG 2025.10 token files and ESLint and stylelint gates that run.

What it is

Field Guide 03: 25 rules for a three-layer token system (private core, public semantic, optional component) that application code and the agents writing it can only consume through semantic tokens. The kit is a working project: DTCG 2025.10 tokens validated against the official schemas, a rules checker, a WCAG contrast check in light and dark, a Style Dictionary 5 build and ESLint and stylelint configs that reject core tokens and raw values.

When to use

When generated or hand-written code keeps reaching for raw hex values and palette tokens, or before adding a dark mode or a second brand.

How to use

Map the guide's core, semantic and component layers to your team's vocabulary
Run npm install and npm run check in the kit to see every gate pass
Run npm run demo:gate to see what the gate blocks
Turn the ESLint and stylelint rules on in warning mode in your product repo
Migrate the violations, then make the gate an error in CI

Before you start

Prerequisites and when to skip this.

Prerequisites

Design tokens in a build pipeline (or the will to start one)
Control over the lint configuration of the product repositories

When NOT to use this

A single-product team with no theming needs (semantic tokens still help, the gate may be overhead)
A system mid-migration from a different token format (finish the migration first)

Consider instead

You are still migrating from raw values to tokens: Start with the Token Migration Playbook, then add these rules

Downloads

Guide (PDF)Full kit (ZIP): tokens, build, lint configs, checks

Component contract checklistToken Migration PlaybookDesign systems in the AI era

The share link includes source tracking so LinkedIn traffic stays measurable in analytics.

Share on LinkedIn