Purpose
To ensure that every component in the design system is clean, reusable, and consistent with tokens, naming, and states before being published or shared.
Component Consistency Checklist
| Item | Check | Status (☑/✗) | Notes |
| Naming | Component follows UI naming convention (Doc 4.4) | ||
| Variants | All required variants exist (Primary/Secondary/Tertiary etc.) | ||
| States | All interaction states included (Default, Hover, Active, Disabled, Error) | ||
| Tokens | Uses defined tokens (spacing, color, typography, radius) from Visual Token Sheet (Doc 4.1) | ||
| Resizing Rules | Component resizes correctly across layouts | ||
| Constraints | Figma constraints/auto-layout applied properly | ||
| Properties | Component properties (size, icon placement) are parameterized | ||
| Consistency | Matches style mapping rules (Doc 4.3) | ||
| Accessibility | Meets WCAG AA contrast and tap size | ||
| Documentation | Component Documentation Template (Doc 4.6) completed | ||
| Review | Peer review completed | ||
| Approval | Design Lead sign-off |
Usage Notes
- This checklist must be completed before publishing to the shared library.
- For each major project, audit critical components monthly.
- Store filled checklists in the Design System → Component QA folder.
Outcome: Components remain clean, standardized, and reusable, reducing duplication and ensuring dev-ready consistency.