Every palette entry and preset becomes a CSS custom property with a name derived from its slug, which is what makes the file usable from a stylesheet.
/* from a palette slug of "brand" */
--wp--preset--color--brand: #1f6feb;
/* from settings.typography.fontSizes, slug "large" */
--wp--preset--font-size--large: 1.5rem;
/* and from settings.custom, which is free-form */
/* { "custom": { "lineHeight": { "tight": 1.2 } } } */
--wp--custom--line-height--tight: 1.2;
.card { color: var(--wp--preset--color--ink); }The naming is mechanical — --wp--preset--{category}--{slug}, with camelCase in the JSON becoming a hyphenated segment — which means a stylesheet can reference the tokens without duplicating the values. The custom section is the escape hatch for anything that is not a recognised preset category, and it is where a design system’s spacing scale or line heights belong. Duplicating a colour in both the JSON and the CSS is the mistake this exists to prevent.