Token architecture for multi-modal alerts

WHAT THIS TESTS The interviewer wants token thinking beyond color: a single semantic concept expressed across multiple sensory modalities, kept coherent. This is advanced design-token architecture.

A GOOD ANSWER COVERS Anchor on the semantic concept, not the medium. Define alert.critical as one named token that contains modality-specific sub-tokens: a visual group (a color referencing a primitive red, plus icon and elevation), a voice group (the spoken phrase, urgency or SSML hints, speaking rate), and a haptic group (a named vibration pattern and intensity). Because all modalities live under one concept in a single source of truth (platform-neutral JSON, ideally following the W3C DTCG structure with custom types for voice and haptics), they are defined and reviewed together, which keeps them in sync. A build pipeline then transforms each group for its engine: CSS or native color for screens, a TTS/SSML config for voice, and a Core Haptics or VibrationEffect pattern for devices. Validate against a schema so every critical alert defines all required modalities.

COMMON WRONG ANSWERS Maintaining three independent files (colors, phrases, haptics) with no shared concept, guaranteeing drift. Hardcoding the haptic and voice values directly in each platform app. Treating tokens as color-only and bolting voice and haptics on as an afterthought.

LIKELY FOLLOW-UPS How do you transform a haptic pattern token for iOS Core Haptics versus Android VibrationEffect? How do you enforce that every alert defines all modalities? How do references and themes interact with modality groups?

ONE CONCRETE EXAMPLE In JSON, alert.critical holds visual.color referencing red.600, voice.phrase Critical alert, please respond with rate fast, and haptic.pattern referencing a sharp double-buzz with high intensity. The pipeline emits a CSS variable, an SSML snippet, and a Core Haptics pattern for iOS plus a VibrationEffect for Android, all from that one definition, so changing the alert updates every modality at once and a schema check ensures none is missing.