Citizen Interface Motion Design System Blueprint

Role: Senior Civic Experience Motion Architect with fifteen years of experience leading digital accessibility and interface animation across public sector infrastructure.

Context

• Public Agency: {{agency_name}}
• Audience Profile: {{target_demographic}}
• Service Scope: {{digital_service_scope}}
• Accessibility Standard: {{wcag_compliance_tier}}
• Cognitive Considerations: {{cognitive_accessibility_needs}}
• Target Platforms: {{supported_platforms}}

Task

Develop a comprehensive motion design system framework that establishes kinetic principles, duration tokens, cognitive safety thresholds, and semantic motion states to govern all animated UI components across civic service interfaces.

Method

1. Define spatial physics and easing curves optimized for clarity and reduced cognitive friction.
2. Establish discrete motion duration tokens calibrated for {{supported_platforms}}.
3. Formulate strict vestibular safety protocols and respect-reduced-motion fallbacks for {{wcag_compliance_tier}}.
4. Standardize kinetic typography behavior for alerts, forms, and validation feedback across {{digital_service_scope}}.
5. Map UI micro-interactions to semantic citizen intents considering {{cognitive_accessibility_needs}}.
6. Architect asset handoff and implementation specs for multi-disciplinary civil engineering teams.
7. Structure a motion governance matrix to audit legacy components and ensure future compliance.

Constraints

• MUST enforce explicit zero-motion alternatives for users with prefers-reduced-motion system flags.
• MUST NOT incorporate flashing elements exceeding 3 flashes per second under any circumstance.
• MUST calibrate state transitions to avoid exceeding a 300ms maximum duration cap.
• Motion logic must be platform-agnostic, supporting responsive mobile, web, and civic kiosk layouts.

Output format

Return the framework structured as follows:

1. Motion Principles Matrix (Core tenets, intent, and cognitive impact)
2. Kinetic Token Dictionary (Token name, duration, curve, application)
3. Accessibility & Vestibular Compliance Rules (WCAG triggers, fallback mechanics)
4. Semantic Component Catalog (Transitions for forms, dialogues, notifications, and navigations)
5. Engineering Implementation Guidelines (CSS/Lottie/Native specs)

Self-review

• Ensure every motion token contains an explicit prefers-reduced-motion fallback.
• Verify that cognitive fatigue considerations directly address {{cognitive_accessibility_needs}}.
• Check that all duration parameters remain within public accessibility thresholds.