Brand color as a token and CSS custom property

WHAT THIS TESTS A concrete check that you can move a value from an abstract token definition into usable, themeable CSS, and that you name and type tokens correctly.

A GOOD ANSWER COVERS In JSON, represent the color as a named, typed entry. Following the W3C Design Tokens format you would write something like a brand object containing a primary token whose type is color and whose value is #0052cc. The name should be structured, for example color.brand.primary, so a build tool can derive a predictable variable. That tool, or hand-authoring, emits a CSS custom property on :root, written as --color-brand-primary: #0052cc. Components never hardcode the hex; they reference it with var, for example background-color: var(--color-brand-primary). Adding a semantic alias such as --color-action that points to var(--color-brand-primary) lets you swap brand meaning without touching components.

COMMON WRONG ANSWERS Pasting #0052cc directly into many rules, which defeats the token's purpose and blocks theming. Omitting the type, so a transformer cannot tell a color from a string. Putting the custom property on a deep selector rather than :root, which limits its scope unnecessarily unless scoping is intentional for theming.

LIKELY FOLLOW-UPS How does this enable dark mode? Redefine the custom property under a theme selector or media query, and every var() reference updates automatically. What is the benefit of var() over a preprocessor variable? Custom properties are live at runtime and cascade, so theming and per-component overrides work without rebuilding. How do you provide a fallback? var(--color-brand-primary, #0052cc) supplies a default if the property is undefined.

ONE CONCRETE EXAMPLE The JSON holds color.brand.primary with type color and value #0052cc. The generated CSS is :root { --color-brand-primary: #0052cc; }. A button uses background-color: var(--color-brand-primary); color: white;. To theme, you add [data-theme=dark] { --color-brand-primary: #4c9aff; } and the same button restyles instantly with no markup or rebuild, demonstrating the full path from token source to live, themeable styling.