Cross-platform themeable token system
combining theming with cross-platform delivery.
tier tokens with semantic theme sets that remap primitives per mode, transform to each platform's theme mechanism, and deliver versioned packages.
WHAT THIS TESTS: This evaluates whether you can architect tokens so that both theming and cross-platform consumption fall out of one structure rather than being bolted on per target.
A GOOD ANSWER COVERS: Keep one platform-neutral source. Define primitive tokens once for the raw palette and scales. Express semantic tokens by role, like color-surface and color-text-default, and provide a theme set for each mode where the same semantic names remap to different primitives, so light and dark differ only in mapping, not in component code. A build tool such as Style Dictionary then transforms each theme into the platform's native theming mechanism: for web, CSS custom properties scoped under a [data-theme] selector or prefers-color-scheme media query; for iOS, asset catalog color sets or dynamic colors that switch with the system; for Android, resource qualifiers like values and values-night, or Compose theme objects. Components on every platform consume only semantic tokens, so switching theme is just selecting the other mapping. Version and publish per-platform packages, and run the whole pipeline in CI so a token change updates all themes and platforms together.
COMMON WRONG ANSWERS: Duplicating the full token set per platform and per theme, multiplying maintenance. Hard-coding light and dark values directly in components instead of consuming semantic tokens. Skipping the semantic layer so themes cannot remap cleanly. Not using each platform's native dark-mode mechanism, forcing manual switching.
LIKELY FOLLOW-UPS: How do you avoid a flash of the wrong theme on web load. How do native dynamic colors on iOS and night resources on Android reduce custom switching code. How do you test that both themes render correctly across platforms.
ONE CONCRETE EXAMPLE: color-surface is semantic; in the light set it maps to white, in the dark set to gray-900. The build emits a [data-theme="dark"] override for web, a dynamic color in the iOS asset catalog, and a values-night color on Android, so each platform flips themes natively from one source.
Read the original → designtokens.org
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.