Design Tokens
46 bites tagged Design Tokens — interview questions with model answers, and 60-second explainers.
Manage light and dark themes with Variables and Modes
Separate primitive and semantic variables, define light and dark modes in one collection, and bind UI fills to semantic tokens. token-driven theming in Figma. duplicating screens per theme or hardcoding hex values.
A brand-only component consuming core tokens
Keep the unique component in a brand-specific package that depends on core tokens and primitives; do not add it to core. Layering brand-specific components.
Architecting density themes with tokens
Components reference semantic spacing tokens; a density theme repoints those tokens via CSS variables on a wrapper, so one stylesheet adapts. Density via token layering.
Breaking token changes across multiple themes
A change is safe if every theme still satisfies the token's contract and contrast; dangerous if it breaks one theme, like a value that fails contrast in high-contrast mode. Token change safety under multi-theme.
Automating a breaking design token rename
Ship a codemod to rewrite old token references, add a deprecation alias mapping old to new during a transition window, document the change. Token migration automation.
Governance for a multi-brand design system
Brand-agnostic core consuming semantic tokens, per-brand token themes, contribution rules blocking brand conditionals in core. Multi-brand architecture and governance.
Repo and versioning strategy for multi-platform DS
Shared platform-agnostic tokens as source of truth, per-platform packages, independent semver, a monorepo with workspaces. Multi-platform packaging.
Explain token aliasing in design systems
Primitives hold raw values, semantic tokens reference them by intent, components consume only semantic ones. Layered token architecture intuition. Hardcoding hex values in components or skipping the semantic layer entirely.
Token architecture for multi-modal alerts
A semantic alert concept with per-modality token groups (visual, voice, haptic) under one name, single source of truth, and platform transforms. modality-agnostic token modeling. three disconnected definitions that drift.
Versioning and distributing multi-platform tokens
JSON source, Style Dictionary transforms per platform, semantic versioning, and per-platform package registries in CI. full token pipeline plus distribution. ignoring how each platform consumes and updates the packages.
Delivering one color token to three platforms
One JSON source, generated CSS variable for web, color resource XML for Android, and Swift/asset for iOS. platform-specific token output. pasting the same hex by hand into each platform.
Token build pipeline for multi-platform output
JSON source of truth, a tool like Style Dictionary with per-platform transforms and formats, and CI publishing. token transformation across platforms. hand-maintaining separate platform files in parallel.
Structuring tokens for brand and sub-brand inheritance
Tiered tokens (primitive, semantic, component), sub-brands override only semantic aliases, and references keep inheritance live. layered token architecture. copying the full token set per brand and diverging.
Enforcing WCAG color contrast programmatically
Pre-validate token pairs, expose only safe semantic combos, lint and test contrast in CI. preventing failing color pairings by design. trusting developers to eyeball contrast manually.
Syncing design tokens from Figma to code
Export Figma variables to a token spec, transform with Style Dictionary into platform outputs, automate via CI. a tokens pipeline with a single source of truth. manually copying hex values by hand.
Architecting global and local theming with context
A top-level provider supplies global tokens, nested providers merge local overrides, components read the nearest theme, often backed by CSS variables. layered theming via context. passing theme through props at every level.
Choosing a spacing scale for a design system
A numeric base-grid gives predictable math, semantic t-shirt names give readable intent, often combine them. turning spacing into a consistent system. free-form pixel values with no scale or rationale.
Multi-theme infrastructure for a component library
Style components against semantic tokens exposed as CSS custom properties, define per-theme token values, and switch at runtime via a data-theme attribute or class. theming architecture.
Core tokens versus alias semantic tokens
Core tokens are raw values like blue-500; alias tokens reference cores with intent like color-action; semantic aliasing decouples meaning from raw value. token-tier architecture.
Brand color as a token and CSS custom property
Define a typed color token in JSON, generate a custom property like --color-brand-primary, then reference it with var(). practical token-to-CSS wiring.
Fixing brand color contrast at the system level
Build a tonal palette with known contrast steps, define semantic text-on-surface token pairs that pass AA, and enforce with automated contrast checks. systemic accessibility thinking.
Distributing design tokens across web, iOS, and Android
Keep one source-of-truth JSON, transform with a tool like Style Dictionary, emit per-platform formats (CSS vars, Swift, XML) in CI. cross-platform token pipeline design.
Cross-platform themeable token system
Tier tokens with semantic theme sets that remap primitives per mode, transform to each platform's theme mechanism, and deliver versioned packages. combining theming with cross-platform delivery.
Tokens as a single source of truth pipeline
Define tiered tokens in standardized JSON, transform per platform with a build tool, publish versioned packages, and automate in CI. end-to-end token architecture.
Get Design Tokens bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.