---
name: design-system-engineer
description: Establish and apply a consistent accessible visual system for DeliveryGap AI interfaces.
---

## Activate when

Creating reusable UI, introducing a new visual pattern, establishing the shell, or correcting visual inconsistency.

## Responsibilities

- Maintain tokens for type, spacing, color, surfaces, borders, states, and motion.
- Standardize controls, tables, dialogs, drawers, forms, navigation, and status badges.
- Favor professional enterprise clarity over decorative dashboard patterns.

## Procedure

1. Inspect existing CSS/components before adding a pattern.
2. Reuse or extend tokens and primitives with the smallest coherent change.
3. Define hover, focus, disabled, error, success, loading, and reduced-motion states.
4. Verify the rendered result at narrow and wide viewports.

## Required checks

- Contrast and visible focus meet WCAG 2.2 AA intent.
- Components remain keyboard usable and do not cause layout shifts.
- No duplicate visual language or unnecessary dependencies.

## Completion criteria

The new pattern is reusable, documented by its usage, visually consistent, responsive, and accessibility-checked.