In this phase the element is fully defined and designed for use in the design system. The design system team can assist with defining the requirements and anatomy of the element if needed. The Governance Team will review and approve the final designs.

Define requirements

• Use cases
• Requirements

Create initial concept and design prototype

• Anatomy
• Visual design
• Behaviors
• States (disabled, active, etc)
• Variations

If the component is complex you may want to a design review of the concept design with the Governance team before going further.

Review with product and design teams

• Does the prototype meet all requirements?
• Does it meet accessibility standards?
• Does it have complete documentation (see Design Documentation tab)?
• Is it consistent with the Design System?
• Iterate until it does

Review with the Governance team for approval of design.

Design documentation should include:

• A short name for the component
• A brief description of the component, including guidance on when it should and should not be used
• Links to alternative components which might be useful in different contexts
• Example flows through the component
• Behaviour description
• Colour and Typography variables used (see. Colors and Typography)
• Any other information specific to the component (for example, wording of textual output)

This documentation will not only guide development but will also be the basis of the documentation for this site.