Importing tokens from raw JSON instead of the published bindings
Reading `tokens/global/colors.json` directly in product code bypasses the build pipeline's validation and reference resolution.
The wrong way
Reaching into the design system's source files from a consumer app to read token values directly.
import colors from '../../../design-system/tokens/global/colors.json'; const primary = colors.teal['500'].$value; // Brittle, unresolved, and out-of-pipeline
Why
The raw JSON files are sources, not products. They contain unresolved references like `{color.teal.500}`, semantic-vs-global tier markers, and theme branches that the build script flattens, resolves, and validates. Consuming the raw JSON skips contrast validation, breaks when the reference syntax changes, and ties your build to internal source layout. The published outputs are stable on purpose; the sources are not.
The right way
Consume the build outputs: the published CSS file for browsers, the agent-kit JSON for AI tools, or the `@jmf/tokens` NPM package (once published) for JS / TS code.
// CSS consumer
// @import '@jmf/tokens/dist/tokens.css';
// JS / TS consumer
import { tokens } from '@jmf/tokens';
const primary = tokens.color.action.primary.default;