Challenges of breaking changes in a design system
WHAT IT TESTS: managing breaking changes at scale. OUTLINE: technical (semver, codemods, coexistence) and organizational (comms, migration support, timelines) challenges. RED FLAG: shipping a breaking major with no migration path or warning.
Token architecture for multi-modal alerts
WHAT IT TESTS: modality-agnostic token modeling. OUTLINE: a semantic alert concept with per-modality token groups (visual, voice, haptic) under one name, single source of truth, and platform transforms. RED FLAG: three disconnected definitions that drift.
Governance to keep platforms from diverging
WHAT IT TESTS: cross-team design system governance. OUTLINE: a federated model with central stewards plus platform reps, an RFC process, and contribution rules. RED FLAG: a single team dictating to all platforms or pure free-for-all causing drift.
Performance trade-offs of abstracting native UI
WHAT IT TESTS: cost of cross-platform abstraction. OUTLINE: bridge/serialization overhead, JS-thread bottlenecks for lists, and mitigations like virtualization, native modules, and profiling both threads.
Modeling a confirmation action for voice
WHAT IT TESTS: abstracting intent from visual UI. OUTLINE: model confirmation as a modality-agnostic intent, add voice tokens (prompts, accepted phrases, reprompts, timeouts), and map intent to each modality.
Responsive Tabs with one consistent API
WHAT IT TESTS: adaptive component design. OUTLINE: one stable public API (items, value, onChange), internal swap of presentation by breakpoint, and shared selection state. RED FLAG: exposing two different APIs or duplicating state logic per mode.
Sharing logic, native UI across platforms
WHAT IT TESTS: separating shared logic from native UI. OUTLINE: shared module (e.g. Kotlin Multiplatform) for state/business rules, platform-native UI consuming it, and a clean interface boundary. RED FLAG: forcing shared UI and losing native feel.
Versioning and distributing multi-platform tokens
WHAT IT TESTS: full token pipeline plus distribution. OUTLINE: JSON source, Style Dictionary transforms per platform, semantic versioning, and per-platform package registries in CI. RED FLAG: ignoring how each platform consumes and updates the packages.
Pixel-identical modals across platforms
WHAT IT TESTS: knowing platform UX conventions. OUTLINE: raise back-button and gesture behavior, safe areas and keyboard insets, native dismiss patterns, and accessibility differences. RED FLAG: agreeing to pixel-identical without flagging native expectations.
Delivering one color token to three platforms
WHAT IT TESTS: platform-specific token output. OUTLINE: one JSON source, generated CSS variable for web, color resource XML for Android, and Swift/asset for iOS. RED FLAG: pasting the same hex by hand into each platform.
Preventing theme flash in SSR apps
WHAT IT TESTS: SSR hydration and theme timing. OUTLINE: flash comes from server not knowing client preference; fix with a blocking inline script setting the theme before paint. RED FLAG: setting the theme only in a useEffect after hydration.
Token build pipeline for multi-platform output
WHAT IT TESTS: token transformation across platforms. OUTLINE: JSON source of truth, a tool like Style Dictionary with per-platform transforms and formats, and CI publishing. RED FLAG: hand-maintaining separate platform files in parallel.
CSS custom properties versus Sass for theming
WHAT IT TESTS: runtime versus build-time variables. OUTLINE: custom properties are live and cascade for dynamic switching; Sass variables compile away. RED FLAG: claiming Sass variables can change theme at runtime without recompiling.
Architecting a themeable React component library
WHAT IT TESTS: theming React components via Context. OUTLINE: a ThemeProvider supplying tokens through Context, components reading them, and CSS variables for performance. RED FLAG: prop-drilling the theme or putting fast-changing state in Context.
Structuring tokens for brand and sub-brand inheritance
WHAT IT TESTS: layered token architecture. OUTLINE: tiered tokens (primitive, semantic, component), sub-brands override only semantic aliases, and references keep inheritance live. RED FLAG: copying the full token set per brand and diverging.
Implementing light and dark mode on the web
WHAT IT TESTS: practical theming with CSS. OUTLINE: CSS custom properties for color tokens, a data-theme attribute toggle, and prefers-color-scheme as default. RED FLAG: hardcoding two full stylesheets or only relying on JS to recolor.
Automated enforcement of deprecated component removal
WHAT IT TESTS: automating deprecation governance in CI. OUTLINE: lint rule failing new usages, codemods for existing ones, and a usage dashboard gating removal. RED FLAG: hard-failing builds day one with no migration path.
Coexisting major versions during migration
WHAT IT TESTS: running two breaking versions side by side safely. OUTLINE: scoped aliases or namespaced packages, isolated token scopes, and incremental migration. RED FLAG: ignoring duplicated CSS, global token collisions, and bundle bloat.
Tracking design system component usage and versions
WHAT IT TESTS: building adoption telemetry across many apps. OUTLINE: static scan of code or lockfiles, a central reporting store, and a dashboard; data drives deprecation and roadmap. RED FLAG: only counting npm downloads as real usage.
First steps to deprecate a legacy component
WHAT IT TESTS: knowing how to signal deprecation without breaking users. OUTLINE: add a JSDoc @deprecated tag and IDE/console warning, document the migration, and keep the component working. RED FLAG: deleting it immediately.